Texte-décoration-skip-ink - Astuces CSS

Anonim

text-decoration-skip-inkest une propriété qui contrôle le comportement de underlineet overline(mais pas line-through) lorsque la ligne traverse une partie d'un caractère / glyphe. Cela vous donne un contrôle précis sur la façon dont les soulignements ou les surlignages interagissent avec les caractères qui s'étendent au-dessus du haut ou qui pendent sous le bas d'une ligne.

Auparavant, cela était géré via la text-decoration-skip: ink;combinaison propriété / valeur, mais après des discussions sur la façon de gérer le problème des styles en cascade écrasant involontairement les styles de priorité inférieure (en raison du nombre d'options disponibles pour text-decoration-skip), les propriétés individuelles seront divisées en nouvelles propriétés similaire à text-decoration-skip-ink. Pour plus de contexte et d'exemples expliquant pourquoi cela a été modifié, consultez cette discussion sur GitHub et les minutes du groupe de travail CSS sur les propriétés.

Par défaut, les navigateurs «ignorent» les zones où «l'encre» d'un caractère croise un trait de soulignement, comme ceci:

Vous pouvez modifier ce comportement pour forcer le soulignement / surlignement à traverser le caractère en définissant text-decoration-skip-inksur none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Il en résulte que la ligne traverse les caractères:

Syntaxe

text-decoration-skip-ink: auto | none;

Valeurs

text-decoration-skip-ink accepte les valeurs suivantes:

  • auto est la valeur par défaut et «sautera» les soulignements / surlignages lors du passage d'un caractère.
  • none coupera ce soulignement / surlignage à travers vos y et vos grands t.

Exemple

Voir l'exemple Pen text-decoration-skip-ink
par CSS-Tricks (@ css-tricks) sur CodePen.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
91 87 Non 88 TP

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 14,0-14,4 *

En rapport

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Ressources

  • Documentation MDN
  • Mise en forme des soulignements sur le Web
  • Utilisateurs dyslexiques et soulignements sans encre