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 ``-Tags ändert
  • Betroffen sind insbesondere ``, 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 je nach Anzahl verschachtelter sectioning-Elemente visuell wie, `` usw. dargestellt wurde
  • Zum Beispiel wurde section > h1 wie und `section > section > h1` wie 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


  Level 1

    Level 2

      Level 3

        Level 4

Zu erwartende Änderungen und Zeitplan

  • `` 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 `` denselben Stil an
  • In Lighthouse wird eine Warnung angezeigt, wenn für `` 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 `` 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 `` keine font-size gesetzt ist
  • Um das zu vermeiden, sollte man `` 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
  • , usw. passend verwenden, um die Hierarchie explizit auszudrücken
  • Für alle `` 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 (, , , ) und dem ``-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 ``-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 -Tag unabhängig von seiner Position ein 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 `` 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 ``-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