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-thickness - Propriété CSS

text-decoration-thickness

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

Description rapide
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
Statut
Standard
Valeurs prédéfinies
auto | from-font
Pourcentages
Calculés par rapport à la valeur 1em (taille des caractères courante).
Valeur initiale
auto
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-thickness 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)

Description.

La propriété text-decoration-thickness définit l'épaisseur du trait de décoration du texte. Le trait de décoration pouvant être un soulignement, un surlignement ou une barre de rayure :

Souligné   Surligné   Barré

Pour ajouter une décoration à un texte, voyez la propriété résumée text-decoration.

Mécanisme de propagation.

Attention au mécanisme de propagation des décorations, différent du mécanisme d'héritage classique. text-decoration-thickness ne s'rapplique que aux décorations définies sur l'élément lui-même, et non pas sur celles qui sont définies sur un élément parent.
Sur l'exemple ci-dessous, le parent définit un soulignement en trait de 2 pixels d'épaisseur. Le fait de définir une autre épaisseur sur l'élément Enfant1 ne modifie pas l'épaisseur du soulignement récupéré du parent.

Le deuxième enfant redéfinit aussi bien text-decoration-line que text-decoration-thickness, et dans ce cas on a l'impression que le mécanisme d'héritage fonctionne, mais en fait un deuxième trait de soulignement a été ajouté par dessus celui du parent.

En résumé, une décoration doit être définie entièrement sur le même élément, il ne sera pas possible de la modifier sur un des éléments descendants. La nouvelle propriété text-decoration-skip permet d'assouplir ce fonctionnement.

Parent
Enfant 1
Enfant 2

Syntaxes pour text-decoration-thickness.

d est une dimension.
% est un pourcentage qui doit se résoudre en une dimension.

text-decoration-thickness:
Schéma syntaxique de la propriété CSS text-decoration-thicknessSyntaxe de la propriété text-decoration-thickness et des différentes valeurs qu'elle accepte : auto, from-font.... auto auto from-font from-font d d % %
;
  • text-decoration-thickness: auto;

    L'épaisseur des traits de décoration est choisie en fonction de la taille de la police.

  • text-decoration-thickness: from-font;

    Certaines polices de caractères Open Type comportent une indication sur l'épaisseur optimale des traits de décoration. Le navigateur utilise alors cette information, sinon from-font est équivalent à auto.

  • text-decoration-thickness: 2px;

    Une valeur positive, suivie d'une unité de dimension (voir les unités CSS de dimension). La valeur 0 est acceptée mais traitée comme 1 pixel.

    S'il s'agit d'un pourcentage, il est calculé par rapport à la valeur 1em, c'est à dire par rapport à la taille des caractères. Si le calcul donne une valeur inférieure à 1 pixel, elle est arrondie à 1 pixel, de façon à ce que le trait soit toujours visible.
    Attention ! C'est la valeur en pourcentage qui est transmise aux éléments enfants, et non pas la valeur calculée comme c'est le cas avec d'autres propriétés. Il en résulte que l'épaisseur du trait de décoration est recalculée en fonction de la taille des caractères de chacun des éléments enfants. Voir l'exemple ci-dessous :

    Texte du bloc parent
    Texte du bloc enfant
  • text-decoration-thickness: initial; text-decoration-thickness: inherit; text-decoration-thickness: revert; text-decoration-thickness: revert-layer; text-decoration-thickness: unset;

    La valeur initiale est : auto.

Animation de la propriété text-decoration-thickness.

L'exemple d'animation ci-dessous montre l'aspect d'un trait de rayure qui évolue entre 1% et 100%. Bien sûr au final, le texte est entièrement caché.

Démonstration

Simulateur.

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

Prise en charge par les navigateurs (compatibilité).

La plupart des navigateurs actuels traitent correctement la propriété text-decoration-thickness, compris avec des valeurs exprimées en pourcentages. Par contre, la prise en charge des valeurs exprimées en pourcentages laisse encore à désirer.

Colonne 1
Support par les navigateurs de la propriété text-decoration-thickness.
Colonne 2
Traitement de la valeur exprimée en pourcentages dans la syntaxe de text-decoration-thickness.
1
text-decoration-thickness
2
Percentages
Estimation de la prise en charge en pourcentage du parc actuel.
91%
77%

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

Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration-thickness 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.
Type de trait pour la décoration : plein, pointillé, etc.
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.