≪ Today I learned. RSS購読
公開日
タグ
HTML , CSS
著者
ダーシノ

dialog要素に::backdrop擬似要素が使えるようになった

Safari 15.4がdialog要素::backdrop疑似要素をサポートし、全モダンブラウザで利用可能になった。

dialog.style.display = "none"dialog.style.display = "block" のようなスタイルの変更を行わずに、ダイアログの背景を制御できるようになった。

<dialog id="confirm-dialog">
   ...
</dialog>
dialog::backdrop {
  /* マスクの背景色 */
  background-color: rgba(0, 0, 0, .3);
}
const dialog = document.querySelector('#confirm-dialog')

dialog.showModal()
dialog.close()