Mon récent article sur les problèmes de soulignement CSS de Chrome a mis en évidence text-decoration-thickness
et l' text-underline-offset
, des propriétés CSS puissantes et largement soutenues offrant un contrôle plus fin.
Illustrons text-decoration-thickness
. Le soulignement par défaut d'Ubuntu est assez épais. Nous pouvons l'affiner:
: anyy-link { Texte-décoration-épaisseur: 0,08em; }
Remarque: j'utilise :any-link
au lieu de<a></a>
pour cibler uniquement les hyperliens réels (ceux avec des attributs href
). Les styles d'agent utilisateur des navigateurs sont également favorables :any-link
.
De nombreux sites (comme Google Search et Wikipedia) utilisent des soulignements de survol - les sous-lines apparaissent uniquement sur Mouseover. Bien que généralement déconseillé pour les liens dans le texte, cette approche convient aux liens espacés (navigation, pied de page). Voici un exemple d'en-tête:
En-tête: n'importe quel lien { Décoration du texte: aucune; } En-tête: anyy -kin: Hover { Décoration du texte: soulignement; }
Cependant, la volonté de survol revient à l'épaisseur par défaut, en ignorant notre paramètre précédent text-decoration-thickness
. Pourquoi?
Le problème provient de text-decoration
étant une propriété raccourci, et text-decoration-thickness
de son homologue à la main. La définition text-decoration
à none
ou underline
réinitialise les autres composants de décoration de texte (épaisseur, style, couleur). Le module de décoration de texte CSS le spécifie: les valeurs omises reviennent à leurs états initiaux.
Le navigateur Devtools Confirmez ceci: Inspectez un hyperlien, développez la propriété text-decoration
pour voir les valeurs des composants.
Pour conserver l'épaisseur personnalisée sur le plan de survol, nous avons besoin d'ajustements. Plusieurs solutions existent:
text-decoration-thickness
dans l'état :hover
.text-decoration
.text-decoration-line
au lieu de text-decoration
.text-decoration
Répéter simplement text-decoration-thickness
dans le :hover
State fonctionne, mais il est redondant:
/ * Option A * / En-tête: n'importe quel lien { Décoration du texte: aucune; } En-tête: anyy -kin: Hover { Décoration du texte: soulignement; Texte-décoration-épaisseur: 0,08em; }
Idéalement, tirer parti des capacités de sténographie du text-decoration
:
/ * Option b * / En-tête: n'importe quel lien { Décoration du texte: aucune; } En-tête: anyy -kin: Hover { Décoration du texte: souligner 0,08EM; }
Remarque: Cette approche sténographique est relativement nouvelle; Les versions CSS plus anciennes manquaient de cette fonctionnalité. Le moteur WebKit de Safari utilise toujours le case préfixe -webkit-text-decoration
et manque de support d'épaisseur (voir Webkit Bug 230083). Cela rend l'option B safari-incompatible.
La meilleure approche utilise text-decoration-line
, introduite aux côtés de la sténographie:
/ * Option C * / En-tête: n'importe quel lien { Texte-décoration-ligne: aucun; } En-tête: anyy -kin: Hover { Text-décoration-ligne: soulignement; }
Cela modifie uniquement le composant line
, préservant l'épaisseur précédemment définie. Il s'agit de la solution la plus robuste et compatible avec les navigateurs.
N'oubliez pas: les propriétés scolarisées (comme text-decoration
, background
) réinitialisent les valeurs omises à leurs valeurs par défaut. Cela explique pourquoi les styles comme background-repeat: no-repeat
sont remplacés par une déclaration ultérieure background: url(flower.jpg)
. Voir "Réinitialisation accidentelle du CSS" pour plus de détails.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!