display:contents; の挙動を確認してみる
目次
概要
CSSの display: contents; についての挙動をイマイチ理解できていなかったので検証してみた。
display: contents; とは
MDN からの引用
これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、
contentsの値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。
何を言ってるか分からないですね。
デモ
解釈
Chrome最新版（v130）で確認
- 開発者ツールで
.contentsクラスの付け外しをしながらボックスモデルを見ると分かりやすいが、display: contents;はレイアウト上では自身のコンテンツエリアをなくしたようにみなす display: grid;の子要素としてdisplay: contents;を指定すると、さらにその子要素がgridの子要素として扱われる<button>要素にdisplay: contents;を指定すると、キーボードフォーカスされない要素になる
所感など
- 以前から
display: contents;にはアクセシビリティ上の問題（留意点）が多くあるとされている。- MDN に記載があるようなアクセシビリティツリーから要素を削除するようなことはなかった（Chrome v130）
- 他ブラウザや各スクリーンリーダー依存でこのような問題が残っている可能性はあり
- Display: Contents Is Not a CSS Reset — Adrian Roselli でも支援技術による動作検証を行ってから
display: contents;を使うことを推奨している。2024年9月の更新でも「フォーカスを取得できるものやインタラクティブなもの、より豊富なセマンティクスを持つもの （表、リスト、見出しなど）には使用しないこと」としている
- ウェブコンポーネントに対しては
display: contents;には使用しても問題ない認識