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

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

Description.

La propriété text-decoration-style définit le type de trait à utiliser pour la décoration du texte : trait plein, pointillé, etc.

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

Syntaxes pour text-decoration-style.

text-decoration-style:
 solid solid double double dotted dotted dashed dashed wavy wavy
;
  • 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é
  • text-decoration-style: initial; text-decoration-style: inherit; text-decoration-style: revert; text-decoration-style: revert-layer; text-decoration-style: unset;

    La valeur initiale est : solid.

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.

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

Prise en charge par les navigateurs (compatibilité).

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

1
text-decoration-style
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-style.

Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration-style 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.
Définit la couleur du trait de décoration.
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.
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.