:modal mi?

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.

Tarayıcı desteği

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

Kaynak

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