:modal mi?

Bu kullanışlı CSS sözde seçici, modal öğeleri seçmenize olanak tanır.

Jhey Tompkins

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 iki tür öğe :modal olarak sınıflandırılmaktadı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 belirlenmektedir.

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 yöntem, tam ekran modundaki öğelerde de işe yarar. 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 modunda olduğunda kapsamlar animasyonlu hale gelir.

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%);
  }
}