Hay ciertos casos en los que prevenir que se pueda seleccionar contenido de tu página web puede ser beneficioso. En estos casos, puedes utilizar la propiedad de CSS user-select.
Ejemplo
He aquí una regla de estilo para una clase llamada disable-selection que, cuando se aplique en un elemento HTML, evitará que la gente pueda seleccionar el elemento:
.disable-selection {
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
Algunas características de la regla:
- -webkit-user-select es para Chrome, Safari y Opera (no hay necesidad de usar -o-user-select)
- La versión sin prefijo de la propiedad user-select no se trata a propósito.
- La propiedad -webkit-touch-callout desactiva los mensajes que aparecen durante los eventos táctiles (en iOS y Android).
Cosas importantes a tener en cuenta
Hay un problema: user-select no es una propiedad CSS estándar incluida en las especificaciones de W3C. A pesar de que user-select cuenta con un buen nivel de aceptación por parte de los navegadores, utilizar la propiedad requiere de los prefijos de proveedores.
En el ejemplo anterior, no hemos utilizado la versión sin prefijo de user-select. Esto se debe a que no existe tal propiedad a ojos de los estándares web.
Otras cosas a tener en cuenta:
- La propiedad user-select no es para nada perfecta. A veces, podrás seleccionar texto, especialmente cuando empieces seleccionando partes del front-office en el que la selección no se haya deshabilitado.
- El uso del comando "Seleccionar todo" incluirá también textos que hayas catalogado como deshabilitados para ese acto. Esta situación puede verse claramente en Internet Explorer 11.
- Esta técnica no es a prueba de balas, y se le puede pillar muy fácilmente. Además, debes tener en cuenta que se puede deshabilitar CSS también. Esta técnica se basa en las propiedades CSS no estándar, lo que significa que existe todo un grado de incertidumbre con respecto a su continuo soporte en los futuros navegadores web.
- Desactivar la selección, para ciertas personas, es molesto. Solamente se debería utilizar en situaciones en las que mejorará la UX de personas que utilizan navegadores y dispositivos que admiten la propiedad de selección de usuario.
- La propiedad user-select podría invalidar tu hoja de estilo. Si os estándares son importantes para ti, el uso de esta propiedad podría darte problemas al utilizar las pruebas de validación, tales como el Servicio de Validación CSS cuando lo ajustes a sus opciones más estrictas.Espero que te haya gustado este artículo sobre desactivar la selección en CSS y sepas, sobretodo, aplicarlo en tus proyectos.
Fuente: sixrevisions.com