Texte-décoration-saut - Astuces CSS

Anonim

La text-decoration-skippropriété spécifie où un texte souligné, surligné ou barré doit être interrompu. Cela améliore la lisibilité du texte décoré et corrige la grammaire de ponctuation pour certaines langues.

Voici un exemple:

a ( text-decoration-skip: ink; )

La tête haute! La inkvaleur a été modifiée à une propriété entièrement nouvelle, text-decoration-skip-ink: auto;.

Si votre navigateur prend en charge cette propriété, vous remarquerez ici que les descendants de chaque caractère (comme «y» et «p») ont de petits espaces blancs autour de la bordure:

Voir le Pen text-decoration-skip par CSS-Tricks (@ css-tricks) sur CodePen.

Si votre navigateur ne prend pas en charge cette fonctionnalité, voici ce à quoi vous devez vous attendre de la propriété dans un navigateur compatible:

illustration de texte-décoration-saut

text-decoration-skip sous OSX et iOS

À la fin de 2014, Apple a modifié text-decorationles navigateurs Safari et iOS qui imitent la façon dont text-decoration-skip: ink;devrait fonctionner. Bien qu'aucune des text-decoration-skipvaleurs ne soit encore officiellement implémentée, vous pouvez désactiver ce comportement par défaut avec -webkit-text-decoration-skip: none;.

Voir le Pen -webkit-text-decoration-skip: none; par CSS-Tricks (@ css-tricks) sur CodePen.

En rapport

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

Plus d'information


  • Brouillon de l'éditeur de niveau 4 du module de décoration de texte CSS
  • text-decoration-skip chez MSDN.
  • Discussion sur l'ajout en trailing-spacestant que valeur de la liste de diffusion du W3C.
  • Amélioration de la lisibilité du texte pour les utilisateurs dyslexiques avec des soulignements sautés
  • text-decoration-skip sur MDN
  • text-decoration-skip-ink sur MDN

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 *