Caret-animation - Propriété CSS
Résumé des caractéristiques de la propriété caret-animation
auto | manualautocaret-animation passe d'une valeur à l'autre sans transition.Single : valeur unique (l'ordre n'intervient pas).Schéma de la syntaxe de caret-animation.
Description de la propriété caret-animation.
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.
- caret-animation: manual;
Le marqueur de texte ne clignote pas. On peut donc laisser le marqueur fixe, ou appliquer une animation sur une caractéristique telle que la couleur du marqueur ou sa forme.
⚠ 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: revert-layer; caret-animation: revert-rule; caret-animation: unset;Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,revert-rule,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.
Accéder à la propriété caret-animation par programme.
Avec Javascript, modifier la valeur de caret-animation.
En Javascript, voici comment modifier la valeur de caret-animation, avec deux syntaxes possibles.
La première est une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots).
et la deuxièmes est une syntaxe avec une notation en camel-case plus courante en Javascript (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['caret-animation'] = 'manual';
// ou
let el = document.getElementById('id');
el.style.caretAnimation = 'manual';
Avec Javascript, lire la valeur de caret-animation.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, par exemple avec le code précédent,
et pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['caret-animation'];
// ou
let el = document.getElementById('id');
let value = el.style.caretAnimation;
Avec Javascript, lire la valeur calculée de caret-animation.
La valeur calculée est celle qui est affectée à l'élément, ou celle qui résulte de la cascade des héritages, ou encore c'est la valeur initiale
de la propriété (auto dans le cas de caret-animation).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('caret-animation');
Avec JQuery, modifier la valeur de caret-animation.
Les syntaxes de JQuery sont toujours plus courtes que celles de Javascript.
$('#id').css('caret-animation', 'manual');
// ou
$('#id').css('caretAnimation', 'manual');
Avec JQuery, lire la valeur calculée de caret-animation.
let value = $('#id').css('caret-animation');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS : ajout d'une feuille de styles à la page, ajout ou suppression de classes, etc.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété caret-animation et affichent ensuite soit la valeur telle qu'elle a été
appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de caret-animation.
Pour cette propriété, la valeur calculée est identique à la valeur affectée sauf en cas de tentative d'affectation d'une valeur incorrecte.
⚠ Bien entendu sur les navigateurs qui ne reconnaissent pas la propriété (comme Firefox ou Safari ) la valeur
est toujours incorrecte.
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.
La propriété caret-animation est encore trop mal gérée par les navigateurs. Elle peut être utilisée mais uniquement dans des cas non critiques.
caret-animationNavigateurs 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
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.
Concernantcaret-animationIntroduction de la propriétécaret-animation.
22 Septembre 2015Document 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 :
interest-delay-start et interest-delay-end.