La propriété CSS text-decoration-skip
La propriété CSS text-decoration-skip indique les parties du contenu à ignorer. Découvrez les valeurs et des exemples.
La propriété CSS text-decoration-skip était destinée à contrôler les parties du contenu d'un élément qu'une ligne de décoration de texte (soulignement, surlignement ou barré) devait ignorer plutôt que de traverser.
Elle s'appliquait à toutes les lignes de décoration dessinées par l'élément et héritées de ses ancêtres. L'idée était de pouvoir empêcher un soulignement de couper les espaces blancs, les éléments remplacés comme les images, ou les jambages de lettres telles que « g » et « y ».
En pratique, la propriété n'a jamais été implémentée. Les éditeurs de navigateurs ont séparé ses fonctionnalités dans la propriété dédiée text-decoration-skip-ink — qui contrôle le passage autour des glyphes de lettres — et la propriété text-decoration-skip d'origine a été retirée de la spécification. Cette page la documente à titre de référence ; ne l'utilisez pas dans un nouveau code.
La valeur ink — la seule partie de cette propriété que les navigateurs aient jamais prise en compte — a été déplacée vers sa propre propriété text-decoration-skip-ink. C'est cette propriété que vous souhaitez presque certainement utiliser aujourd'hui.
Quand l'utiliser
Jamais dans de nouveaux projets. text-decoration-skip est obsolète et non prise en charge par tous les navigateurs actuels, de sorte que la déclarer n'a aucun effet. Les deux enseignements pratiques :
- Pour éviter qu'un soulignement entre en conflit avec les jambages des lettres, utilisez
text-decoration-skip-ink: auto(c'est la valeur par défaut moderne). - Pour styliser les soulignements eux-mêmes, utilisez
text-decoration-line,text-decoration-color,text-decoration-style, ou le raccourcitext-decoration.
Vous pouvez encore rencontrer text-decoration-skip dans des feuilles de style ou des tutoriels anciens — la reconnaître (et savoir qu'elle n'a aucun effet) est la principale raison d'en être informé.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Oui. |
| Animable | Non. |
| Version | Brouillon (Obsolète) |
| Syntaxe DOM | object.style.textDecorationSkip = "spaces"; |
Syntaxe
Dans la spécification désormais supprimée, la valeur était soit le mot-clé unique none, soit un ou plusieurs mots-clés séparés par des espaces parmi la liste ci-dessous.
/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces edges;Exemple de la propriété text-decoration-skip
Comme aucun navigateur n'implémente text-decoration-skip, le soulignement ci-dessous est dessiné en ligne droite à travers tout le contenu — la propriété est simplement ignorée. L'exemple est conservé pour illustrer la syntaxe historique :
Exemple de code CSS text-decoration-skip
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 1em;
color: #ccc;
font-size: 2em;
text-decoration: underline;
text-decoration-skip: edges;
}
</style>
</head>
<body>
<h2>Text-decoration-skip property example</h2>
<p>
<em>Lorem,</em>
<em>ipsum is simply dummy text</em>
</p>
</body>
</html>Résultat
Cette propriété est obsolète et non prise en charge par les navigateurs modernes. L'exemple ne produira aucun changement visuel.
Valeurs
| Valeur | Description |
|---|---|
| none | Aucun saut n'est appliqué. La décoration de texte est donc dessinée sur tout le contenu textuel. |
| objects | Ignore les décorations au-dessus des éléments remplacés (comme les images) ou des boîtes inline-block. |
| spaces | Tous les espaces sont ignorés. |
| leading-spaces | Les espaces blancs de début sont ignorés (séparateurs de mots ainsi que tout espacement de lettres ou de mots en début). |
| trailing-spaces | Les espaces blancs de fin sont ignorés (séparateurs de mots ainsi que tout espacement de lettres ou de mots en fin). |
| edges | Le début et la fin de chaque ligne de décoration sont légèrement rentrés par rapport au bord du contenu de la boîte décoratrice, afin que les soulignements adjacents ne fusionnent pas visuellement. |
| box-decoration | Les zones de marge, de bordure et de rembourrage de la boîte sont ignorées. |
Compatibilité des navigateurs
| Navigateur | Prise en charge |
|---|---|
| Chrome | Jamais implémentée |
| Firefox | Jamais implémentée |
| Safari | Jamais implémentée |
| Edge | Jamais implémentée |
| Opera | Jamais implémentée |