El "user-select" propiedad de texto no seleccionable

.elemento {
                  -webkit-user-select: none; /* Chrome all / Safari all */ 
                 -moz-user-select: none; /* Firefox all */ 
                 -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */
                  -o-user-select: none; 
                 user-select: none; 
}

Esto es útil en situaciones en las que se desea proporcionar una experiencia de copiar y pegar más fácil / más limpio para los usuarios (no tienen accidentalmente texto: seleccione cosas inútiles, como iconos o imágenes). Sin embargo, es un poco buggy. Firefox refuerza el hecho de que cualquier texto que coincide selector no se puede copiar. WebKit todavía permite que el texto que se desea copiar si selecciona los elementos que lo rodean. No hay especificaciones para esta propiedad (no estándar), por lo que es poco probable que cambie hasta que no lo es.

Un ejemplo lo puedes ver Aquí o copia y pega el siguiente codigo:

<style>

div { padding: 20px; 

      background: #eee; 
} 
p { 
      -webkit-user-select: none; 
      -khtml-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
      user-select: none; 
}
<style>



<p>You can't copy me (in WebKit browsers or Firefox).</p>
.
<p>But you can accidently copy me (in WebKit browsers, but not Firefox) by selecting the periods around me.</p>
.
<p>user-select is really useful. Not so much to protect text from being copied, but to provide a better user experience in little cases. Like let's say you have a row of little icons next to text. Nobody wants to select those icons, they want the text, so you could use user-select to make them unselectable.</p>
<p>But sad story, user-select isn't very reliable. It's not in the spec yet, which means there is no standard for browsers to follow. And as ever, the implimentations vary, as shown above. Just a small example of why specs are a good thing. They prevent situations like this.</p>

Comentarios

Entradas populares