Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を推奨。
セレクター Widely available

:modal pseudo-class

:modal はモーダル状態の要素（dialog.showModal() で開いた dialog やフルスクリーンAPI使用中の要素）にマッチする。show() で開いた非モーダルダイアログとモーダルダイアログを区別してスタイリングできる。

セレクターダイアログ

概要

:modal はモーダル状態の要素（dialog.showModal() で開いた dialog やフルスクリーンAPI使用中の要素）にマッチする。show() で開いた非モーダルダイアログとモーダルダイアログを区別してスタイリングできる。

対応ブラウザ

デスクトップ

Chrome 105+
Edge 105+
Safari 15.6+
Firefox 103+

モバイル

Chrome Android 105+
Safari iOS 15.6+
Firefox Android 103+

基本構文

CSS 
dialog:modal {
  border: none;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 480px;
}

dialog:modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

実務での使いどころ

  • モーダルダイアログのスタイリング

    showModal() で開かれたダイアログにのみ特別なスタイルを適用。

  • フルスクリーン要素の装飾

    フルスクリーンモードの動画プレーヤーにカスタムスタイルを適用。

注意点

  • show() で開いた非モーダルダイアログにはマッチしない。
  • dialog 要素のネイティブ対応を前提とする。

アクセシビリティ

  • モーダルダイアログには適切な aria-label または aria-labelledby を設定する。
  • Escape キーでの閉じる操作を妨げないようにする。

参考リンク