Vaktmästare - CSS-tricks

Innehållsförteckning

careti CSS är en förkortning egenskap som kombinerar caret-coloroch caret-shapeegenskaper till en enda förklaring. Så vi får skriva detta:

.element ( caret: #ff7a18 underscore; )

... som liknar att skriva detta:

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

Det är en trevlig genväg när du vill ändra färg och form på en vakt. Och vad är en vaktmästare, frågar du? Du är förmodligen mest bekant när du skriver en när du skriver in i ett redigerbart element, till exempel textinmatning eller textområde. Jag skriver det här inlägget i WordPress, som i grunden är ett jätteformatfält, och det här är vagnen som jag ser blinka på mig:

Så genom att ställa in caret-colortill, säg #ff7a18och caret-shapetill något liknande underscore, kan vi förvänta oss att se något så här:

Syntax

caret: ||

Syntaxen kan ta ett eller annat värde ... eller båda! Om ett värde är tomt används dess ursprungliga värde, vilket är autoför båda ingående egenskaper.

Första: auto
Gäller för: element som accepterar inmatning
Ärvt: ja
Procentandelar: ej tillämpligt
Beräknat värde: se enskilda egenskaper
Animationstyp: inte animerbar

Värden

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;

Webbläsarstöd

Ingen för tillfället. Egenskapen definierades ursprungligen i specifikationen för CSS Basic User Interface Module Level 4, som för närvarande finns i Editor's Draft. Det betyder att det fortfarande finns utrymme för ändringar som ska göras från och med nu och när det blir en rekommendation för webbläsare att implementera.

Under tiden kan vi sortera "falska" caretfastigheten med någon annan CSS-magi.