Les soulignements CSS sont trop minces et trop faibles en chrome

Explication et suggestions de réparation détaillées pour CSS Affichage de la naissance du navigateur Chrome

Cet article discutera de deux questions rencontrées lors du test des nouvelles propriétés CSS text-decoration-thickness et text-underline-offset dans Chrome.

Table des matières

• Le soulignement par défaut est incohérent
• Remplacer le style par défaut du navigateur
• Chrome Bug 1: Le système souligné sous macOS est trop mince
• Chrome Bug 2: position soulignée trop bas
• Comment aider d'abord à résoudre les bugs de navigateur Chrome

Le soulignement par défaut est incohérent

Ajoutez des liens texte à une page Web simple, définissez la police sur Arial, puis comparez les effets d'affichage soulignés sous différents navigateurs et systèmes d'exploitation. Les résultats montrent que l'épaisseur de soulignement par défaut et la position verticale (décalage de base) de différents navigateurs sont incohérentes. Cela est conforme aux dispositions du module de décoration de texte CSS, qui spécifie le comportement par défaut suivant (valeur automatique):

L'agent utilisateur sélectionne l'épaisseur de ligne décorative de texte appropriée. [...] L'agent utilisateur sélectionne le décalage de soulignement approprié.

Remplacer le style par défaut du navigateur

Deux nouvelles propriétés CSS peuvent définir avec précision l'épaisseur et le décalage du soulignement:

• text-decoration-thickness
• text-underline-offset

En utilisant ces deux propriétés, vous pouvez créer des effets de soulignement cohérents même sur différents navigateurs tels que Firefox (Gecko Engine) et Safari (WebKit Engine).

 H1 {
  Décoration du texte: soulignement;
  Texte-décoration-épaisseur: 0,04EM;
  Offset du texte-sous-ligne: 0,03EM;
}

Remarque: text-decoration-thickness a également une valeur spéciale from-font qui demande au navigateur d'utiliser la largeur de soulignement préférée de la police elle-même (si disponible). Après les tests, l'effet de soulignement des différentes polices est toujours incohérent.

Chrome Bug 1: Le système souligné sous macOS est trop mince

Si text-decoration-thickness est définie sur une valeur de longueur liée à la police qui est calculée comme une valeur de pixel non entière, Chrome s'arrête au lieu d'arrondir. Par exemple, si le poids déclaré est 0.06em et que le calcul est 1.92px , Chrome dessinera un soulignement de poids 1px au lieu de 2px. Ce problème est limité aux systèmes macOS uniquement.

 un {
  taille de police: 2EM;
  Texte-décoration-épaisseur: 0,06em;
}

Les captures d'écran montrent que la ligne de décoration de texte en chrome (troisième ligne) est deux fois plus mince que dans les navigateurs de safari et de Firefox.

Pour plus d'informations, veuillez vous référer au numéro de Chromium # 1255280.

Chrome Bug 2: position soulignée trop bas

text-underline-offset permet de définir avec précision la distance entre la ligne de base de la lettre et le soulignement (le décalage du soulignement par rapport à la ligne de base). Malheureusement, Chrome Browser ne l'implémente pas correctement pour le moment, ce qui entraîne la position de soulignement trop faible.

 H1 {
  Décoration du texte: soulignement;
  Color text-décoration: # F707;

  / * Désactiver "Skip Ink" * /
  -Webkit-Text-Decoration-Skip: Aucun; / * Safari * /
  Texte-décoration-skip-ink: Aucun;

  / * Couvrir toute la ligne de naufrage * /
  Texte-décoration-épaisseur: 0,175em;
  Texte-sous-décalage: 0;
}

En raison de ce bug, le soulignement ne peut pas être complètement déplacé vers la ligne de base.

Pour plus d'informations, veuillez vous référer au numéro de Chromium # 1172623.

Remarque: Comme indiqué dans l'image ci-dessus, Safari dessine des soulignements en haut de la ligne de naufrage au lieu du bas. Il s'agit d'un bogue Webkit qui a été corrigé récemment. Ce correctif doit être inclus dans la prochaine version de Safari.

Comment aider d'abord à résoudre les bugs de navigateur Chrome

Les deux nouvelles propriétés CSS utilisées pour styliser sont des ajouts bienvenus à CSS. J'espère que ces deux bogues chromés connexes pourront être corrigées dès que possible. Si ces fonctionnalités CSS sont importantes pour vous, ajoutez de la vedette à ces bogues de Chromium Bug Tracker pour exprimer votre préoccupation.

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!