CSS insertion caret: caret-color & caret-shape 31.1.17
Las propiedades CSS asociadas al carácter de inserción. Cómo personalizar el cursor parpadeante mostrado para insertar texto.
CSS insertion caret: caret-color & caret-shape
El documento CSS Basic User Interface Module Level 3 (CSS3 UI) con estatus W3C Candidate Recommendation (CR)
desde Julio de 2015 introducía la propiedad caret-color destinada a definir un color para el carácter de inserción.
Entiende por insertion caret el símbolo o carácter gráfico que muestra el navegador en los elementos con contenido editable para identificar el espacio en el que el usuario insertará nuevo contenido. Generalmente nuevo texto.
Dependiendo de la aplicación usada será por lo general una barra vertical parpadeante `|´ o un guión bajo `_´.
Sin embargo con el desarrollo del siguiente documento sobre la interfaz del usuario, CSS Basic User Interface Module Level 4, status Editor’s Draft desde Enero de 2017, los aspectos del insertion caret
sobre los que podemos actuar se han ampliado.
Estas son las propiedades CSS del grupo caret-*
y los valores admitidos en este último documento del consorcio:
La propiedad `caret-color´ o color del "insertion caret"
La propiedad caret-color controla el color del símbolo de inserción. Los valores admitidos son:
- auto: dejamos el color de "caret" en manos del navegador. Normalmente será computado como
currentColor. - <color>: puedes declarar cualquier color en cualquiera de las formas admitidas por CSS.
El consorcio resalta la conveniencia de asegurarse, sea cual sea el valor declarado, de una visibilidad y contraste suficiente del símbolo de inserción.
La propiedad `caret-shape´ o símbolo mostrado
Declarando la propiedad CSS caret-shape se puede elegir el símbolo o carácter mostrado para señalar es punto de inserción. Los valores posibles son:
- auto: el navegador decide. Unas veces puede ser un símbolo y otras otro. Depende del contexto.
- bar: muestra una barra vertical fina `|´ para indicar el punto de inserción, que puede ser a su izquierda o derecha o en su lugar, nunca sobre ella.
La barra puede ser inclinada `|´ si el texto es itálico u oblicuo. - block: muestra un pequeño rectángulo de color sobre el carácter siguiente al punto de inserción. Esto es, lo inserta justo antes del lugar (carácter) indicado por el bloque de color.
El rectángulo de color puede mostrarse sesgado si es itálico u oblicuo. - underscore: muestra una línea bajo el carácter siguiente al punto de inserción.
Nota: la expresión el carácter siguiente al punto de inserción
es relativo al modo de escritura CSS CSS writing modes usado.
La propiedad `caret-animation´
En la versión previa de este documento de trabajo "level 4" se incluía la ahora desaparecida propiedad CSS caret-animation para optar con qué tipo de animación se mostraba el caret insertion
o carácter de inserción.
Los posibles valores recogidos entonces eran: auto | blink | none | fade. Creo que no necesitan explicación.
También en el apartado correspondiente a la propiedad caret-animation recogía la posibilidad de aplicar animaciones "de autor" al `caret´:
textarea { caret-animation: none; caret-color: blue; animation: caret-alternate 2s step-end infinite; } @keyframes caret-alternate { 50% { caret-color: red; } }
Todo lo relativo a la propiedad CSS caret-animation ha desaparecido del desarrollo más reciente de esta especificación.
La propiedad CSS acortada `caret´
Tanto el color como el símbolo mostrado por el "insertion caret" o carácter de inserción se pueden declaran conjuntamente usando la propiedad CSS acortada caret.
caret: <caret-color> <caret-shape>;
En la declaración usando la forma acortada caret el valor omitido computa como auto.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso