1 Slot für Q2 verfügbar

Projekt anfragen

Default styles for h1 elements are changing

Die Browser beginnen mit der Einfuhrung von Änderungen in den Standard-UA-Styles für verschachtelte Abschnittsüberschriften. Entwickler sollten überprüfen, ob ihre Seiten in bestimmten Fällen nicht auf UA-Stile angewiesen sind, um unerwartete Ergebnisse und fehlgeschlagene Lighthouse-Prüfungen zu vermeiden. In diesem Beitrag werfen wir einen Blick auf die kommenden Änderungen, wie Sie feststellen können, ob dies ein Problem auf Ihren Seiten darstellt, und geben Ihnen einige Tipps für konforme und besser strukturierte Websites.

text

What’s changing

In der HTML-Spezifikation war ein Gliederungsalgorithmus definiert, der den <h1>-Elementen eine implizite semantische Überschriftenebene zuwies, die sich danach richtete, wie viele Gliederungselemente (<section>, <aside>, <nav> und <article>) in ihnen verschachtelt waren.

The browser rendering was such that section > h1 would have the same font-size and margin as <h2>. The section > section > h1 would be represented as <h3>, and so on. The default rendering was implemented in browsers in their UA styles, but not the heading level in the accessibility tree (what screen readers use). Websites started to use sectioning elements, but didn’t expect to see the automatic heading levels from the outline algorithm.

In general, this created confusion about where developers could use <h1> elements, tools handled the HTML differently, and the outline algorithm was considered problematic. The outline algorithm was removed from the HTML spec in 2022, but the UA stylesheet rules still remain. The rules in the default styles are what browser vendors are starting to remove now.

/* where x is :is(article, aside, nav, section) */
x h1 { margin-block: 0.83em; font-size: 1.50em; }
x x h1 { margin-block: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; }

For example:

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

What to expect and when

Alongside the changes in browser styles, page auditing tools like Lighthouse now flag cases of <h1>s without defined font-size as bad practice. Here’s the gist of what to expect:

  • <h1> will no longer adapt its style based on surrounding sectioning elements like <section>, <article>, <nav>, and <aside>. UA stylesheet will apply the same style to <h1> with no implicit styles that demote <h1> to match <h2>, <h3>, etc.
  • Lighthouse will flag a warning if <h1> is used without a specified font-size and is nested in <section>, <article>, <nav>, or <aside>. The Lighthouse deprecation warning to look out for is H1UserAgentFontSizeInSection. Hints for dealing with this are described in the next section.

In terms of when this is happening, changes are rolling out in the following browsers in this timeline:

Firefox

  • From March 31, 2025, Firefox is rolling out changes to 50% of Beta 138 users to remove UA styles for h1 in article, aside, nav, or section on desktop, then 100% of Beta 138 starting April 14. The plan is to roll out to 5% of users on the Firefox 138 stable release, ramp up to 10% of users, then ship on all platforms in Firefox 140. bug 1885509.
  • Since Firefox 136, developers will see a console warning for h1s in article/aside/nav/section without author-defined font-size or margins: bug 1937568.
  • To test in Firefox with the new behavior, set layout.css.h1-in-section-ua-styles.enabled to false in about:config.

Schauen ob die Überschrift funktioniert

Und das der Absatz dazu.

Inhalt

0%