Caret - Trucos CSS | Almanaque CSS 2024

careten CSS es una propiedad abreviada que combina las propiedades caret-colory caret-shapeen una sola declaración. Entonces, podemos escribir esto:

.element ( caret: #ff7a18 underscore; )

... que es similar a escribir esto:

.element ( caret-color: #ff7a18; caret-shape: underscore; )

Es un buen atajo cuando quieres cambiar el color y la forma de un símbolo de intercalación. ¿Y qué es una intercalación, preguntas? Probablemente le resulte más familiar ver uno al escribir en un elemento editable, como una entrada de texto o un área de texto. Estoy escribiendo esta publicación en WordPress, que es básicamente un campo de formulario gigante, y este es el signo de intercalación que veo parpadeando:

Entonces, al establecer caret-colorto, say, #ff7a18y caret-shapeto algo como underscore, podríamos esperar ver algo como esto:

Sintaxis

caret: ||

La sintaxis puede tomar un valor u otro ... ¡o ambos! Si un valor está en blanco, entonces se usa su valor inicial, que es autopara ambas propiedades constituyentes.

Inicial: auto
Se aplica a: elementos que aceptan entrada
Heredado: si
Porcentajes: n / a
Valor calculado: ver propiedades individuales
Tipo de animación: no animable

Valores

caret: #ff7a18 underscore; caret: yellow block; caret: hsla(50, 100%, 50%, 0.75) bar; /* Keyword color values */ caret: auto; caret: transparent block; caret: currentcolor underscore; /* Global values */ caret: inherit; caret: initial; caret: unset;

Soporte de navegador

Ninguno por el momento. La propiedad se define inicialmente en la especificación CSS Basic User Interface Module Level 4, que actualmente se encuentra en el Borrador del editor. Eso significa que todavía hay espacio para realizar cambios entre ahora y cuando se convierta en una recomendación para que los navegadores la implementen.

Mientras tanto, podemos "falsificar" la caretpropiedad con alguna otra magia CSS.