Com evitar que seleccionin el text de la teva web amb CSS

Hi ha pàgines on el text no és per copiar: jocs, aplicacions interactives o webs amb un enfocament estètic. Que el navegador seleccioni paraules en arrossegar el ratolí pot destrossar l'experiència. Amb CSS (el llenguatge que defineix l'aspecte d'una web) es pot desactivar la selecció.

El codi fa servir els selectors p, h1, h2, h3, h4, h5, h6, i cobreix tots els elements de text habituals:

p, h1, h2, h3, h4, h5, h6 {
    /* Estilos específicos para todos los elementos de texto */
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
}

Cada línia cobreix un navegador: -webkit-user-select: none; per a Safari, -ms-user-select: none; per a Internet Explorer 10 i 11, i user-select: none;, la sintaxi estàndard per a la majoria de navegadors moderns.

Un cop aplicat, els textos d'aquests elements ja no es podran seleccionar.

Si uses WordPress i no vols tocar el tema, pots inserir-lo amb un plugin de fragments de codi, com explico a Com eliminar elements del menú d'administració de WordPress amb Code Snippets. I per arrodonir l'experiència, un bon complement és el Botó de canvi de mode dia/nit: estètica i experiència d'usuari.