Podemos seleccionar texto o imÔgenes de una pÔgina web, y todo el mundo sabe cómo hacerlo. También podemos dar formato al texto seleccionado utilizando el pseudo-elemento
Inicialmente el pseudo-elemento
– o sea: CSS4.
::selection
.Inicialmente el pseudo-elemento
::selection
fue pensado como parte del CSS3 pero fue suprimido antes de llegar a ser una recomendación. Actualmente aparece en el "Working Draft" ( borrador ) de CSS Pseudo-Elements Module Level 4
Importante A diferencia de otros pseudo-elementos que pueden ser seleccionados utilizando dos puntos (
:before
) o doble dos puntos (::before
), en el caso de ::selection
los doble dos puntos son obligatorios. Y no hay que olvidar los prefijos:
*::-moz-selection{color:red;}
*::selection{color:red;}
Por lastima no todo esta permitido. En este momento podemos modificar solo el
-
- el
-
del texto seleccionado.
-
color
,- el
background-color
( el color de fondo ) y el-
text-shadow
( el sombreado de texto )del texto seleccionado.
p.seleccion-test{font-size:24px;}
p.seleccion-test::-moz-selection{
color:red;
background-color:#0000ff;
text-shadow: 1px 2px 1px #fff;
}
p.seleccion-test::selection{
color:red;
background-color:#0000ff;
text-shadow: 1px 2px 1px #fff;
}
<p class="seleccion-test">Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozƔndolas apenas, las florecillas rosas, celestes y gualdas.</p>
Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozƔndolas apenas, las florecillas rosas, celestes y gualdas.
En el futuro podremos modificar otras propiedades como cursor, outline y text-decoration
Texto no seleccionable
TambiƩn podemos hacer que el texto sea no seleccionable utilizando la propiedad
user-select: none;
. En el siguiente ejemplo no podrƔ seleccionar el primer pƔrrafo. Por lo contrario podrƔ seleccionar el segundo.p.no-seleccionable {
-webkit-user-select: none;/* Chrome y Safari */
-moz-user-select: none;/* Firefox */
-ms-user-select: none;/* IE 10+ */
user-select: none;
}
<p class="no-seleccionable">Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozĆ”ndolas apenas, las florecillas rosas, celestes y gualdas. OjalĆ” el corazón les bastara a ellos dos como a mĆ me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegrĆa, me ofreció dos escogidas naranjas, finas, pesadas, redondas.</p>
<p>Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozĆ”ndolas apenas, las florecillas rosas, celestes y gualdas.OjalĆ” el corazón les bastara a ellos dos como a mĆ me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegrĆa, me ofreció dos escogidas naranjas, finas, pesadas, redondas.</p>
Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozĆ”ndolas apenas, las florecillas rosas, celestes y gualdas. OjalĆ” el corazón les bastara a ellos dos como a mĆ me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegrĆa, me ofreció dos escogidas naranjas, finas, pesadas, redondas.
Acero y plata de luna, al mismo tiempo. Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozĆ”ndolas apenas, las florecillas rosas, celestes y gualdas.OjalĆ” el corazón les bastara a ellos dos como a mĆ me basta. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro. Con su llorosa alegrĆa, me ofreció dos escogidas naranjas, finas, pesadas, redondas.
El mƩtodo getSelection()
Aunque aquà hablamos de CSS, es interesante saber que en JavaScript el método
getSelection()
devuelve un objeto con las propiedades del texto seleccionado por el usuario.var seleccion = window.getSelection();
Podemos recuperar el texto seleccionado llamando el mƩtodo
toString()
:console.log( seleccion.toString() )
Lea mÔs acerca del objeto selección
No hay comentarios.:
Publicar un comentario