La text-decoration-thicknesspropriété en CSS définit l'épaisseur du trait de la ligne de décoration utilisée sur le texte d'un élément. Les text-decoration-linebesoins de valeur à soit underline, line-throughou overlinepour refléter la propriété d' épaisseur.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntaxe
auto | from-font | | Valeurs
auto: (Par défaut) Permet au navigateur de spécifier une épaisseur appropriée pour la ligne de décoration de texte.from-font: Si la première police disponible a des métriques spécifiant une épaisseur préférée, elle utilise cette épaisseur; sinon, il se comporte comme la valeur automatique.: Toute longueur valide avec une unité spécifie l'épaisseur des lignes de décoration de texte comme une longueur fixe. Cela remplace toute information dans la police et la valeur par défaut du navigateur.percentage: Spécifie l'épaisseur des lignes de décoration de texte sous la forme d'un pourcentage de 1em dans la police de l'élément.initial: Le paramètre par défaut de la propriété qui est auto.inherit: Adopte la valeur d'épaisseur de la décoration du parent.unset: Supprime l'épaisseur actuelle de l'élément.
Démo
Modifiez la valeur de text-decoration-thicknessdans la démonstration suivante pour voir comment la propriété affecte la décoration de texte de l'élément:
C'est constant pour les descendants
Après avoir défini une décoration pour un élément, tous ses enfants auront également cette décoration. Imaginez maintenant que nous voulons changer l'épaisseur de la décoration pour l'un des enfants:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Cela ne fonctionne pas car l'épaisseur de décoration spécifiée par les éléments ancêtres ne peut pas être remplacée. Pour que cela fonctionne, une spécificité de décoration doit être définie pour l'élément lui-même:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Le pourcentage et la cascade
Pour cette propriété, une longueur héritera d'une valeur fixe et ne sera pas mise à l'échelle avec la police. D'un autre côté, un pourcentage héritera en tant que valeur relative et, par conséquent, sera mis à l'échelle avec les modifications de la police à mesure qu'il hérite.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )La démo suivante montre la comparaison entre l'utilisation de em et des valeurs de pourcentage dans le cas de l'héritage et, comme vous pouvez le voir, sur le côté gauche (dans lequel nous utilisons em) la valeur héritée est une longueur fixe. Cela signifie qu'il ne s'adapte pas au changement de police. Sur le côté droit, cependant, le texte hérite d'une valeur relative (dans ce cas 20%); donc l'épaisseur s'échelonne avec le changement de police.
Alors que le projet de travail actuel de la spécification fait référence à des valeurs en pourcentage pour text-decoration-thickness, le support réel est actuellement limité à Firefox.
Utilisation avec text-decoration
Le brouillon de travail actuel de la spécification de niveau 4 du module de décoration de texte CSS inclut text-decoration-thicknessune valeur dans la text-decorationpropriété abrégée.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Bien qu'elle text-decorationsoit bien prise en charge, la prise en charge de l'inclusion de text-decoration-thicknessest actuellement limitée à Firefox.
Prise en charge du navigateur
| Fonctionnalité | C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|---|
| Biens | Non | Non | 70 | Non | 12,1 | Non |
| Pourcentages | Non | Non | 76 | Non | Non | Non |
| Sténographie | Non | Non | 70 | Non | Non | Non |
| Fonctionnalité | Chrome Android | Android Firefox | Navigateur Android | Safari sur iOS | Opera Mini |
|---|---|---|---|---|---|
| Biens | Non | Non | Non | 12.2 | Non |
| Pourcentages | Non | Non | Non | Non | Non |
| Sténographie | Non | Non | Non | Non | Non |
Remarques
- La propriété était autrefois appelée
text-decoration-width, mais a été mise à jour dans le projet de travail 2019 de la spécification de niveau 4 du module de décoration de texte CSS. - Le navigateur doit utiliser une épaisseur minimale de 1 pixel d'appareil.