Text-decoration-skip - Propriété CSS

text-decoration-skip

text-decoration-skip-self

text-decoration-skip-box

text-decoration-skip-inset

text-decoration-skip-spaces

text-decoration-skip-ink

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

Description rapide

Propriété raccourcie définissant ce que les traits de décoration doivent sauter (espaces, jambage, etc.).

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété text-decoration-skip passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Décoration du texte

Références (W3C)

CSS Text Decoration Module Level 4

Statut du document: WD (document de travail)

Description de la propriété `text-decoration-skip`..

⚠

La définition de la propriété text-decoration-skip n'est pas encore stabilisée par le W3C. La plupart des navigateurs, soit ne la traitent pas du tout, soit ne connaissent que la sous-propriété text-decoration-skip-ink.

La rédaction de cette page est différée.

La propriété text-decoration-skip définit le comportement des traits de décoration (souligné, surligné, barré) dans certains cas particuliers comme les espaces, lorsque le trait coupe un jambage, ou dans le cas de l'héritage.

text-decoration-skip est une propriété résumée qui permet de définir les valeurs des propriétés suivantes :

text-decoration-skip-self : les traits de décoration de(s) élément(s) parent(s) doivent ils être appliqués ou non. A ce sujet, voir la particularité du mécanisme d'héritage sur la propriété text-decoration.
text-decoration-skip-box :
text-decoration-skip-inset :
text-decoration-skip-spaces : les traits de décoration sont interrompus ou non au niveau des espaces.
text-decoration-skip-ink : les traits de soulignement doivent ils être interrompus ou non lorsqu'ils coupent un jambage.

Voir aussi la propriété résumée text-decoration qui définit les traits de décoration à tracer.

Valeurs pour `text-decoration-skip` (propriété résumée).

text-decoration-skip: auto;

Toutes les sous-propriétés sont initialisées à leur valeur par défaut.
text-decoration-skip: none;

Toutes les sous-propriétés sont fixées à la valeur none.

Valeurs pour `text-decoration-skip-box`.

text-decoration-skip-box: none;
text-decoration-skip-box: all;

Valeurs pour `text-decoration-skip-inset`.

text-decoration-skip-inset: none;
text-decoration-skip-inset: auto;

Valeurs pour `text-decoration-skip-ink`.

text-decoration-skip-ink: auto;

Les tracés de décoration s'interrompent lorsqu'ils coupent le tracé du glyphe. Dans le cas des langues latines, cela se produit surtout avec les jambages, qui peuvent empiéter sur les traits de soulignement. Le navigateur décide de la pertinence d'interrompre ou pas le trait de décoration.

Exemple باللغة العربية
text-decoration-skip-ink: none;

Les tracés de décoration ne s'interrompent pas, même s'ils coupent par endroit le tracé du glyphe.

Exemple باللغة العربية
text-decoration-skip-ink: all;

Les traits de décoration s'interrompent lorsqu'ils coupent le tracé du glyphe.

Exemple باللغة العربية

Valeurs pour `text-decoration-skip-self`.

text-decoration-skip-self: none;

Rien n'est supprimé : les textes de décoration de l'élément parent sont tracés sur cet élément et propagé aux descendants.
text-decoration-skip-self: object;

Ne pas tracer les traits de décoration issus du parent si l'élément est une image ou du type inlne-box.

Valeurs pour `text-decoration-skip-spaces`.

La propriété text-decoration-skip-spaces gère la décoration des espaces : les caractères d'espacement ou les espaces ajoutés par les propriétés letter-spacing ou word-spacing.

text-decoration-skip-spaces: none;

Les espaces sont décorés comme n'importe quel autre caractère.

Exemple exemple
text-decoration-skip-spaces: all;

Les espaces ne sont pas décorés.

Exemple exemple
text-decoration-skip-spaces: start end;

Les valeurs start et end peuvent être présentes toutes les deux ou séparément.

Exemple exemple

Exemple exemple

Valeurs standards acceptées par toutes les propriétés:


text-decoration-skip: initial 
text-decoration-skip: inherit
text-decoration-skip: revert
text-decoration-skip: revertLayer
text-decoration-skip: unset


text-decoration-skip-self: initial  (objects)
text-decoration-skip-self: inherit
text-decoration-skip-self: revert
text-decoration-skip-self: revertLayer
text-decoration-skip-self: unset


text-decoration-skip-box: initial  (none)
text-decoration-skip-box: inherit
text-decoration-skip-box: revert
text-decoration-skip-box: revertLayer
text-decoration-skip-box: unset


text-decoration-skip-inset: initial  (none)
text-decoration-skip-inset: inherit
text-decoration-skip-inset: revert
text-decoration-skip-inset: revertLayer
text-decoration-skip-inset: unset


text-decoration-skip-spaces: initial  (start end)
text-decoration-skip-spaces: inherit
text-decoration-skip-spaces: revert
text-decoration-skip-spaces: revertLayer
text-decoration-skip-spaces: unset


text-decoration-skip-ink: initial  (auto)
text-decoration-skip-ink: inherit
text-decoration-skip-ink: revert
text-decoration-skip-ink: revertLayer
text-decoration-skip-ink: unset

Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

La propriété `text-decoration-skip` et Javascript.

Les exemples de code ci-après travaillent sur la propriété text-decoration-skip-ink, qui est, pour le moment, la plus souvent reconnue par les navigateurs, mais il sera facile de modifier les codes pour une autre propriété.

Avec Javascript, modifier la valeur de `text-decoration-skip-ink`.

Ce code produit un effet équivalent à celui d'un attribut style ajouté à l'élément. La valeur définie sera donc prioritaire sur d'éventuelles valeurs définies précédemment. Deux syntaxes sont données : la première avec le nom de la propriété écrit en kebab-case (text-decoration-skip-ink), et une deuxième syntaxe avec la notation camel-case (textDecorationSkipInk).


	let el = document.getElementById('id');
	el.style['text-decoration-skip-ink'] = 'none';
	// ou
	let el = document.getElementById('id');
	el.style.textDecorationSkipInk = 'none';

Avec Javascript, lire la valeur de `text-decoration-skip-ink`.

Ce code est le symétrique du précédent : il retrouve la valeur de text-decoration-skip-ink définie via l'attribut style d'un élément. Pour retrouver la valeur définie via un sélecteur CSS, reportez-vous à l'exemple plus bas.


	let el = document.getElementById('id');
	let value = el.style['text-decoration-skip-ink'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.textDecorationSkipInk;

Avec Javascript, lire la valeur calculée de `text-decoration-skip-ink`.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages, de la résolution des conflits éventuels (voir Les priorités), ou, en dernier recours, la valeur calculée sera la valeur initiale de la propriété.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('text-decoration-skip-ink');

Avec JQuery, modifier la valeur de `text-decoration-skip-ink`.


 $('#id').css('text-decoration-skip-ink', 'none');
 // ou
 $('#id').css('textDecorationSkipInk', 'none');

Avec JQuery, lire la valeur calculée de `text-decoration-skip-ink`.


	let value = $('#id').css('text-decoration-skip-ink');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété text-decoration-skip et affichent ensuite, pour le premier bouton, la valeur telle qu'elle a été appliquée, et pour le deuxième bouton; la valeur calculée. Dans le cas de ces propriétés, il n'y a pas de différences car les seules valeurs possibles sont des valeurs prédéfinies.

Support de `text-decoration-skip`.

La propriété text-decoration-skip et ses dérivées sont relativement récentes et partiellement prises en charge (2025). La valeur all appliquée à text-decoration-skip-ink pose également des problèmes de compatibilité.

Colonne 1

Support de la propriété résumée text-decoration-skip pour définir si les traits de décoration sautent les jambages, les espace, etc.

Colonne 2

Support de la propriété text-decoration-skip-ink qui définit si les traits de décoration passent par dessus les jambages ou non.

Colonne 3

Support de la valeur all pour la propriété text-decoration-skip.

Remarques :

(1) Supporte seulement les valeurs none, auto et object.

Propriété
text-decoration-skip

Propriété
text-decoration-skip-ink

Valeur
all

Estimation de la prise en charge globale.

18%

95%

19%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la propriété `text-decoration-skip`.

Module CSS - Décoration du texte - Niveau 4

Introduction dans ce niveau de la spécification des propriétés text-decoration-skip....

13 Mars 2018
Document de travail.

Voir aussi, au sujet des décorations de texte.

Le module de spécification CSS Text Decoration Module regroupe les attributs de décoration de texte : soulignement, mise en emphase, ombrage, etc. La propriété text-decoration-skip est décrite dans ce module, ainsi que les propriétés suivantes :