Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.
Statut
Standard
Valeurs prédéfinies
currentcolor | transparent
Pourcentages
Ne s'appliquent pas.
Valeur initiale
currentcolor
Héritée par défaut
NON (propagation suivant un autre mécanisme).
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)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

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.

Parent
Enfant 1
Enfant 2
Enfant 3

Syntaxes pour text-decoration-color.

  • text-decoration-color: green;

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

  • text-decoration-color: initial; text-decoration-color: inherit; text-decoration-color: revert; text-decoration-color: revert-layer; text-decoration-color: unset;

    La valeur initiale est : currentcolor.

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.

text-decoration-color :

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.

1
text-decoration-color
Estimation de la prise en charge en pourcentage du parc actuel.
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

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.

Propriétés.

Choisit le soulignement, le surlignement ou la rayure du texte.
Type de décoration : souligné, barré, etc.
Propriété raccourcie définissant certaines particularités relatives aux décorations.
Définit comment les décorations héritées des éléments parents doivent être appliquées.
Définit si les lignes de décoration (essentiellement le souligné) s'interrompent au niveau des jambages.
Définit comment les décorations de l'élément lui même (et non pas celles des éléments parents) doivent être appliquées.
Définit si les décoration du ou des éléments parents doivent être appliquées à cet élément.
Définit si les lignes de décoration (soulignement, rayure...) concernent les espaces.
Type de trait pour la décoration : plein, pointillé, etc.
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
Mise en exergue du texte.
Définit la couleur des caractères de mise en exergue.
Position des caractères de mise en exergue.
Définit si les mises en exergue doivent s'interrompre sur les espaces, les signes de ponctuation, etc.
Style de mise en exergue.
Définit tous les paramètres d'une ombre appliquée au texte.
Définit la position du trait de soulignement, par rapport à la position de base.
Définit l'emplacement des traits de soulignement.