Quand éviter la propriété scolare-décoration texte

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 .

Soulignez-vous sur les pièges: un piège subtil

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:

• Raflarez text-decoration-thickness dans l'état :hover .
• Incorporez l'épaisseur directement dans le raccourci du text-decoration .
• Utilisez text-decoration-line au lieu de text-decoration .

Stratégies optimales 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.

Considérations de propriétés scolarisées

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!