Text-decoration-skip - Propriété CSS
Résumé des caractéristiques de la propriété text-decoration-skip
text-decoration-skip passe d'une valeur à l'autre sans transition.Description.
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.
Syntaxes 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.
Syntaxes pour text-decoration-skip-box.
- text-decoration-skip: none;
- text-decoration-skip: all;
Syntaxes pour text-decoration-skip-inset.
- text-decoration-skip: none;
- text-decoration-skip: auto;
Syntaxes pour text-decoration-skip-ink.
- text-decoration-skip: auto;
- text-decoration-skip: none;
- text-decoration-skip: all;
Syntaxes pour text-decoration-skip-self.
- text-decoration-skip: 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: object;
Ne pas tracer les traits de décoration issus du parent si l'élément est une image ou du type
inlne-box.
Syntaxes pour text-decoration-skip-spaces.
- text-decoration-skip: none;
- text-decoration-skip: all;
- text-decoration-skip: start; text-decoration-skip: end;
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.
Manipulation de la propriété text-decoration-skip par programme.
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é.
Modifier la valeur de text-decoration-skip-ink en Javascript.
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';
Lire la valeur de text-decoration-skip-ink avec Javascript.
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;
Lire la valeur calculée de text-decoration-skip-ink avec Javascript.
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 règles de priorité), 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');
Modifier la valeur de text-decoration-skip-ink avec JQuery.
$('#id').css('text-decoration-skip-ink', 'none');
Lire la valeur calculée de text-decoration-skip-ink avec JQuery.
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é 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.
Simulateur.
-
Trait surligné -
Trait rayé
Prise en charge par les navigateurs (compatibilité).
La propriété text-decoration-skip et ses dérivées sont relativement récentes et partiellement prises en charge (2022).
La valeur all appliquée à text-decoration-skip-ink pose également des problèmes de compatibilité.
text-decoration-skip-ink.
all pour la propriété text-decoration-skip-ink.
text-decoration-skiptext-decoration-skip-inkallNavigateurs 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-skip.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration-skip 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.