::backdrop

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

CSS::backdrop 擬似要素は、何らかの要素が全画面モード (top layer) で表示される直下に直接表示される viewport の寸法のボックスです。

試してみましょう

構文

css
::backdrop {
  /* ... */
}

説明

Backdrop は以下の状況で現れます。

全画面モードで複数の要素が配置されたときは、それぞれに自身の ::backdrop 疑似要素があります。

css
/* backdrop はダイアログが dialog.showModal() で開いている時のみ表示されます */
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}

すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。::backdrop 擬似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。

::backdrop 擬似要素はどの要素にも継承せず、どの要素からも継承しません。この擬似要素に適用するプロパティの制限はありません。

モーダルダイアログの backdrop のスタイル付け

この例では、::backdrop 擬似要素を使用して、モーダルで <dialog> が開いているときの backdrop をスタイル付けします。

HTML

<button> を設置し、それをクリックすると <dialog> が開くようにします。<dialog> が開いたら、ダイアログを閉じるためのボタンにフォーカスが当たります。

html
<dialog>
  <button autofocus>閉じる</button>
  <p>このモーダルダイアログには美しい backdrop があります!</p>
</dialog>
<button>ダイアログを表示する</button>

CSS

CSS グラデーションを使用してカラフルなドーナツを作成し、backdrop に背景を追加します。

css
::backdrop {
  background-image:
    radial-gradient(
      circle,
      #fff 0 5vw,
      transparent 5vw 20vw,
      #fff 20vw 22.5vw,
      #eee 22.5vw
    ),
    conic-gradient(
      #272b66 0 50grad,
      #2d559f 50grad 100grad,
      #9ac147 100grad 150grad,
      #639b47 150grad 200grad,
      #e1e23b 200grad 250grad,
      #f7941e 250grad 300grad,
      #662a6c 300grad 350grad,
      #9a1d34 350grad 400grad,
      #43a1cd 100grad 150grad,
      #ba3e2e
    );
}

JavaScript

ダイアログを .showModal() メソッドを使用してモーダルで開き、.close() メソッドを使用して閉じます。

js
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// 「ダイアログを表示する」ボタンでダイアログをモーダルで開く
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// 「閉じる」ボタンでダイアログを閉じる
closeButton.addEventListener("click", () => {
  dialog.close();
});

結果

仕様書

Specification
CSS Positioned Layout Module Level 4
# backdrop

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::backdrop
Support on dialog elements
Fullscreen support
Backdrop elements inherit their values from its originating element
Support on popovers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報