::backdrop の履歴
Fullscreen API では、トップレベルのレイヤや ::backdrop 要素など、新しいコンセプトが導入されました。
- 最上位レイヤは、ビューポート内でユーザーに最も近い場所にレンダリングされる新しいスタッキング レイヤです。ビューポートのサイズで、他のすべてのレイヤの上に表示されます。
::backdropCSS 疑似要素はビューポートのサイズのボックスで、最上位レイヤに表示される要素の直下にレンダリングされます。
::backdrop の元の仕様には次のような機能があります。
どの要素からも継承されず、継承されることもありません。
これは ::backdrop のスタイル設定を分離するうえで役立ちましたが、:root で宣言されたカスタム プロパティに ::backdrop がアクセスできないことも意味していました。そのため、ウェブ デベロッパーの間で混乱が生じました。
回避策として、::backdrop と :root でカスタム プロパティを明示的に宣言して使用できるようにする必要がありました。
/* Pre-Chrome 122 */
:root, ::backdrop {
--back-color: #333;
}
::backdrop {
background-color: var(--back-color);
}
::backdrop のアップデート
::backdrop の問題を修正するために、CSS ワーキング グループはこれらのコンセプトを導入し、CSS 配置レイアウト仕様に規定しました。
新しい仕様への移行に伴い、定義も改良されています。
ウェブ デベロッパーに直接影響する改良の 1 つは、::backdrop 要素がツリー永続要素になったことです。つまり、元の要素から継承可能なプロパティを継承します。
対応ブラウザ
- 122
- 122
- 120
- 17.4
この変更により、特定の要素のカスタム プロパティ値をオーバーライドできるようになり、::backdrop がそれらの値にアクセスできるようになります。たとえば、開いている <dialog> 要素に関連付けられた ::backdrop は、その <dialog> で使用可能なカスタム プロパティにアクセスできるようになります。
/* Chrome 122 and up */
:root {
--backdrop-color: #333; /* Any ::backdrop can access this custom property */
}
dialog {
--backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}
::backdrop {
background-color: var(--backdrop-color);
}
::backdrop が --backdrop-color 変数にアクセスし、それを使用して背景の色を設定できます。