Text-decoration-color - Propriété CSS
Résumé des caractéristiques de la propriété text-decoration-color
currentcolor | transparentcurrentcolortext-decoration-color passe progressivement d'une valeur à une autre.Schéma syntaxique de text-decoration-color.
Description des termes utilisés sur le schéma :
Description.
La propriété text-decoration-color définit la couleur de la décoration qu'il est possible d'ajouter à un texte.
Le terme décoration désigne un soulignement, un surlignement ou une rayure du texte.
Texte souligné Texte surligné Texte rayé
Lorsque plusieurs traits de décoration sont ajoutés à un texte par une même instruction , il n'est pas possible de leur attribuer des couleurs différentes. Il existe cependant une astuce (voir ci-dessous le paragraphe sur l'héritage).
Texte à la fois souligné et surligné
Pour une présentation générale de la notion de décoration, reportez-vous à la propriété résumée text-decoration.
Particularité concernant l'héritage de text-decoration-color.
Comme les autres propriétés relatives aux décorations, text-decoration-color présente un mécanisme d'héritage particulier. Reportez-vous à la page Le mécanisme de propagation des décorations
pour une présentation complète de cette particularité.
Nous allons nous contenter ici de présenter un exemple de ce mécanisme d'héritage inhabituel.
L'élément parent ci-dessous définit un soulignement de couleur rouge. Le premier enfant hérite de ce soulignement, et jusque là, tout parait habituel.
Mais le deuxième enfant modifie la couleur du soulignement (voyez le CSS). Or on constate sur le résultat que la couleur n'a pas changé.
L'enfant numéro 3 ajoute un surlignement et le définit en bleu. Dans ce cas ça marche parce que cette décoration précise (le surlignement) n'a pas encore
été définie par un parent.
En résumé, lorsque une décoration est définie, les éléments descendants ne peuvent pas la modifier. Ce fonctionnement particulier peut être gênant. La nouvelle
propriété text-decoration-skip devrait permettre de compenser ce problème.
Syntaxes pour text-decoration-color.
- text-decoration-color: #00ff00; text-decoration-color: green; text-decoration-color: rgb(0, 118, 14); Etc.
Les traits de décoration seront dans la couleur indiquée. Toutes les syntaxes reconnues par CSS pour définir une couleur sont acceptées (voir aussi les couleurs CSS).
Valeurs standards acceptées par toutes les propriétés:
text-decoration-color: initial (currentcolor)
text-decoration-color: inherit
text-decoration-color: revert
text-decoration-color: revertLayer
text-decoration-color: unset
Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.
Animation de la propriété text-decoration-color.
Aucune particularité à signaler au sujet de l'animation de la propriété text-decoration-color.
Sur cet exemple on passe de la couleur transparente à la couleur bleue.
Simulateur.
Voyez ce koala fou qui mange des journaux et des photos dans un bungalow.
Voyez ce koala fou qui mange des journaux et des photos dans un bungalow.
Prise en charge de text-decoration-color par les navigateurs (compatibilité).
La propriété text-decoration-color est correctement traitée par tous les navigateurs actuels.
text-decoration-colorNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que text-decoration-color.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration-color fait partie du module CSS - Décoration du texte (CSS Text Decoration Module). Les définitions suivantes sont également décrites dans ce même module.