このページは Cloud Translation API によって翻訳されました。

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);
}

最上位レイヤで <ダイアログ> を開くデモ。Chrome 122 以降では、::backdrop は --backdrop-color 変数にアクセスして使用し、背景に色を付けることができます。

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

::backdrop の履歴

::backdrop の更新

`::backdrop` の履歴

`::backdrop` の更新