CSS: el pseudo-elemento ::selection

¿Quieres definir un estilo para el texto seleccionado? ¿que el color de fondo sea verde moco? ¿que la leta se ponga en añil? Con CSS esto es posible utilizando el pseudo-elemento ::selection.

Debemos empezar recalcando que ::selection no pertenece a la especificación standar de CSS3 (estaba presente en los borradores, pero se eliminó de la especificación final), por tanto no está garantizado su funcionamiento en todos los navegadores. A pesar de eso tiene bastante compatibilidad, al menos con los navegadores para sistemas operativos de escritorio (y por otra parte, en un dispositivo móvil no es muy habitual andar seleccionando texto, al menos en mi caso). En caniuse podéis comprobarlo.

Si habéis ojeado el enlace anterior veríais que además en el caso de Firefox hay que usarlo con el prefijo -moz. En todo caso, este pseudo-elemento sólo acepta un pequeño grupo de reglas CSS: color, background, background-color y text-shadow. Ojo con querer utilizar una imagen de fondo, porque background-image será ignorado, igual que el resto de reglas que no sean las cuatro antes citadas.

Vamos con un ejemplillo de cómo funciona esto. Para ello usaremos nombres de clase llamados ejemploN a los que sumaremos el pseudo-elemento:

/*Empezamos por el color de fondo, gris*/
.ejemplo1::selection{
    background-color:#555555;
}
.ejemplo1::-moz-selection{
    background-color:#555555;
}
/*Ponemos la letra en rojo*/
.ejemplo2::selection{
    color:#FF0000;
}
.ejemplo2::-moz-selection{
    color:#FF0000;
}

/*Ponemos la letra en negro y el color de fondo gris claro*/
.ejemplo3::selection{
    background-color:#cccccc;
    color:#000000;
}
.ejemplo3::-moz-selection{
    background-color:#cccccc;
    color:#000000;
}

/*Le ponemos sombra al texto seleccionado*/
.ejemplo4::selection{
    text-shadow: 1px 1px 0 #27ae60;
}
.ejemplo4::-moz-selection{
   text-shadow: 1px 1px 0 #27ae60;
}

Puede ser un efecto interesante, pero repito que no forma parte de la especificación, no es un standar y por tanto puede que en un futuro de problemas o no funcione correctamente. Nos tocará esperar.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s