Text-decoration-color - Propriété CSS

text-decoration-color

Résumé des caractéristiques de la propriété `text-decoration-color`

Description rapide

Définit la couleur du trait de décoration (souligné, rayure...).

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

currentcolor | transparent

Pourcentages

Ne s'appliquent pas.

Valeur initiale

currentcolor

Héritée par défaut

Non. ⁽¹⁾

Type d'animation

Computed value : lors d'une animation, la propriété text-decoration-color passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Décoration du texte

Références (W3C)

🡇

🡅

CSS Text Decoration Module Level 4

Statut du document: WD (document de travail)

CSS Text Decoration Module Level 3

Statut du document: CR (document candidat à la recommandation)

(1) Propagation suivant un autre mécanisme, différent de l'héritage classique.
Voir à ce sujet le paragraphe sur le mécanise de propagation.

Syntaxe de `text-decoration-color` (schéma).

Schéma syntaxique de la propriété text-decoration-color
Description des valeurs

Description des termes utilisés sur le schéma :

#xxxxxx est le code hexadécimal d'une couleur, sur 3, 6 ou 8 digits.
name est le nom d'une couleur : voir Nuancier.
color est une couleur, spécifiée par l'une des fonctions de couleur reconnues par CSS : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété `text-decoration-color`.

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.

Parent

Enfant 1

Enfant 2

Enfant 3

Valeurs 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).

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.

Possibilité d'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.

Démonstration

Simulateur avec la propriété `text-decoration-color`.

text-decoration-color :

currentcolor

transparent

Voyez ce koala fou qui mange des journaux et des photos dans un bungalow.

Support de `text-decoration-color`.

La propriété text-decoration-color est correctement traitée par tous les navigateurs actuels.

Colonne 1

Support de la propriété text-decoration-color pour gérer la couleur des traits de décoration.

Propriété
text-decoration-color

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Caniuse

Évolution de la propriété `text-decoration-color`.

Module CSS - Décoration du texte - Niveau 3

Première présentation de la propriété text-decoration-color.

27 Janvier 1999
Document de travail.
01 Août 2013
Candidat à la recommandation.
Module CSS - Décoration du texte - Niveau 4

Pas de changement concernant la propriété text-decoration-color.

13 Mars 2018
Document de travail.

Voir aussi, au sujet des décorations de texte.

Le module de spécification CSS Text Decoration Module regroupe les attributs de décoration de texte : mise en emphase, ombrage, soulignement, etc. La propriété text-decoration-color est décrite dans ce module, ainsi que les propriétés suivantes :