Bu kullanışlı CSS sözde seçici, modal öğeleri seçmenize olanak tanır.
Bu kullanışlı sözde seçici, "modal" öğeleri seçmenize ve modal öğeleri algılamanızı sağlayarak JavaScript'te sınıfları yönetmekten kaçınmanıza olanak tanır.
Şu anda :modal
olarak sınıflandırılan iki öğe türü vardır:
showModal
yöntemini kullanan iletişim öğeleri.- Tam ekran modundaki öğeler.
Bu özelliği nasıl kullanabilirsiniz? Bu örnekte, :modal
olan tüm <dialog>
öğelerinin ölçeği ayarlanır.
dialog:modal {
scale: 2;
}
<dialog>
öğesini "modal" veya "modal olmayan" stillerde gösterebileceğiniz bu demoyu inceleyin.
"Modal" 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 ::backdrop
içermeyen modal olmayan sürüm için ::before
sözde öğesiyle sahte bir öğe oluşturulur. Daha açıktır ve arkasındaki içeriği bulanıklaştırmaz. Modal 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 geçerlidir. Aşağıdaki, span'lardan oluşan başlık öğesine göz atı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ıklar animasyonlu olur.
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%);
}
}