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 <h1>
  • Cela affecte en particulier les <h1> 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 <h1> pouvait être affiché visuellement comme un <h2> ou un <h3> en fonction du niveau d’imbrication des éléments de sectionnement
  • Par exemple, section > h1 était rendu comme un <h2>, et section > section > h1 comme un <h3>
  • 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

<body>  
  <h1>Level 1</h1>  
  <section>  
    <h1>Level 2</h1>  
    <section>  
      <h1>Level 3</h1>  
      <section>  
        <h1>Level 4</h1>  
      </section>  
    </section>  
  </section>  
</body>

Changements attendus et calendrier

  • Un <h1> 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 <h1>
  • Dans Lighthouse, un avertissement s’affiche si aucun font-size n’est défini pour <h1>
  • 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 <h1> 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 <h1>
  • Pour l’éviter, il faut définir explicitement un style pour <h1>

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 <h2>, <h3>, etc. pour exprimer explicitement la hiérarchie
  • Définir explicitement font-size et margin pour tous les <h1>
  • 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 (<section>, <aside>, <nav>, <article>) et de la balise <h1>

  • 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 <h1> 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 <h1> devrait rester une <h1> 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 <div> 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 <section>
    • 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