Dakje - CSS-trucs | CSS Almanac 2025

caretin CSS is een steno-eigenschap die de caret-coloren caret-shapeeigenschappen combineert in een enkele declaratie. Dus we mogen dit schrijven:

.element ( caret: #ff7a18 underscore; )

... wat lijkt op het schrijven van dit:

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

Dat is een leuke sneltoets als je de kleur en vorm van een dakje wilt veranderen. En wat is een dakje, vraag je? U bent waarschijnlijk het meest vertrouwd om er een te zien wanneer u in een bewerkbaar element typt, zoals een tekstinvoer of een tekstgebied. Ik typ dit bericht in WordPress, wat eigenlijk één gigantisch formulierveld is, en dit is de cursor die ik naar me zie knipperen:

Dus door de caret-colorto, laten we zeggen, #ff7a18en de caret-shapeto iets dergelijks in te stellen underscore, zouden we zoiets als dit kunnen verwachten:

Syntaxis

caret: ||

De syntaxis kan een of andere waarde aannemen ... of beide! Als een waarde leeg is, wordt de oorspronkelijke waarde gebruikt, die autovoor beide samenstellende eigenschappen geldt.

Eerste: auto
Is van toepassing op: elementen die invoer accepteren
Overgenomen: ja
Percentages: nvt
Berekende waarde: zie individuele eigenschappen
Animatietype: niet animeerbaar

Waarden

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;

Browser-ondersteuning

Momenteel geen. De eigenschap is aanvankelijk gedefinieerd in de CSS Basic User Interface Module Level 4-specificatie, die momenteel in Editor's Draft staat. Dat betekent dat er nog ruimte is voor wijzigingen tussen nu en wanneer het een aanbeveling wordt voor browsers om te implementeren.

In de tussentijd kunnen we de careteigenschap sorteren met wat andere CSS-magie.