- 主要ブラウザーが `` タグのデフォルトスタイル（UAスタイル）を変更するアップデートを進めています
- 特に、ネストされた
section、article、nav、aside などの内部で使われた `` に影響します
- 開発者はこの変更により、サイトで予期しないスタイル変化や Lighthouse の警告が発生する可能性があるため注意が必要です
何が変わるのか
- HTML 仕様にはかつて「アウトラインアルゴリズム」という規則があり、ネストされた sectioning 要素の数に応じて
が視覚的に、`` のように見えるよう処理されていました
- たとえば
section > h1 は のように、`section > section > h1` は のようにレンダリングされていました
- これは実際のアクセシビリティツリーには反映されず、ツールごとに異なる解釈がされて混乱を招いていました
- 最終的にこのアルゴリズムは 2022 年に HTML 仕様から削除され、現在はブラウザー側でもそれに基づく UA スタイルを削除しています
以前のブラウザー UA スタイルの例
- x h1 { font-size: 1.50em }
- x x h1 { font-size: 1.17em }
- x x x h1 { font-size: 1.00em }
- x x x x h1 { font-size: 0.83em }
- x x x x x h1 { font-size: 0.67em }
HTML 構造の例
Level 1
Level 2
Level 3
Level 4
予想される変化と時期
- `` は、ネストされた section 要素の中にあるという理由だけで自動的にスタイルが変更されることはなくなります
- UA スタイルはすべての `` に対して同じスタイルを適用します
- Lighthouse では `` に
font-size が定義されていないと警告が表示されます
- 表示される警告:
H1UserAgentFontSizeInSection
Firefox
- 2025 年 3 月 31 日から Firefox Beta 138 でデスクトップユーザーの 50% にスタイル変更の配信を開始
- Firefox Stable 138 では 5% に配信し、その後 140 バージョンまでに全面展開の予定
- Firefox 136 以降では
font-size や margin が定義されていない場合、コンソール警告が表示されます
- 設定変更方法:
about:config で layout.css.h1-in-section-ua-styles.enabled を false に設定
Chrome
- Chrome 136 から `` がデフォルトの小さくなるスタイルを使っている場合に警告が発生します
- これは Lighthouse の「Best Practices」スコアに影響する可能性があります
Safari
- まだ具体的なアップデートやバグトラッキングはありませんが、WebKit でも同様のアップデートが予想されます
Lighthouse 警告の修正方法
- Lighthouse は Chromium DevTools の警告に基づき、`` に
font-size がない場合に警告を表示します
- これを避けるには、明示的に `` にスタイルを指定する必要があります
スタイル例
h1 {
margin-block: 0.67em;
font-size: 2em;
}
- specificity（優先度）を避けるには
:where() を使用
:where(h1) {
margin-block: 0.67em;
font-size: 2em;
}
要約チェックリスト
- ブラウザーのデフォルトスタイルに依存しないこと
、 などを適切に使い、階層構造を明示的に表現すること- すべての `` に
font-size と margin を明示すること
- CSS reset を更新してこの変更を反映すること
- Lighthouse と DevTools で警告を確認すること
- MDN の関連ドキュメントを参照して最新内容を反映すること
関連資料
1件のコメント
Hacker Newsの意見
Firefox 138の安定版で5%のユーザーに展開し、50%まで拡大する計画とのこと
W3Cが採用したアウトラインアルゴリズムの歴史的背景が興味深い
H1の挙動がいつから仕様に含まれていたのか気になるという意見がある
セクション要素(
,,,)と``タグの挙動について深く考えたことはなかったという意見があるアウトラインアルゴリズムが成功しなかったのは残念だという意見がある
タグは位置に関係なくであるべきだという意見があるこのような複雑さのため、多くのデザイナーがあらゆるものに``を使っているという意見がある
role属性を使えばアクセシビリティも確保できるHTMLのヘッダーはやや愚かだと思うという意見がある