Caret-animation - Propriété CSS

Schéma de la syntaxe de caret-animation.

Schéma syntaxique de la propriété caret-animation.
Télécharger le schéma en SVG.

Description de la propriété caret-animation.

⚠

La propriété caret-animation est encore trop mal prise en charge par les navigateurs, en particulier par Firefox   et Safari  .

La plupart des systèmes d'exploitation font clignoter le marqueur de texte lorsque celui-ci est visible. Ne confondez pas le marqueur de texte avec le pointeur de la souris. Le marqueur de texte est celui qui clignote sur pratiquement tous les systèmes, tandis que le pointeur de la souris est celui qui bouge avec la souris.

La propriété caret-animation permet de supprimer l'animation par défaut du marqueur de texte (le clignotement).

D'autres propriétés gèrent ce fameux curseur de texte (ou le pointeur de la souris, avec cursor) :

Valeurs pour caret-animation.

• caret-animation: auto;

  Le marqueur de texte n'est pas modifie : il clignote conformément à ce que demande le système d'exploitation.

  Cliquez dans cette zone pour voir clignoter le marqueur.
• caret-animation: manual;

  Le marqueur de texte ne clignote pas.

  Cliquez dans cette zone pour constater que le marqueur ne clignote pas.

  ⚠   Firefox   et Safari   ne reconnaissent pas la propriété caret-animation. L'exemple ne fonctionnera donc pas sur ces navigateurs.

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

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de caret-animation.

L'animation de la propriété caret-animation est possible en mode discret, mais le résultat n'est pas spectaculaire du tout. Cliquez dans la zone de saisie pour visualiser le résultat.

⚠   Sur Firefox   ou Safari   bien entendu, la démo ne fonctionne pas.

Exemple interactif avec la propriété caret-animation.

Pour bien voir l'effet du simulateur, cliquez dans la zone textarea ou dans la zone de saisie de texte après avoir choisi une valeur pour caret-animation. Rappelons que caret-animation n'agit que sur le clignotement du curseur de texte, pas sur sa présence.

Compatibilité des navigateurs avec caret-animation.

1

Propriété
caret-animation

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Safari

Chrome pour Androïd

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Opéra

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété caret-animation.

• 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-animation. Introduction de la propriété caret-animation.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, concernant l'interface utilisateur.

Le module module CSS - Interface utilisateur de base regroupe toutes les propriétés qui permettent d'ajuster l'interface utilisateur (curseur de souris, couleur et forme du curseur de texte, gestion des événements souris, etc.), mais aussi les propriété de contour.

Propriétés :