Pemilih semu CSS yang praktis ini memberi Anda cara untuk memilih elemen yang merupakan modal.
Pemilih semu yang praktis ini memberi Anda cara untuk memilih elemen yang merupakan "modal", dan untuk menghindari pengelolaan class di JavaScript dengan menyediakan cara untuk mendeteksi elemen modal.
Dua jenis elemen saat ini 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 bernilai :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 atas.
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);
}
Ini juga akan berfungsi untuk elemen yang juga berada dalam mode layar penuh. Pertimbangkan elemen heading 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 berada 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%);
}
}
Bagian dari Seri yang baru memiliki interoperabilitas