Usando CSS, es posible evitar que los usuarios seleccionen texto dentro de un elemento usando user-select: none. Ahora, es comprensible por qué hacerlo podría considerarse "controvertido". Quiero decir, tienes ¿Estaremos deshabilitando los comportamientos estándar de los usuarios? En términos generales, no, no deberíamos estar haciendo eso. Pero, ¿deshabilitar la selección de texto tiene algunos casos de uso legítimos (aunque raros)? Creo que sí.
En este artículo, exploraremos estos casos de uso y veremos cómo podemos usar user-select: none para mejorar (no entorpecer) las experiencias de los usuarios. Tampoco vale nada que el user-select la propiedad tiene otros valores además none que se puede usar para alterar el comportamiento de la selección de texto en lugar de desactivarla por completo, y otro valor que incluso hace cumplir selección de texto, por lo que también echaremos un vistazo a esos.
Posibles user-select valores
Comencemos repasando los diferentes user-select valores y lo que hacen.
La aplicación de user-select: none; a un elemento significa que su contenido de texto y el contenido de texto anidado no serán funcionalmente seleccionables o visualmente seleccionables (es decir, ::selection no funcionará). Si hiciera una selección que incluyera algún contenido no seleccionable, el contenido no seleccionable se omitiría de la selección, por lo que está bastante bien implementado. Y el apoyo es genial.
Los datos de soporte de este navegador son de Puedo usar, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.
Ordenador de sobremesa
| Chrome | Firefox | IE | Southern Implants | Safari |
|---|---|---|---|---|
| 4* | 2* | 10* | 12* | 3.1* |
Móvil / Tableta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 105 | 104 | 2.1* | 3.2* |
Negativamente, user-select: text hace que el contenido sea seleccionable. Usarías este valor para sobrescribir user-select: none.
user-select: contain es interesante Aplicarlo significa que si una selección comienza dentro del elemento, también debe terminar dentro de él, conteniéndolo. Curiosamente, esto no se aplica cuando comienza la selección. antes el elemento, sin embargo, que es probablemente la razón por la cual ningún navegador lo admite actualmente. (Internet Explorer y versiones anteriores de Microsoft Edge lo admitían anteriormente bajo la apariencia de user-select: element.)
Con user-select: all, al seleccionar parte del contenido del elemento, todo se selecciona automáticamente. Es todo o nada, lo cual es muy intransigente pero útil en circunstancias en las que es más probable que los usuarios copien contenido en su portapapeles (por ejemplo, compartir e incrustar enlaces, fragmentos de código, etc.). En lugar de hacer doble clic, los usuarios solo tendrán que hacer clic una vez para que el contenido se seleccione automáticamente.
Sin embargo, tenga cuidado, ya que esta no siempre es la característica que cree que es. ¿Qué pasa si los usuarios solo quieren seleccionar parte del contenido (por ejemplo, solo la parte del nombre de la fuente de un fragmento de Google Fonts o una parte de un fragmento de código)? Todavía es mejor manejar”copiar al portapapeles” usando JavaScript en muchos escenarios.
Una mejor aplicación de user-select: all es asegurarse de que las citas se copien en su totalidad y con precisión.
El comportamiento de user-select: auto (el valor inicial de user-select) depende del elemento y de cómo se use. Puedes saber más sobre esto en nuestro almanaque.
Ahora pasemos a explorar casos de uso para user-select: none...
Quitar el no texto de la selección
Cuando está copiando contenido de una página web, es probable que sea de un artículo o algún otro tipo de contenido de formato largo, ¿verdad? Probablemente no desee que su selección incluya imágenes, emoji (que a veces se pueden copiar como texto, por ejemplo, ":cara de pensamiento:") y otras cosas que podría esperar encontrar envueltas en un
elemento (por ejemplo, llamados a la acción en el artículo, anuncios o cualquier otra cosa que no sea parte del contenido principal).
Para evitar que algo se incluya en las selecciones, asegúrese de que esté envuelto en un elemento HTML y luego aplique user-select: none lo:
lorem 🤔 ipsum
En escenarios como este, no estamos deshabilitando la selección, sino más bien optimizando eso. También vale la pena mencionar que seleccionar no significa necesariamente copiar: a muchos lectores (incluido yo mismo) les gusta seleccionar contenido a medida que lo leen para que puedan recordar dónde están (como un marcador), otra razón para optimizar en lugar de desactivar por completo.
Evitar la selección accidental
¡Aplicá! user-select: none a enlaces que parecen botones (p. ej. Click Me!).
No es posible seleccionar el contenido de texto de un or porque, bueno, ¿por qué lo harías? Sin embargo, este comportamiento no se aplica a los enlaces porque tradicionalmente forman parte de un párrafo que debe ser seleccionable.
Lo suficientemente justo.
Podríamos argumentar que hacer que los enlaces parezcan botones es un antipatrón, Pero lo que sea. No es romper Internet, ¿verdad? Ese barco ha zarpado de todos modos, por lo que si está utilizando enlaces diseñados para parecerse a botones, deben imitar el comportamiento de los botones, no solo por coherencia, sino también para evitar que los usuarios seleccionen accidentalmente el contenido en lugar de activar la interacción.
Ciertamente soy propenso a seleccionar cosas accidentalmente ya que uso mi computadora portátil en la cama más de lo que me gustaría admitir. Además, hay varias condiciones médicas que pueden afectar el control y la coordinación, convirtiendo un clic intencionado en un arrastre/selección no intencionado, por lo que existen problemas de accesibilidad que se pueden abordar con user-select
Las interacciones que requieren arrastrar (intencionalmente) también existen, por supuesto (por ejemplo, en los juegos de navegador), pero son poco comunes. Aún así, solo muestra que user-select de hecho, tiene bastantes casos de uso.
Evitar el robo de contenido de pago
El contenido de Paywall recibe mucho odio, pero si siente que necesita proteger su contenido, es su contenido: nadie tiene derecho a robarlo solo porque no cree que deba pagar por él.
Si desea seguir este camino, hay muchas maneras de hacer que sea más difícil para los usuarios eludir los muros de pago (o, de manera similar, copiar contenido protegido por derechos de autor, como el trabajo publicado de otros).
Difuminar el contenido con CSS:
article { filter: blur(); }Deshabilitar los métodos abreviados de teclado para DevTools:
document.addEventListener("keydown", function (e) {
if (e.keyCode == 123) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});Deshabilitar el acceso a DevTools a través del menú contextual al deshabilitar el menú contextual en sí:
document.addEventListener("contextmenu", e => e.preventDefault())Y por supuesto, para evitar que los usuarios copien el contenido cuando no se les permite leerlo en la fuente, aplicando user-select: none:
¿Algún otro caso de uso?
Esos son los tres casos de uso que se me ocurren para evitar la selección de texto. Varios otros cruzaron por mi mente, pero todos parecían exagerados. ¿Pero qué hay de ti? ¿Ha tenido que deshabilitar la selección de texto en algo? ¡Me gustaría saber!
