backdrop疑似セレクタについてメモ

`::backdrop`って何？

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

::backdrop - CSS: カスケーディングスタイルシート | MDN developer.mozilla.org

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

つまり、特定の要素が全画面モードになったときにスタイルを当てたいとき、::backdrop疑似要素を使用すればいいらしい。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button type="button" class="btn">ダイアログを開く</button>
    <dialog class="dialog">
      <button type="button" class="close">ダイアログを閉じる</button>
      <secton>
        <h1>ダイアログです</h1>
        <p>これはダイアログです</p>
      </section>
    </dialog>
    <script type="module" src="main.js"></script>
  </body>
</html>

:where(.dialog)::backdrop {
  background-color: #db2626;
  opacity: 0.5;
}

const openDialogButton = document.querySelector('.btn');
const closeDialogButton = document.querySelector('.close');
const dialog = document.querySelector('.dialog');

openDialogButton.addEventListener('click', () => {
  dialog.showModal();
});

closeDialogButton.addEventListener('click', () => {
  dialog.close();
});

この部分のshowModal()をshow()に変更してもダイアログは表示されるが、表示されるのはモーダルではないので::backdrop疑似要素が適用されない。

openDialogButton.addEventListener('click', () => {
  dialog.showModal()
})

デモ

::backdrop疑似セレクタのデモ - StackBlitz stackblitz.com

HTML/CSS/JS Starter

参考

::backdrop - CSS: カスケーディングスタイルシート | MDN developer.mozilla.org

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

backdrop疑似セレクタについてメモ

::backdropって何？

サンプルコード

デモ

参考

`::backdrop`って何？