Text-decoration-thickness - Propriété CSS
Résumé des caractéristiques de la propriété text-decoration-thickness
auto | from-font1em (taille des caractères courante).autotext-decoration-thickness passe progressivement d'une valeur à une autre.Schéma syntaxique de text-decoration-thickness.
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
Description des termes utilisés sur le schéma :
lengthest une valeur numérique, positive ou nulle, suivie d'une unité de dimension.%est un pourcentage calculé par rapport à la taille des caractères.
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.
Syntaxes pour text-decoration-thickness.
- 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-fontest équivalent àauto. - text-decoration-thickness: 2px;
Une valeur positive, suivie d'une unité de dimension (voir les unités CSS de dimension). La valeur
0est 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 parentTexte du bloc enfant
Valeurs universelles :
text-decoration-thickness: initial (auto)
text-decoration-thickness: inherit
text-decoration-thickness: revert
text-decoration-thickness: revertLayer
text-decoration-thickness: unset
Liens vers la présentation de ces valeurs : initial, inherit, revert, revert-layer, unset.
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é.
Simulateur.
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.
text-decoration-thickness.
text-decoration-thickness.
text-decoration-thicknesspourcentages
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
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.