Bu kullanışlı CSS sözde seçicisi, kalıcı öğeleri seçmenize olanak tanır.
Bu kullanışlı sözde seçici, "kalıcı" öğeleri seçmenize olanak tanır ve kalıcı öğeleri algılamanın bir yolunu sunarak JavaScript'teki sınıfları yönetmekten kaçınmanızı sağlar.
Şu anda iki tür öğe :modal olarak sınıflandırılmış:
showModalyöntemini kullanan iletişim kutusu öğeleri.- Tam ekran modundaki öğeler.
Bunu nasıl kullanabilirsiniz? Bu örnek, :modal olan tüm <dialog> öğelerinin ölçeğini ayarlar.
dialog:modal {
scale: 2;
}
"Kalıcı" veya "kalıcı olmayan" stillerde bir <dialog> gösterebileceğiniz bu demoya göz atın.
"Kalıcı" sürümü gösterdiğinizde üst katman tarafından sağlanan ::backdrop kullanılır.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
Ancak, bir ::backdrop içermeyen modal olmayan sürüm için ::before sözde öğesiyle sahte bir sürüm oluşturulur. Kamera daha hafiftir ve arka planındaki içerikleri bulanıklaştırmaz. Kalıcı olmayan bir <dialog> algılamak için :not ile birleştirebilirsiniz.
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);
}
Bu işlem, tam ekran modundaki öğeler için de kullanılabilir. Aralıklardan oluşan bu başlık öğesini düşünün.
<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>
Öğe tam ekran modundayken aralık animasyonları gösterilir.
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%);
}
}
Yeni birlikte çalışabilirlik serisinin kapsamında