text-decoration - Propriété CSS
Résumé des caractéristiques de la propriété text-decoration
none
| underline
| overline
| line-through
| blink
| spelling-error
| grammar-error
Description.
La propriété text-decoration
définit les attributs typographiques de décoration, comme le souligné, le barré, etc.
Ces attributs peuvent être utilisés à des fins décoratives, mais aussi pour mettre une partie du texte en exergue, pour faire ressortir les modifications apportées au texte (suppression ou insertion), ou pour signaler les fautes d'orthographe, de grammaire, etc.
Exemple des principales décorations :
text-decoration
est une propriété résumée qui reprend les valeurs des propriétés suivantes :
text-decoration-line
: type de décoration : souligné, barré, etc.text-decoration-thickness
: épaisseur de trait de décoration.text-decoration-style
: type de trait pour la décoration : plein, pointillé, etc.text-decoration-color
: couleur du trait de décoration.
Le fait d'ajouter une décoration à un texte ne change pas l'interligne, ni la hauteur des lignes.
Cela peut nuire à la lisibilité avec certains type de traits comme wavy
ou double
.
A quoi s'appliquent les décorations ?
Les décorations sont appliquées essentiellement aux textes, elles ne le sont pas aux images, ni aux champs de formulaire
bien que ces éléments soient du type inline
.
Exemple : Bien que le texte de cet élément soit souligne, l'image ci-contre
n'est pas soulignée.
Les décorations sur une structure ruby.
Les décorations appliquées à un container Ruby (balise ruby) ne sont propagées que au texte de base de la structure Ruby, c'est à dire la balise rb. Néanmoins il est possible d'ajouter une décoration à l'annotation d'une structure Ruby, en l'appliquant directement à la balise rt.
Évolutions de la norme.
La possibilité de spécifier l'épaisseur du trait a été ajoutée dans le niveau 4 du module Texte décoration
.
Le niveau 3 ne prévoyait que 3 valeurs.
La norme CSS 2.2
donnait déjà une définition pour text-decoration
mais la propriété n'était alors pas définie comme une propriété résumée :
elle acceptait une seule valeur, correspondant à text-decoration-line
.
Cette syntaxe avec une seule valeur est compatible avec la nouvelle norme CSS 3
, mais n'oubliez pas que,
comme pour toutes les propriétés raccourcies, les valeurs non présentes sont mises à leur valeur initiale :
text-decoration:underline;
⇔
text-decoration-line:underline;
text-decoration-thickness:auto;
text-decoration-style:solid;
text-decoration-color:currentcolor;
Autre évolution : la valeur blink
n'est plus reconnue par aucun navigateur. Elle produisait un clignotement du texte.
Un clignotement étant quelque chose de très différent d'un soulignement, il n'y a pas de raison que ce soit la même propriété
qui gère ces deux fonctionnalités. De plus le clignotement est considéré comme intrusif.
Il est toujours possible de faire clignoter un contenu, mais en utilisant une animation sur la visibilité ou l'opacité de l'élément.
Quelques cas particuliers.
Voici quelques cas de figure complexes pour le positionnement des traits de décoration. Tous les navigateurs ne vont d'ailleurs pas les traiter de la même façon.
Particularités concernant l'héritage de text-decoration
.
Le mécanisme d'héritage de la propriété text-decoration
est très particulier : le fait de définir une valeur pour la propriété text-decoration
sur un élément enfant n'annule pas la valeur héritée du parent.
L'exemple ci-dessous fait le parallèle entre l'héritage de text-decoration
et l'héritage classique comme sur la propriété color
.
Il est composé d'un bloc parent, qui contient 3 blocs, qui seront donc ses enfants.
Une décoration et une couleur ont été appliquées au bloc parent.
La couleur n'est là que à titre de comparaison, pour illustrer le mécanisme d'héritage classique.
Sur le premier enfant, rien de particulier n'a été défini. La couleur est héritée du parent, et la décoration semble elle aussi héritée, mais nous allons voir que ce n'est pas un héritage habituel.
Sur le deuxième enfant, de nouvelles valeurs ont été définies pour la couleur et pour la décoration. La nouvelle couleur remplace bien en effet la couleur qui était héritée du parent. Mais on voit que, pour la décoration, il y a eu un cumul de la nouvelle valeur avec la valeur héritée du parent.
Sur le troisième enfant, la couleur et la décoration ont été fixée à la valeur initial
.
La couleur en effet est bien revenue sur du noir. Mais la décoration du parent persiste a être appliquée.
Enfin, l'enfant numéro 4 s'en sort mieux en redéfinissant complètement la décoration. En fait il crée une nouvelle décoration par dessus celle qui provient du parent.
Alors comment annuler l'héritage d'une décoration ? Il semblerait que ce ne soit pas possible à l'heure actuelle.
La nouvelle propriété text-decoration-skip-self
devrait permettre cela, mais pour l'instant, les navigateurs ne la prennent pas en compte.
Il y a aussi quelques astuces, mais qui risquent de créer des problèmes sur la mise en page :
- Positionner l'élément en absolu ou en fixé (propriété position
).
- Le définir en inline-block
(propriété display
).
Propagation sur les éléments positionnés.
En plus de ce mécanisme d'héritage particulier, il faut préciser que les décorations ne sont pas propagées aux éléments
positionnés (ceux dont la propriété position
est fixée à absolute
ou fixed
), ni aux éléments
dont la propriété display
a été définie à inline-block
ou inline-table
.
Pour en savoir plus, reportez-vous à la description de ces deux propriétés : position
, display
.
Propagation sur les éléments du type inline-...
.
D'autre part, comme on peut le voir sur l'exemple ci-dessous, la propagation des décorations aux éléments enfants dépend du type d'affichage de ces derniers.
Les décorations ont propagées aux éléments enfants du type inline
ou block
, mais ne sont pas propagées aux éléments du type
inline-block
, inline-table
, etc.
Inline
Inline-block
block
Exemples d'utilisation de text-decoration
.
A ce sujet, vous pouvez consulter la page sur le sélecteur
::spelling-error
, malheureusement encore trop peu pris en charge
par les navigateurs.
Animation de la propriété text-decoration
.
Reportez-vous aux propriétés individuelles pour d'autres exemples d'animation.
Prise en charge par les navigateurs (compatibilité).
Dans le tableau de compatibilité ci-dessous, la première colonne correspond à l'ancienne syntaxe, équivalente aujourd'hui à
text-decoration-line
.
La deuxième colonne concerne la syntaxe actuelle, qui permet de définir à la fois, le type de décoration, l'épaisseur du trait
son type et sa couleur.
text-decoration
, équivalente aujourd'hui à text-decoration-line
.
text-decoration
comme propriété résumée permettant de définir tous les paramètres de la décoration en une seule écriture.
text-decoration
(old syntax)
text-decoration
(new syntax)
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
.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration
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.