CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方

サイト構築 -CSS

Post on:2024年2月29日

これまでの::backdrop疑似要素

フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑似要素といった新しいコンセプトが導入されました。

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

さらに詳しくは、先日の記事をご覧ください。

CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方

::backdrop疑似要素の元の仕様にある特徴の一つは、次のようなものでした。

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

この仕様は::backdrop疑似要素のスタイルを分離するのには便利でしたが、::backdrop疑似要素が:rootで宣言されたカスタムプロパティにアクセスできないことも意味しました。このため、デベロッパーの間で混乱が生じました。

回避策として、カスタムプロパティを:rootだけでなく、::backdropにも明示的に宣言して利用可能にする必要がありました。

/* Chrome 121以前 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

/* Chrome 121以前 */

:root, ::backdrop {

--back-color: #333;

}

::backdrop {

background-color: var(--back-color);

}

アップデートされた::backdrop疑似要素

::backdrop疑似要素のこの問題を解決するために、CSS Working Groupはこれらのコンセプトを採用し、CSS Positioned Layout Module Level 4に明記しました。

定義を新しい仕様に移行するとともに、定義自体もアップデートされました。

デベロッパーに直接的な影響を与えるアップデートは、::backdrop疑似要素がツリー永続要素になり、元の要素から継承可能なプロパティをすべて継承することです。

この変更はChrome 122でサポートされ、特定の要素のカスタムプロパティ値を上書きすることが可能になり、::backdrop疑似要素はそのプロパティにアクセスできるようになりました。たとえば、開いている<dialog>要素に関連付けられた::backdrop疑似要素は、その<dialog>要素で使用可能なカスタムプロパティにアクセスできるようになりました。

/* Chrome 122以降 */
:root {
  --backdrop-color: #333; /* あらゆる::backdropがアクセスできるカスタムプロパティ */
}

dialog {
  --backdrop-color: #6300ff33; /* dialogの::backdropがアクセスできるカスタムプロパティ */
}

::backdrop {
  background-color: var(--backdrop-color);
}