Apakah :modal?

Pseudo-pemilih CSS yang praktis ini memberi Anda cara untuk memilih elemen yang bersifat modal.

Jhey Tompkins

Pemilih pseudo yang praktis ini memberi Anda cara untuk memilih elemen yang "modal", dan untuk menghindari pengelolaan class di JavaScript dengan menyediakan cara untuk mendeteksi elemen modal.

Dukungan Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

Sumber

Saat ini, ada dua jenis elemen yang diklasifikasikan sebagai :modal:

  • Elemen dialog menggunakan metode showModal.
  • Elemen yang berada dalam mode layar penuh.

Bagaimana cara menggunakannya? Contoh ini menetapkan skala semua elemen <dialog> yang merupakan :modal.

dialog:modal {
 scale: 2;
}

Pertimbangkan demo ini tempat Anda dapat menampilkan <dialog> dalam gaya "modal" atau "non-modal".

Saat Anda menampilkan versi "modal", versi tersebut akan menggunakan ::backdrop yang disediakan oleh lapisan teratas.

dialog::backdrop {
 background: hsl(0 0% 10% / 0.5);
}

Namun, untuk versi non-modal yang tidak memiliki ::backdrop, versi palsu akan dibuat dengan elemen pseudo ::before. Lebih ringan dan tidak memburamkan konten di belakangnya. Anda dapat menggabungkan dengan :not untuk mendeteksi <dialog> non-modal.

dialog[open]:not(:modal)::before {
  content: "";
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  background: hsl(0 0% 10% / 0.25);
  transform: translate3d(-50%, -50%, -1px);
}

Hal ini juga akan berfungsi untuk elemen yang berada dalam mode layar penuh. Pertimbangkan elemen judul ini yang terbuat dari span.

<header>
  <h1>
    <span style="--index: 0;">:</span>
    <span style="--index: 1;">m</span>
    <span style="--index: 2;">o</span>
    <span style="--index: 3;">d</span>
    <span style="--index: 4;">a</span>
    <span style="--index: 5;">l</span>
 </h1>
</header>

Saat elemen dalam mode layar penuh, span akan dianimasikan.

h1 span {
 animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
  --speed: 0.75;
}
@keyframes jump {
  50% {
    transform: translateY(-50%);
  }
}