هل هو :مشروط؟

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

Jhey Tompkins

يمنحك هذا المحدّد الوهمي المفيد طريقة لاختيار العناصر "المعروضة في نافذة منبثقة"، وتجنُّب إدارة الفئات في 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%);
  }
}