يمنحك محدد CSS الزائف المفيد هذا طريقة لاختيار العناصر التي تكون مشروطة.
يمنحك هذا المحدد الزائف المفيد طريقةً لاختيار العناصر "المشروطة"، ولتجنب إدارة الفئات في JavaScript من خلال توفير طريقة لاكتشاف العناصر المشروطة.
يتم تصنيف نوعين من العناصر حاليًا كـ :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%);
}
}