Breaking

Post Top Ad

Your Ad Spot

miƩrcoles, 13 de noviembre de 2019

El selector ::selection CSS

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 ::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 4star  – o sea: CSS4.
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
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-decorationstar

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ónstar

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

PƔginas