פסאודו-בורר שימושי זה של CSS מאפשר לכם לבחור רכיבים מותאמים אישית.
פסאודו-בורר שימושי זה מאפשר לכם לבחור רכיבים 'מודאליים', ומאפשר לכם לזהות רכיבי חלון מודאליים כדי להימנע מניהול מחלקות ב-JavaScript.
שני סוגי רכיבים מסווגים כרגע כ-:modal:
- רכיבים של תיבת דו-שיח המשתמשים בשיטה
showModal. - רכיבים שנמצאים במצב מסך מלא.
איך משתמשים בה? בדוגמה הזו מוגדרת קנה המידה של כל רכיבי <dialog> שהם :modal.
dialog:modal {
scale: 2;
}
כדאי לעיין בהדגמה הזו, שבה אפשר להציג <dialog> בסגנונות "מודאליים" או "לא מודאליים".
כשמציגים את גרסת ה-modal, המערכת משתמשת ב-::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);
}
התכונה הזו פועלת גם ברכיבים שנמצאים במצב מסך מלא. למשל, רכיב הכותרת הזה עשוי מ-span.
<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%);
}
}