caret
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die caret Shorthand CSS Eigenschaft legt das Erscheinungsbild und Verhalten des Einfüge-Carets in einer einzigen Deklaration fest.
Probieren Sie es aus
caret: red;
caret: block manual;
caret: underscore auto green;
caret: bar manual orange;
<section class="default-example container" id="default-example">
<div>
<label for="example-element">Edit text field:</label>
<input id="example-element" type="text" value="Sample text" />
</div>
</section>
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}
Zuordnende Eigenschaften
Diese Eigenschaft ist ein Shorthand für die folgenden CSS-Eigenschaften:
Syntax
/* Individual values */
caret: red; /* caret-color only */
caret: block; /* caret-shape only */
caret: manual; /* caret-animation only */
/* Two values */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */
/* Three values */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */
/* Global values */
caret: inherit;
caret: initial;
caret: revert;
caret: revert-layer;
caret: unset;
Die Eigenschaft caret wird als ein, zwei oder drei Werte aus den zugehörigen Eigenschaften angegeben. Werte können in beliebiger Reihenfolge angegeben werden, und ausgelassene Werte werden auf ihre Anfangswerte gesetzt.
Werte
caret-color-
Legt die Farbe des Carets fest.
caret-animation-
Steuert, ob das Caret blinkt.
caret-shape-
Legt die visuelle Form des Carets fest.
Beschreibung
Das caret Shorthand ermöglicht es Ihnen, mehrere Caret-Eigenschaften in einer einzigen Deklaration festzulegen, was es bequem macht, das vollständige Erscheinungsbild und Verhalten des Einfüge-Carets zu gestalten.
Werteauflösung
Wenn Werte im Shorthand ausgelassen werden, werden sie auf ihre Anfangswerte zurückgesetzt:
caret-color:auto(löst sich zucurrentColorauf).caret-animation:auto(Caret blinkt).caret-shape:auto(browserbestimmte Form).
Reihenfolgeunabhängigkeit
Im Gegensatz zu einigen CSS-Shorthands akzeptiert die caret Eigenschaft Werte in beliebiger Reihenfolge. Der Browser bestimmt, welcher Wert auf welche Eigenschaft angewendet wird, basierend auf dem Werttyp:
<color>Werte werden aufcaret-colorangewendet.auto/manualSchlüsselwörter gelten fürcaret-animation.- Formschlüsselwörter (
bar,block,underscore) gelten fürcaret-shape.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | elementsThatAcceptInput |
| Vererbt | Ja |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color>
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
Beispiele
Retro-Terminal mit animiertem Caret
Dieses Beispiel erstellt eine Vintage-Terminal-Oberfläche mit dem caret Shorthand, um mehrere Caret-Eigenschaften zu kombinieren, und zeigt, wie es ältere, auf Rand basierende Techniken ersetzt.
Der Hauptvorteil des caret Shorthands ist die Kombination mehrerer Eigenschaften in einer Deklaration. Hier setzen wir die Form auf block, deaktivieren das standardmäßige Blinken und setzen die Farbe auf grün, alles in einer einzigen Zeile.
HTML
<label for="terminal">Enter a command</label>
<div class="old-screen">
<span>></span>
<textarea id="terminal" class="terminal-input"></textarea>
</div>
CSS
.terminal-input {
caret: block manual green;
animation: vintage-caret 2s infinite;
}
@keyframes vintage-caret {
0%,
50% {
caret-color: #00ad00;
}
75%,
100% {
caret-color: transparent;
}
}