caret
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété raccourcie CSS caret définit l'apparence et le comportement du curseur d'insertion en une seule déclaration.
Exemple interactif
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">Modifier le champ de texte :</label>
<input id="example-element" type="text" value="Exemple de texte" />
</div>
</section>
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}
Propriétés constitutives
Cette propriété est une abréviation pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs individuelles */
caret: red; /* seulement caret-color */
caret: block; /* seulement caret-shape */
caret: manual; /* seulement caret-animation */
/* Deux valeurs */
caret: red manual; /* caret-color + caret-animation */
caret: block auto; /* caret-shape + caret-animation */
caret: underscore orange; /* caret-shape + caret-color */
/* Trois valeurs */
caret: bar manual red; /* caret-shape + caret-animation + caret-color */
caret: block auto #00ff00; /* caret-shape + caret-animation + caret-color */
/* Valeurs globales */
caret: inherit;
caret: initial;
caret: revert;
caret: revert-layer;
caret: unset;
La propriété caret est définie avec une, deux ou trois valeurs issues des propriétés constitutives. Les valeurs peuvent être indiquées dans n'importe quel ordre, et les valeurs omises sont définies à leur valeur initiale.
Valeurs
caret-color-
Définit la couleur du curseur.
caret-animation-
Contrôle si le curseur clignote.
caret-shape-
Définit la forme visuelle du curseur.
Description
La propriété abrégée caret permet de définir plusieurs propriétés du curseur en une seule déclaration, ce qui facilite la personnalisation complète de l'apparence et du comportement du curseur d'insertion.
Résolution des valeurs
Lorsque des valeurs sont omises dans la propriété abrégée, elles sont réinitialisées à leur valeur initiale :
caret-color:auto(équivaut àcurrentColor).caret-animation:auto(le curseur clignote).caret-shape:auto(forme déterminée par le navigateur).
Indépendance de l'ordre
Contrairement à certaines propriétés abrégées CSS, la propriété caret accepte les valeurs dans n'importe quel ordre. Le navigateur détermine à quelle propriété chaque valeur s'applique en fonction de son type :
- Les valeurs
<color>s'appliquent àcaret-color. - Les mots-clés
auto/manuals'appliquent àcaret-animation. - Les mots-clés de forme (
bar,block,underscore) s'appliquent àcaret-shape.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | Text or elements that accept text input |
| Héritée | oui |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
caret =
<'caret-color'> ||
<'caret-animation'> ||
<'caret-shape'>
<caret-color> =
auto |
<color>
<caret-animation> =
auto |
manual
<caret-shape> =
auto |
bar |
block |
underscore
Exemples
Terminal rétro avec curseur animé
Cet exemple crée une interface de terminal vintage en utilisant la propriété abrégée caret pour combiner plusieurs propriétés du curseur, montrant ainsi comment elle remplace les anciennes techniques basées sur les bordures.
Le principal avantage de la propriété abrégée caret est de combiner plusieurs propriétés en une seule déclaration. Ici, nous définissons la forme sur block, désactivons le clignotement par défaut et définissons la couleur sur green, le tout en une seule ligne.
HTML
<label for="terminal">Entrez une commande</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;
}
}
Résultat
Spécifications
Compatibilité des navigateurs
Voir aussi
- Les propriétés
caret-color,caret-animation,caret-shape - Le module de l'interface utilisateur de base CSS