Text-decoration-style - Propriété CSS

text-decoration-style

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

Description rapide

Type de trait pour la décoration : plein, pointillé, etc.

Statut

Standard

Utilisable sur

HTML, SVG

Valeurs prédéfinies

solid | dashed | dotted | double | wavy

Pourcentages

Ne s'appliquent pas.

Valeur initiale

solid

Héritée par défaut

Non. ⁽¹⁾

Type d'animation

Discrète : lors d'une animation, la propriété text-decoration-style passe d'une valeur à l'autre sans transition.

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) Autre mécanisme de propagation, différent de l'héritage classique.
Voir à ce sujet le paragraphe sur l'héritage.

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

Schéma syntaxique de la propriété text-decoration-style
Les liens du schéma donnent accès à des exemples

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

La propriété text-decoration-style définit le type de trait à utiliser pour la décoration du texte : trait plein, pointillé, etc.
Pensez à définir également la propriété text-decoration-line sur overline, underline ou line-through.

Rappel : la décoration est un trait, placé au dessous du texte (souligné), au dessus (surligné) ou utilisé pour rayer le texte.

Pour des explications plus détaillées et des exemples sur les possibilités des décorations, reportez-vous à la propriété résumée text-decoration.

Particularité concernant l'héritage.

L'héritage, ou plutôt le mode de propagation de text-decoration-style est très particulier : les décorations définies sur le parent ne sont pas forcément transmises aux éléments enfants : cela dépend du type d'affichage de ces derniers :
Les décorations sont transmises pour les types d'affichage non composés : block, inline, grid, etc.
Les décorations ne sont pas transmises aux descendants dont le type d'affichage est composé : inline-block, inline-table, etc.

De plus, lorsque la valeur de text-decoration-style est transmise, l'élément enfant ne peut pas la modifier : c'est un peu comme un héritage forcé. L'exemple ci-dessous illustre ce mécanisme. L'élément parent a reçu comme décoration un souligné en double trait.
Le premier enfant hérite de cette décoration. Jusque là tout est assez normal.
Le deuxième enfant redéfinit une nouvelle valeur pour text-decoration-style, comme vous pourrez le voir en affichant les styles CSS. Pourtant on constate que sa décoration est toujours un trait double.
Enfin l'enfant numéro 3 ajoute une nouvelle décoration au dessus du texte (overline), et cette fois-ci, le style demandé est pris en compte pour cette nouvelle décoration.

Tout se passe comme s'il n'était pas possible de modifier une décoration une fois qu'elle a été définie sur un élément parent. Pour d'autres exemples de cette particularité, reportez-vous à la page Le mécanisme de propagation des décorations.

Parent

Enfant 1

Enfant 2

Enfant 3

Valeurs pour `text-decoration-style`..

text-decoration-style: solid;

Le souligné, le surligné ou la rayure sont représentés par un trait plein. C'est la valeur par défaut.

Souligné Surligné Rayé
text-decoration-style: double;

Le souligné et autres décorations sont représentés par un trait double.

Souligné Surligné Rayé
text-decoration-style: dotted;

Les décorations sont représentées par un trait pointillé.

Souligné Surligné Rayé
text-decoration-style: dashed;

Les traits de décorations sont représentés par une succession de tirets.

Souligné Surligné Rayé
text-decoration-style: wavy;

Les décorations sont représentées par un trait ondulé.

Souligné Surligné Rayé

Valeurs standards acceptées par toutes les propriétés:


text-decoration-style: initial  (solid)
text-decoration-style: inherit
text-decoration-style: revert
text-decoration-style: revertLayer
text-decoration-style: 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-style`..

L'animation ci-dessous explore toutes les valeurs pour text-decoration-style.

Animation de text-decoration-style

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

Souligné Surligné Rayé

Support de `text-decoration-style`.

Tous les navigateurs actuels reconnaissent et traitent correctement la propriété text-decoration-style.

Colonne 1

Support de la propriété text-decoration-style pour définir la nature du trait de décoration (double, en pointillé, etc.).

Propriétés
text-decoration-style

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-style`.

Module CSS - Décoration du texte - Niveau 3

Première définition de la propriété text-decoration-style.

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

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-style est décrite dans ce module, ainsi que les propriétés suivantes :