[正文内容]

使用 Scrimba 提供的优质互动课程学习前端开发！立即注册！

本文内容

Default styles for h1 elements are changing.

h1 元素的默认样式即将变更

Author avatarSimon Pieters 2025年4月11日，阅读时长4分钟 浏览器即将开始推出嵌套 section 标题的默认 UA 样式变更。开发者应该检查他们的网站是否依赖 UA 样式来实现特定效果，以避免出现意料之外的结果和导致 Lighthouse 检查失败。在这篇文章中，我们将了解即将到来的变更内容，如何识别你的页面是否存在问题，以及一些关于如何构建符合规范且结构更好的网站的提示。

What's changing

HTML 规范曾经定义了一个大纲算法，该算法根据 <h1> 元素嵌套在多少个 section 元素（<section>，<aside>，<nav> 和 <article>）中，来为其赋予一个隐式的语义标题级别。

浏览器的渲染方式是 section > h1 将具有与 <h2> 相同的 font-size 和 margin。 section > section > h1 将被呈现为 <h3>，依此类推。 默认渲染是在浏览器的 UA 样式中实现的，而不是在 accessibility tree （屏幕阅读器使用的内容）中的标题级别。 网站开始使用 section 元素，但没有预料到会看到来自大纲算法的自动标题级别。

总的来说，这造成了开发者对在哪里可以使用 <h1> 元素的困惑，工具对 HTML 的处理方式也不同，并且大纲算法被认为是有问题的。 大纲算法已于 2022 年从 HTML 规范中删除，但 UA 样式表规则仍然存在。 浏览器厂商现在开始删除的就是默认样式中的这些规则。

cssCopy to Clipboard

/* 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; }

例如：

htmlCopy to Clipboard

<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

除了浏览器样式的更改之外，像 Lighthouse 这样的页面审计工具现在会将没有定义 font-size 的 <h1> 标记为不良实践。 以下是关于期望结果的要点：

在发生时间方面，这些更改正在以下浏览器中按以下时间表推出：

Firefox

Chrome

Safari

Fixing the Lighthouse warning

Lighthouse 最近继承了一个检查，该检查基于 Chromium 的 DevTools 警告，用于未为 <h1> 元素指定 font-size 的网站。 新规则称为 H1UserAgentFontSizeInSection，并且自 3 月份以来，在添加弃用警告后出现。 如果你看到 <h1> 警告，请确保你正在应用显式的 <h1> 字体大小和边距。 以下是一些建议使用的样式：

cssCopy to Clipboard

h1 {
 margin-block: 0.67em;
 font-size: 2em;
}

为了避免覆盖其他以 <h1> 为目标的样式规则，你可以使用 :where()，它具有零 specificity：

cssCopy to Clipboard

:where(h1) {
 margin-block: 0.67em;
 font-size: 2em;
}

MDN 上关于标题元素的页面现在包含上面列出的使用说明，因此开发者可以在显眼的地方看到此信息。

Summary

以下是一些需要记住的事情：

See also