h1 元素的默认样式正在改变
Simon Pieters
阅读时间 4 分钟
浏览器开始逐步更改嵌套 section 标题的默认 UA 样式。开发者应检查其网站是否依赖于特定情况下的 UA 样式，以避免意外结果和 Lighthouse 检查失败。在本博文中，我们将探讨即将发生的变化，如何识别您的页面是否存在此问题，以及一些关于符合规范和结构更良好的网站的提示。
变化内容
HTML 规范曾定义了一个大纲算法，该算法根据 <h1> 元素嵌套在多少 section 元素（<section>、<aside>、<nav> 和 <article>）内部，来赋予其一个隐含的语义标题级别。
浏览器的渲染方式是，section > h1 的字体大小和外边距与 <h2> 相同。section > section > h1 将被渲染为 <h3>，以此类推。默认渲染在浏览器的 UA 样式中实现，但在 辅助功能树（屏幕阅读器使用的）中并未体现标题级别。网站开始使用 section 元素，但并未预料到大纲算法会产生自动的标题级别。
总的来说，这造成了关于开发者何时可以使用 <h1> 元素的困惑，工具对 HTML 的处理方式不同，并且大纲算法被认为存在问题。大纲算法已于 2022 年从 HTML 规范中移除，但 UA 样式表规则仍然存在。默认样式中的规则正是浏览器厂商现在开始移除的部分。
/* 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; }
例如
<body>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
<section>
<h1>Level 4</h1>
</section>
</section>
</section>
</body>
旧 UA 样式下的效果如下
新 UA 样式将呈现此外观
上面 HTML 示例在您浏览器默认样式下的效果是这样的
预期和时间表
除了浏览器样式的变化，Lighthouse 等页面审计工具现在会标记未使用 font-size 定义的 <h1> 为不良实践。以下是您可以预期的情况概览：
<h1>将不再根据其周围的 section 元素（如<section>、<article>、<nav>和<aside>）来调整其样式。UA 样式表将对<h1>应用相同的样式，没有隐含的样式会降级<h1>以匹配<h2>、<h3>等。- 如果
<h1>在<section>、<article>、<nav>或<aside>中使用且未指定字体大小，Lighthouse 将标记一个警告。您需要留意 Lighthouse 的弃用警告H1UserAgentFontSizeInSection。下一节将介绍处理此问题的提示。
关于何时发生此变化，更改将在以下浏览器中按此时间表进行
Firefox
- 自 2025 年 3 月 31 日起，Firefox 将在 50% 的 Beta 138 用户上推出更改，以移除桌面版
article、aside、nav或section中h1的 UA 样式，然后在 4 月 14 日开始对所有 Beta 138 用户生效。计划在 Firefox 138 稳定版中对 5% 的用户推出，然后逐渐增加到 10% 的用户，最后在 Firefox 140 中在所有平台上发布。 (bug 1885509)。 - 自 Firefox 136 起，开发者将在控制台中收到有关在
article/aside/nav/section中未定义作者字体大小或外边距的h1的警告：(bug 1937568)。 - 要在 Firefox 中测试新行为，请在 about:config 中将
layout.css.h1-in-section-ua-styles.enabled设置为 false。
Chrome
- 自 136 版本以来，Chrome 会对在 4 个元素（
article、aside、nav、section）中使用的<h1>元素（当<h1>使用默认的较小字体大小时）显示弃用警告。在 Chromium 中标记为弃用将降低 Lighthouse 得分，显示在“最佳实践”类别中：(issue 394111284)。
Safari
- Safari 的实现 bug 可追踪为 bug 292765。
修复 Lighthouse 警告
Lighthouse 最近 继承了一项检查，该检查基于 Chromium 的 DevTools 警告，用于标记在 <section>、<article>、<nav> 或 <aside> 中未为 <h1> 元素指定 font-size 的网站。新规则称为 H1UserAgentFontSizeInSection，自 3 月份添加弃用警告以来开始出现。如果您看到 <h1> 警告，请确保您应用了明确的 <h1> 字体大小和外边距。以下是一些推荐的样式：
h1 {
margin-block: 0.67em;
font-size: 2em;
}
为了避免覆盖其他针对 <h1> 的样式规则，您可以使用 :where()，它具有零 特异性。
:where(h1) {
margin-block: 0.67em;
font-size: 2em;
}
MDN 的标题元素页面现在包含 上面列出的使用说明，因此开发者有一个可见的地方可以查看此信息。
总结
以下是一些需要牢记的事项