Der Standardstil des `h1`-Tags wird geändert

 (developer.mozilla.org)
3 Punkte von GN⁺ 2025-04-11 | 1 Kommentare | Auf WhatsApp teilen
  • Wichtige Browser rollen derzeit ein Update aus, das den Standardstil (UA-Stil) des <h1>-Tags ändert
  • Betroffen sind insbesondere <h1>, die innerhalb verschachtelter section-, article-, nav- und aside-Elemente verwendet werden
  • Entwickler sollten aufmerksam sein, da diese Änderung unerwartete Stiländerungen auf Websites oder Lighthouse-Warnungen verursachen kann

Was sich ändert

  • In der HTML-Spezifikation gab es früher eine Regel namens „Outline-Algorithmus“, durch die <h1> je nach Anzahl verschachtelter sectioning-Elemente visuell wie <h2>, <h3> usw. dargestellt wurde
  • Zum Beispiel wurde section > h1 wie <h2> und section > section > h1 wie <h3> gerendert
  • Dies wurde jedoch nicht im tatsächlichen Accessibility-Tree abgebildet und von verschiedenen Tools unterschiedlich interpretiert, was zu Verwirrung führte
  • Der Algorithmus wurde schließlich 2022 aus der HTML-Spezifikation entfernt, und nun entfernen auch die Browser die dazugehörigen UA-Stile

Beispiel für frühere Browser-UA-Stile

  • 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 }

Beispiel für eine HTML-Struktur

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

Zu erwartende Änderungen und Zeitplan

  • <h1> erhält nun nicht mehr automatisch einen anderen Stil, nur weil es sich innerhalb verschachtelter section-Elemente befindet
  • Der UA-Stil wendet für alle <h1> denselben Stil an
  • In Lighthouse wird eine Warnung angezeigt, wenn für <h1> keine font-size definiert ist
  • Angezeigte Warnung: H1UserAgentFontSizeInSection

Firefox

  • Ab dem 31. März 2025 beginnt Firefox Beta 138 mit der Auslieferung der Stiländerung an 50 % der Desktop-Nutzer
  • In Firefox Stable 138 erfolgt zunächst ein Rollout an 5 %, anschließend ein vollständiger Rollout bis Version 140
  • Ab Firefox 136 wird eine Konsolenwarnung angezeigt, wenn font-size oder margin nicht definiert sind
  • So lässt sich die Einstellung ändern: In about:config den Wert von layout.css.h1-in-section-ua-styles.enabled auf false setzen

Chrome

  • Ab Chrome 136 wird eine Warnung ausgelöst, wenn <h1> den standardmäßig verkleinerten Stil verwendet
  • Das kann sich auf den Lighthouse-Score für „Best Practices“ auswirken

Safari

  • Es gibt noch kein konkretes Update oder Bug-Tracking, aber ein ähnliches Update wird auch für WebKit erwartet

So behebt man die Lighthouse-Warnung

  • Lighthouse zeigt auf Basis der Chromium-DevTools-Warnung eine Warnung an, wenn für <h1> keine font-size gesetzt ist
  • Um das zu vermeiden, sollte man <h1> explizit stylen

Beispielstil

h1 {  
  margin-block: 0.67em;  
  font-size: 2em;  
}
  • Um specificity (Spezifität) zu vermeiden, :where() verwenden
:where(h1) {  
  margin-block: 0.67em;  
  font-size: 2em;  
}

Zusammenfassende Checkliste

  • Nicht auf Browser-Standardstile verlassen
  • <h2>, <h3> usw. passend verwenden, um die Hierarchie explizit auszudrücken
  • Für alle <h1> font-size und margin explizit angeben
  • Das CSS-Reset aktualisieren, um diese Änderung zu berücksichtigen
  • Warnungen mit Lighthouse und DevTools überprüfen
  • Die relevante MDN-Dokumentation konsultieren und den aktuellen Stand der Standards berücksichtigen

Verwandte Materialien

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-04-11
Hacker-News-Kommentare

  • In der stabilen Version von Firefox 138 wird es für 5 % der Nutzer ausgerollt, mit dem Plan, dies auf 50 % auszuweiten

    • Es gibt die Meinung, dass dies Tests erschweren könnte, weil Webentwickler ein anderes Browserverhalten als die Nutzer haben könnten
    • Es gibt die Meinung, dass man sich dabei offenbar an der Rollout-Methode von Facebook orientiert hat, diese Vorgehensweise für Firefox aber unpassend sei, da Firefox keine Server-seitige Software ist

  • Der historische Hintergrund des vom W3C übernommenen Outline-Algorithmus ist interessant

    • Browser und Screenreader lehnten die Übernahme wegen Unklarheiten im Verhältnis zu bestehenden Webinhalten und wegen Wartungsproblemen ab
    • Acht Jahre später gab WHATWG ihn schließlich auf

  • Es gibt die Frage, seit wann das Verhalten von H1 überhaupt Teil der Spezifikation ist

    • Jemand meint, seit 1995 HTML zu schreiben und noch nie davon gehört zu haben
    • Es gibt die Meinung, dass es besser wäre, dies zu entfernen, weil es Verwirrung stiften kann

  • Es gibt die Meinung, dass man nie wirklich tief über das Verhalten von Section-Elementen (<section>, <aside>, <nav>, <article>) und dem <h1>-Tag nachgedacht hat

  • Es ist schade, dass der Outline-Algorithmus sich nicht durchgesetzt hat

    • Es gibt die Meinung, dass sich Inhalte aus verschiedenen Quellen frei zusammensetzen lassen sollten
    • Es gibt die Meinung, dass man ein <h1>-Fragment schreiben und ihm die Bedeutung „die oberste Überschrift in meinem Kontext“ geben können sollte, statt bezogen auf den globalen Kontext des Dokuments

  • Es gibt die Meinung, dass ein <h1>-Tag unabhängig von seiner Position ein <h1> bleiben sollte

    • Er sollte sich standardmäßig nicht verändern, und damit ließen sich auch Accessibility-Probleme von Screenreadern lösen

  • Es gibt die Meinung, dass viele Designer wegen dieser Komplexität für alles <div> verwenden

    • Mit dem role-Attribut lasse sich auch Accessibility sicherstellen

  • Es gibt die Meinung, dass die Header in HTML etwas albern sind

    • Es gibt die Meinung, dass es eine bessere Darstellung wäre, Abschnitte eines Buches mit dem <section>-Tag zu trennen
    • Es gibt die Meinung, dass h1 und h2 im Unterschied zu anderen Formen in HTML explizite Tags und eine Hierarchie erzeugen
    • Es gibt den scherzhaften Wunsch, in die Vergangenheit zurückzukehren und Tim Berners-Lee dieses Problem lösen zu lassen