編集

h1 要素のデフォルトスタイル変更

#HTML #CSS

ブラウザベンダーが<section>、<article>、<nav>、<aside>内の<h1>要素に対する UA スタイルシートのデフォルトスタイルを廃止する動きを開始した。これらの変更により、入れ子になったセクション見出しのスタイリングが変わる。

HTML の仕様には以前、<h1>要素に暗黙的なセマンティックな見出しレベルを与えるアウトラインアルゴリズムが定義されていた。このアルゴリズムでは、<h1>がいくつのセクショニング要素の中にネストされているかに基づいてレベルが決まっていた。例えば：

html
<body>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
    </section>
  </section>
</body>

現在のブラウザレンダリングでは、section > h1は<h2>と同じフォントサイズとマージンを持ち、section > section > h1は<h3>として表示される。これは UA スタイルシートで実装されていたが、アクセシビリティツリー（スクリーンリーダーが使用するもの）での見出しレベルは反映されていなかった。

このアウトラインアルゴリズムは 2022 年に HTML 仕様から削除されたが、UA スタイルシートのルールは残っていた。現在、ブラウザベンダーはこれらの UA スタイルシートルールの削除を開始している。

#各ブラウザの対応予定

#Firefox

  • Firefox Beta 138（2025 年 3 月 31 日〜）で段階的に展開開始
  • Firefox 140 ですべてのプラットフォームに完全展開予定
  • Firefox 136 以降はコンソール警告を表示中
  • テスト方法：about でlayout.css.h1-in-section-ua-styles.enabledを false に設定

#Chrome

  • バージョン 136 以降、Chrome はデフォルトの小さいフォントサイズを使用している 4 つの要素内の<h1>に対して非推奨警告を表示。
  • Chromium で非推奨としてマークすると、「ベストプラクティス」の Lighthouse スコアが下がる。

#Safari

  • Safari でのこれらの変更を追跡する実装バグはまだないが、WebKit も同様の更新に追随すると予想される。

#Lighthouse 警告の修正方法

Lighthouse には、<section>、<article>、<nav>、<aside>内の<h1>要素にfont-sizeを指定していないサイトに対するチェックが追加された。新しいルールはH1UserAgentFontSizeInSectionと呼ばれ、3 月以降に非推奨警告の追加に伴い表示されるようになった。

推奨されるスタイルは以下の通り：

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

または、詳細度が常に 0 になる:where()を使用して：

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

#参考文献

編集