默认H1元素样式正在发生变化

浏览器开始对嵌套标题元素的默认用户代理样式进行更改。开发者应检查其网站是否在某些情况下依赖用户代理样式，以避免意外结果和Lighthouse检查失败。本文将探讨即将到来的变更内容、如何识别页面问题，以及构建合规且结构更佳网站的一些提示。

变更内容

HTML规范曾定义大纲算法，根据<h1>元素嵌套在分区元素（<section>、<aside>、<nav>和<article>）内的层数赋予其隐式语义标题级别。

浏览器渲染方式使得section > h1具有与<h2>相同的字体大小和边距。section > section > h1则表现为<h3>，依此类推。默认渲染在浏览器的用户代理样式中实现，但无障碍树（屏幕阅读器使用）中的标题级别未实现。网站开始使用分区元素，但未预期看到来自大纲算法的自动标题级别。

总的来说，这造成了关于开发者可在何处使用<h1>元素的困惑，工具处理HTML的方式不同，且大纲算法被认为存在问题。大纲算法于2022年从HTML规范中移除，但用户代理样式表规则仍然保留。浏览器厂商现在开始移除默认样式中的这些规则。

预期变化与时间表

随着浏览器样式的变化，页面审计工具（如Lighthouse）现在将未定义字体大小的<h1>标记为不良实践。以下是预期内容的要点：

• <h1>将不再根据周围的分区元素（如<section>、<article>、<nav>和<aside>）调整其样式。用户代理样式表将对<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用户代理样式，然后从4月14日起向100%的Beta 138用户推出。计划在Firefox 138稳定版中向5%的用户推出，逐步增加到10%的用户，然后在Firefox 140中在所有平台上发布。错误1885509。
• 自Firefox 136起，开发者将在控制台中看到关于article/aside/nav/section中未定义作者字体大小或边距的h1的警告：错误1937568。
• 要在Firefox中测试新行为，请在about:config中将layout.css.h1-in-section-ua-styles.enabled设置为false。

Chrome

• 自136版本起，当<h1>使用默认较小字体大小时，Chrome在4个元素内显示<h1>的弃用警告。在Chromium中标记弃用将降低“最佳实践”的Lighthouse分数：问题394111284

Safari

• 跟踪Safari的实现错误是错误292765。

修复Lighthouse警告

Lighthouse最近继承了一项基于Chromium DevTools警告的检查，针对未为<section>、<article>、<nav>或<aside>中的<h1>元素指定字体大小的网站。新规则称为H1UserAgentFontSizeInSection，自3月起随着弃用警告的添加而显示。如果看到<h1>警告，请确保应用明确的<h1>字体大小和边距。以下是一些推荐的样式：

为避免覆盖其他针对<h1>的样式规则，可以使用:where()，其特异性为零：

1
2
3
4

:where(section, article, nav, aside) h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

MDN标题元素页面现在包含上述使用说明，为开发者提供了可见的信息位置。

总结

以下是一些需记住的事项：

• 不要依赖默认浏览器样式传达标题层次结构。使用<h2>表示二级标题，<h3>表示三级标题等，明确定义文档层次结构。
• 始终为<h1>元素定义自己的字体大小和边距。
• 考虑更新CSS重置以应对此变更。
• 使用Lighthouse和浏览器DevTools审计网站，检查弃用用法。
• 查看MDN文档中HTML分区标题的使用说明。

参见

• Firefox：取消article、aside、nav、section中h1用户代理样式的意向
• HTML问题：移除section（等）和hgroup中的h1-h6用户代理样式
• HTML拉取请求：移除article、aside、nav、section中h1的用户代理样式
• Firefox beta 138更改在Bluesky上的公告