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 的標題元素頁面現在包含 上面列出的使用說明，因此開發者有一個可見的地方可以檢視此資訊。
總結
以下是一些需要牢記的事項