Caret - Propriété CSS

Schéma syntaxique de caret.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• color est une couleur, spécifiée dans l'une des syntaxes reconnues par CSS (voir Les couleurs).

Description.

La propriété CSS caret est une propriété résumée qui définit tous les paramètres du marqueur de texte, la couleur, la présence d'une animation, et la forme du marqueur de texte. Ce dernier est en général clignotant et apparaît lorsque une zone de saisie de texte est active.

Attention à ne pas confondre la marqueur de texte et le curseur de la souris :

caret est donc une propriété résumée qui permet de définir en une seule règle les propriétés suivantes :

• caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
• caret-animation : Cette propriété définit si le clignotement par défaut du curseur de texte doit être maintenu.
• caret-shape : Définit la forme du curseur de texte.

Vous pouvez aussi vous reporter à la propriété cursor qui s'occupe, elle, de la forme du curseur de la souris :

• cursor : Définit la forme du curseur de la souris.

Valeurs pour caret.

• caret: auto;

  La couleur, la forme du marqueur de texte et son clignotement sont déterminés par le navigateur, en fonction du contexte. La plupart du temps, la couleur est celle du texte (currentColor) et la forme est un trait clignotant (bar) en mode insertion de caractères, et un pavé (block) en mode remplacement de caractères.

• caret: bar; caret: block; caret: underscore;

  Ces trois valeurs correspondent à des formes prédéfinies pour le curseur de texte. Cliquez dans les zones de saisie ci-dessous pour visualiser ces formes de curseur.

  Cela ne fonctionnera probablement pas sur votre navigateur (pour le moment en tous cas) car la propriété est encore trop peu prise en charge.

  
  caret:bar;

  
  caret:block;

  
  caret:underscore;
• caret: manual;

  La valeur manual désactive le clignotement par défaut du marqueur de texte.

• caret: red bar;

  Cette syntaxe indique que le marqueur de texte doit avoir la forme d'une mince barre verticale rouge.

  Comme toutes les propriété résumée, caret initialise les trois valeurs même si une seule est précisée. Par exemple, la syntaxe caret:bar; définit la forme du marqueur, mais rétablit également le clignotement et la couleur du marqueur à currentColor qui sont les valeurs initiales.

• caret: initial; (auto) caret: inherit; caret: revert; caret: revertLayer; caret: unset;

  caret-color: initial; (auto) caret-color: inherit; caret-color: revert; caret-color: revertLayer; caret-color: unset;

  caret-animation: initial; (auto) caret-animation: inherit; caret-animation: revert; caret-animation: revertLayer; caret-animation: unset;

  caret-shape: initial; (auto) caret-shape: inherit; caret-shape: revert; caret-shape: revertLayer; caret-shape: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété caret.

L'animation de la propriété caret est possible, mais d'un intérêt limité. Reportez vous aux propriétés détaillées pour des exemples.

Prise en charge de caret par les navigateurs.

La propriété caret est encore mal prise en charge. Tant que les navigateurs ne reconnaîtrons pas caret-shape et caret-animation la prise en charge de la propriété résumée sera défaillante (2026).

Historique de la propriété caret.

• Module CSS - Interface utilisateur de base - Niveau 4

  Ce niveau 4 de la spécification reprend les définitions déjà établies au niveau 3. Il apporte également quelques ajouts : la gestion du marqueur de texte est plus fine, plusieurs propriétés concernent le pointeur de souris, etc.

  Concernant caret. Ajout d'une propriété résumée pour choisir en une seule écriture la couleur du marqueur de texte, la présence du clignotement et la forme du marqueur.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de l'interface utilisateur.

Les possibilités de personnalisation ou de stylisation de l'interface utilisateur (UI) sont décrites dans la spécification module CSS - Interface utilisateur de base du W3C. Voici les principales propriétés qui agissent sur l'interface utilisateur :

Propriétés :