Vaktmester - CSS-triks | CSS-almanakk 2025

careti CSS er en stenografisk eiendom som kombinerer caret-colorog caret-shapeegenskaper i en enkelt erklæring. Så vi får skrive dette:

.element ( caret: #ff7a18 underscore; )

... som ligner på å skrive dette:

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

Det er en fin snarvei når du vil endre farge og form på en vaktmester. Og hva er en vakt, spør du? Du er sannsynligvis mest kjent når du skriver inn i et redigerbart element, for eksempel tekstinntasting eller tekstområde. Jeg skriver dette innlegget i WordPress, som i utgangspunktet er et gigantisk formfelt, og dette er oppslaget jeg ser blinkende på meg:

Så ved å sette caret-colortil, si #ff7a18og det caret-shapetil noe sånt underscore, kan vi forvente å se noe som dette:

Syntaks

caret: ||

Syntaksen kan ta en eller annen verdi ... eller begge deler! Hvis en verdi er tom, brukes den opprinnelige verdien, som er autofor begge bestanddelene.

Første: auto
Gjelder: elementer som godtar innspill
Arvet: ja
Prosentandeler: ikke relevant
Beregnet verdi: se individuelle egenskaper
Animasjonstype: ikke animerbar

Verdier

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;

Nettleserstøtte

Ingen for øyeblikket. Egenskapen er opprinnelig definert i spesifikasjonen CSS Basic User Interface Module Level 4, som for øyeblikket er i Editor's Draft. Det betyr at det fortsatt er rom for endringer som skal gjøres mellom nå og når det blir en anbefaling for nettlesere å implementere.

I mellomtiden kan vi sortere "falske" careteiendommen med en annen CSS-magi.