¿Cuándo es bueno deshabilitar la selección de texto? | trucos CSS

Usando CSS, es posible evitar que los usuarios seleccionen texto en un elemento usando el user-select: none. Ahora es comprensible por qué esto podría considerarse "controvertido". Quiero decir, Deber ¿Deshabilitar el comportamiento predeterminado del usuario? En términos generales, no, no deberíamos hacer 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) la experiencia del usuario. Tampoco cuesta nada que user-select la propiedad tiene otros valores además none que se puede usar para cambiar el comportamiento de la selección de texto en lugar de deshabilitarla por completo, y otro valor que incluso impone selección de texto, así que también los veremos.

Posible user-select valores

Comencemos repasando los diferentes user-select valores y lo que hacen.

Solicitud user-select: none; a un elemento significa que su contenido de texto y el contenido de texto anidado no serán funcional o visualmente seleccionables (es decir, ::selection no funcionará). Si hiciera una selección que incluyera algún contenido no seleccionable, el contenido no seleccionable quedaría fuera de la selección, por lo que está bastante bien implementado. Y el apoyo es genial.

desfavorable, user-select: text hace que el contenido sea seleccionable. Usaría este valor para sobrescribir user-select: none.

user-select: contain es interesante. Aplicarlo significa que si una selección comienza en el elemento, también debe terminar en el elemento que lo contiene. Esto extrañamente no se aplica cuando comienza la selección. antes de sin embargo, probablemente por eso 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: allseleccionar parte del contenido del elemento automáticamente lo selecciona todo. 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 seleccionar automáticamente el contenido.

Sin embargo, tenga cuidado, ya que esta no siempre es la función que cree que es. ¿Qué pasa si los usuarios solo quieren elegir 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) En muchos escenarios, aún es mejor manejar "copiar al portapapeles" usando JavaScript.

Mejor aplicación de user-select: all es asegurarse de que las citas se copien de forma completa y precisa.

el comportamiento de user-select: auto (el valor inicial de user-select) depende del artículo y de cómo se utilice. Puede obtener más información al respecto en nuestro almanaque.

Ahora pasemos a explorar los casos de uso para user-select: none…

Eliminar elementos que no sean texto de la selección

Cuando copias 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, emoticonos (que a veces se pueden copiar como texto, por ejemplo, ":cara de pensamiento:") y otras cosas que podría esperar encontrar empaquetadas <aside> elemento (por ejemplo, llamadas 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 a él:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

En escenarios como este, no deshabilitamos la selección, sino que mejoramiento 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 deshabilitar por completo.

Evitar la selección aleatoria

Aplicar user-select: none a enlaces que parecen botones (p. ej. <a href="https://css-tricks.com/whatever" class="button">Click Me!</a>).

No se puede seleccionar el contenido de texto de un <button> o <input type="submit"> porque, bueno, ¿por qué lo harías? Sin embargo, este comportamiento no se aplica a los enlaces porque tradicionalmente son parte de un párrafo que debe ser seleccionable.

Me parece bien.

Podríamos argumentar que hacer que los enlaces parezcan botones es anti-patrón, pero sea como sea, no daña Internet, ¿verdad? Sin embargo, ese barco ha zarpado, por lo que si usa 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 estoy inclinado a Elijo las cosas al azar mientras 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 el clic en el objetivo en arrastrar/seleccionar involuntariamente, por lo que hay problemas de accesibilidad que abordar. user-select también.

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 demuestra que user-select en realidad hay bastantes casos de uso.

Evitar el robo de contenido pago

El contenido de Paywall recibe mucho odio, pero si siente la necesidad de proteger su contenido, es su contenido: nadie tiene derecho a robarlo solo porque no cree que deba pagar por él.

Si desea seguir ese camino, hay muchas maneras de hacer que sea más difícil para los usuarios eludir los muros de pago (o copiar contenido protegido por derechos de autor, como el trabajo publicado de otros).

Difuminar el contenido con CSS:

article { filter: blur(<radius>); }

Deshabilite 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();
});

Deshabilite 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 tienen permitido leerlo en la fuente, aplicando user-select: none:

<article style="user-select: none">

¿Otros casos de uso?

Esos son los tres casos de uso que se me ocurren para evitar la selección de texto. Algunos otros cruzaron por mi mente, pero todos parecían exagerados. ¿Pero qué hay de ti? ¿Alguna vez ha tenido que deshabilitar la selección de texto en algo? Me gustaría saber !