CSS ::backdrop の継承に関する変更

Bramus

::backdrop の履歴

Fullscreen API には、トップレイヤや ::backdrop 要素などの新しいコンセプトが導入されました。

• トップレイヤは、ビューポート内でユーザーに最も近い位置にレンダリングされる新しいスタッキング レイヤです。ビューポートのサイズで、他のすべてのレイヤの上に表示されます。
• ::backdrop CSS 疑似要素は、ビューポートと同じサイズのボックスで、最上位レイヤに表示される要素のすぐ下にレンダリングされます。

::backdrop の元の仕様の特徴の 1 つは次のとおりです。

どの要素からも継承されず、どの要素からも継承されません。

これは ::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 要素がツリーに準拠する要素になったことです。つまり、::backdrop 要素は、元の要素から継承可能なプロパティを継承します。

この変更により、特定の要素のカスタム プロパティ値をオーバーライドできるようになり、::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);
}