soy Kseso y esto EsCSS

Anulando ::selection O de cómo inhabilitar la selección de texto

Dos formas de inhabilitar la selección de texto en puro Css. Práctica, que pese a mostrar cómo hacerlo en este artículo, no deberías utilizarla excepto en muy contadas ocasiones y sólo en determinados elementos que por diseño lo necesiten.

Anulando ::selection O de cómo inhabilitar la selección de texto

·Por Kseso ✎ 1
Anulando ::selection O de cómo inhabilitar la selección de texto

El pseudoelemento ::selection es al que hemos de recurrir para aplicar estilos al texto seleccionado por el usuario al pinchar y arrastrar el curso sobre una parte cualquiera de él. Y con esto a prácticamente nadie descubro nada nuevo o que no sepa ya.

Pero ¿qué ocurre si lo que quieres es hacer lo contrario: impedir la selección de texto o que no quede resaltada la parte que hayas seleccionado?. Y esto es entrar en terreno peligroso, pues dicha práctica, impedir la selección de texto, siempre a estado acompañada de polémica. Y son muchos sus detractores, entre los que me encuentro.

Pero pese a ello, y acompañado de un gran aviso de advertencia para que lo lo hagas, aquí un par de formas de lograrlo con puro Css.

Digo que con puro Css porque normalmente todos los métodos pasan por el uso de javascript o del truco de sobreponer elementos al texto prohibido. Métodos todos igual de ineficientes y que son súmamente fáciles de saltar.

Haz creer que no se ha seleccionado nada

La primera forma pasa por hacer creer al usuario que no ha seleccionado nada del texto por mucho que arrastre el cursor sobre el texto.

Si recuerdas o has consultado el enlace con el que comienzo el artículo sabrás que al pseudoelemento ::selection sólo se le pueden declarar un número muy limitado de propiedades:

  1. color
  2. background-color. Pero background-image debe ser ignorada.
  3. cursor (optional)
  4. text-decoration y las propiedades asociadas a ella.
  5. outline (optional)

De las anteriores, sólo las tres primeras, color, background-color y cursor, suelen aplicarse a la parte del texto seleccionado.

Así que basta con declararlas de tal forma que pueda pensarse que no se ha seleccionado nada:

::selection { background: inherit; color: currentColor; cursor: not-allowed; }

See the Pen qEGZvW by Kseso (@Kseso) on CodePen.

Ver Demo

Esta emulación tiene algunos pequeños fallos que a poco que juegues con ella descubrirás.

Impidiendo la selección con user-select

Frente a esta forma que no deja de ser un trampantojo con sus fallos podemos optar por impedir diréctamente la selección de texto.

Para ello hemos de recurrir a propiedades fuera del corpus oficial y con la necesidad de usar prefijos privativos. Doble combo que hará saltar el aviso de errores si pasas por el validador.

-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*/ }

Como curiosidad, la propiedad user-select sí estuvo en el corpus y desapareció de él. Recientemente se acordó incluirla en el próximo documento sobre la interfaz de usuario (level 4)

Como ves por los prefijos privativos incluidos en el código 2 previo, el soporte es amplio: Chrome 6, Firefox 2, IE 10, Safari 3.1.

En versiones móviles: Chrome (Android) 2.1, Safari (iOS) 3.2.

-webkit-touch-callout: none; lo que hace es impedir que salgan los controles para seleccionar el texto arrastrándolos.

See the Pen myYEbO by Kseso (@Kseso) on CodePen.

Ver Demo

Deberás ser muy cuidadoso si decides utilizar user-select: none. No tanto porque presente ciertas inconsistencias en su funcionamiento, que las tiene. La principal razón es que estás atentando contra la usabilidad y accesibilidad allí donde la declares. Razones que tienen el suficiente peso.

Si quieres conocer un poco más sobre user-select: none te remito al artículo de Jacob Gube, fundador de Six Revisions, Disable Text Selection with CSS, que, además de ser origen de la demo sobre ella con la que ilustro este artículo, detalla las contras de su utilización.

Por cierto, si quieres saber mi opinión sobre user-select sólo tienes que pasarte por este artículo de Junio de 2012: Call to action: Disable "Disable Text Selection with user-select". No tanto por la propiedad en sí misma, que también, si no por el mal uso y abuso (pensando que con ella pueda protegerse nada) que seguro llegará.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso