::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 の寸法のボックスです。

試してみましょう

button {
  font-size: 1.2rem;
  padding: 5px 15px;
}

dialog::backdrop {
  background-color: salmon;
}

<button id="showDialogBtn">Show a dialog</button>

<dialog id="favDialog">
  <form method="dialog">
    <p>The background shown outside of this dialog is a backdrop.</p>
    <button id="confirmBtn">Close the dialog</button>
  </form>
</dialog>

const showDialogBtn = document.getElementById("showDialogBtn");
const favDialog = document.getElementById("favDialog");

showDialogBtn.addEventListener("click", () => favDialog.showModal());

構文

css

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

説明

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

Fullscreen API の Element.requestFullscreen() メソッドを使用した全画面モードに配置される要素
HTMLDialogElement.showModal() の呼び出しにより最上位レイヤーで表示される <dialog> 要素
HTMLElement.showPopover() の呼び出しにより最上位レイヤーで表示される Popover の要素

全画面モードで複数の要素が配置されたときは、それぞれに自身の ::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() メソッドを使用して閉じます。

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