Le style par défaut des balises h1 va changer

 (developer.mozilla.org)
3 points par GN⁺ 2025-04-11 | 1 commentaires | Partager sur WhatsApp
  • Les principaux navigateurs déploient actuellement une mise à jour qui modifie le style par défaut (style UA) de la balise ``
  • Cela affecte en particulier les `` utilisés à l’intérieur d’éléments imbriqués comme section, article, nav ou aside
  • Les développeurs doivent être vigilants, car ce changement peut entraîner des variations de style inattendues sur les sites ou des avertissements Lighthouse

Qu’est-ce qui change ?

  • La spécification HTML contenait autrefois une règle appelée « algorithme de plan » (outline algorithm), selon laquelle un pouvait être affiché visuellement comme un ou un `` en fonction du niveau d’imbrication des éléments de sectionnement
  • Par exemple, section > h1 était rendu comme un , et `section > section > h1` comme un
  • Cela n’était pas reflété dans l’arbre d’accessibilité et était interprété différemment selon les outils, ce qui créait de la confusion
  • Au final, cet algorithme a été retiré de la spécification HTML en 2022, et les navigateurs sont désormais en train de supprimer le style UA associé

Exemple d’ancien style UA des navigateurs

  • x h1 { font-size: 1.50em }
  • x x h1 { font-size: 1.17em }
  • x x x h1 { font-size: 1.00em }
  • x x x x h1 { font-size: 0.83em }
  • x x x x x h1 { font-size: 0.67em }

Exemple de structure HTML


  Level 1

    Level 2

      Level 3

        Level 4

Changements attendus et calendrier

  • Un `` ne verra plus automatiquement son style modifié simplement parce qu’il se trouve dans des éléments section imbriqués
  • Le style UA appliquera désormais le même style à tous les ``
  • Dans Lighthouse, un avertissement s’affiche si aucun font-size n’est défini pour ``
  • Avertissement affiché : H1UserAgentFontSizeInSection

Firefox

  • À partir du 31 mars 2025, Firefox Beta 138 commence à déployer ce changement de style pour 50 % des utilisateurs desktop
  • Firefox Stable 138 sera déployé à 5 % des utilisateurs, puis la diffusion complète est prévue d’ici la version 140
  • À partir de Firefox 136, un avertissement s’affiche dans la console si font-size ou les marges ne sont pas définis
  • Pour modifier ce comportement : dans about:config, définir layout.css.h1-in-section-ua-styles.enabled sur false

Chrome

  • À partir de Chrome 136, un avertissement s’affiche si `` utilise encore le style par défaut réduit
  • Cela peut affecter le score « Best Practices » de Lighthouse

Safari

  • Il n’existe pas encore de mise à jour concrète ni de suivi de bug spécifique, mais une évolution similaire est attendue dans WebKit

Comment corriger l’avertissement Lighthouse

  • Lighthouse affiche cet avertissement en se basant sur les alertes de Chromium DevTools lorsqu’aucun font-size n’est défini pour ``
  • Pour l’éviter, il faut définir explicitement un style pour ``

Exemple de style

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}
  • Pour éviter la specificity (priorité), utilisez :where()
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

Checklist récapitulative

  • Ne pas dépendre du style par défaut du navigateur
  • Utiliser correctement , , etc. pour exprimer explicitement la hiérarchie
  • Définir explicitement font-size et margin pour tous les ``
  • Mettre à jour le CSS reset pour refléter ce changement
  • Vérifier les avertissements avec Lighthouse et DevTools
  • Consulter la documentation MDN concernée pour rester à jour

Ressources associées

À lire aussi

1 commentaires

 
GN⁺ 2025-04-11
Commentaires sur Hacker News

  • Déploiement auprès de 5 % des utilisateurs dans la version stable de Firefox 138, avec un élargissement prévu à 50 %

    • Certains estiment que cela compliquera les tests, car les développeurs web pourraient se retrouver avec un comportement du navigateur différent de celui des utilisateurs
    • Certains pensent que cela semble inspiré de la méthode de déploiement de Facebook, mais jugent cette approche inadaptée à Firefox, qui n’est pas un logiciel côté serveur

  • Le contexte historique de l’algorithme d’outline adopté par le W3C est jugé intéressant

    • Les navigateurs et les lecteurs d’écran ont refusé de l’adopter en raison de l’ambiguïté avec le contenu web existant et de problèmes de maintenance
    • Huit ans plus tard, le WHATWG a fini par l’abandonner

  • Certains se demandent depuis quand le comportement de h1 figure dans la spécification

    • Une personne dit écrire du HTML depuis 1995 sans en avoir jamais entendu parler
    • Certains estiment qu’il vaudrait mieux le supprimer, car cela peut prêter à confusion

  • Certains disent n’avoir jamais vraiment réfléchi en profondeur au comportement des éléments de section (, , , ) et de la balise ``

  • Certains regrettent que l’algorithme d’outline n’ait pas réussi

    • Ils estiment qu’il devrait être possible de composer arbitrairement du contenu provenant de sources diverses
    • Ils pensent qu’on devrait pouvoir écrire un fragment `` et lui donner le sens de « titre principal dans mon contexte » plutôt que dans le contexte global du document

  • Certains estiment qu’une balise devrait rester une quel que soit son emplacement

    • Elle ne devrait pas changer par défaut, et cela pourrait résoudre les problèmes d’accessibilité des lecteurs d’écran

  • Certains pensent que cette complexité explique pourquoi beaucoup de designers utilisent `` pour tout

    • L’accessibilité peut aussi être assurée en utilisant l’attribut role

  • Certains trouvent que les en-têtes HTML sont un peu absurdes

    • Ils estiment qu’il serait plus approprié de délimiter les sections d’un livre avec la balise ``
    • Ils considèrent que h1 et h2 créent une structure hiérarchique et des balises explicites différentes du reste des formats HTML
    • L’un plaisante en disant qu’il aimerait remonter le temps pour demander à Tim Berners-Lee de régler ce problème