هل هو :مشروط؟

تمنحك أداة الاختيار الزائفة هذه لتنسيق CSS طريقة لاختيار العناصر التي تكون في وضع النافذة المنبثقة.

يمنحك هذا المحدّد الوهمي المفيد طريقة لاختيار العناصر "المعروضة في نافذة منبثقة"، وتجنُّب إدارة الفئات في JavaScript من خلال توفير طريقة لرصد العناصر المعروضة في نافذة منبثقة.

توافق المتصفّح

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

المصدر

يتم حاليًا تصنيف نوعَين من العناصر على أنّهما :modal:

  • عناصر المحادثة باستخدام الطريقة showModal
  • العناصر التي تظهر في وضع ملء الشاشة

كيف يمكنك استخدامها؟ يحدِّد هذا المثال مقياس جميع عناصر <dialog> التي تكون :modal.

dialog:modal {
 scale: 2;
}

راجِع هذا العرض التقديمي الذي يمكنك من خلاله عرض <dialog> بأسلوب "متعدّد النوافذ" أو "غير متعدّد النوافذ".

عند عرض الإصدار "المتعدّد النوافذ"، يتم استخدام ::backdrop المقدَّمة من الطبقة العليا.

dialog::backdrop {
 background: hsl(0 0% 10% / 0.5);
}

أمّا بالنسبة إلى الإصدار غير المعروض في نافذة منبثقة والذي لا يحتوي على ::backdrop، فيتم إنشاء عنصر مزيّف باستخدام العنصر النائب ::before. وهو أخف وزنًا ولا يؤدي إلى تمويه المحتوى الذي يظهر خلفه. يمكنك دمج :not لرصد <dialog> غير مشروط.

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

وسيعمل هذا الإجراء أيضًا مع العناصر التي تظهر في وضع ملء الشاشة. فكِّر في عنصر العنوان هذا المكوّن من أقسام.

<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>

عندما يكون العنصر في وضع ملء الشاشة، ستظهر الأقسام متحركة.

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