האם מדובר ב: :modal?

פסאודו-בורר השימושי הזה ב-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, נוצר ::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);
}

אפשרות זו פועלת גם ברכיבים במצב מסך מלא. רכיב הכותרת הזה מורכב מ-spans.

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

כשהרכיב נמצא במצב מסך מלא, ה-span יופיעו אנימציה.

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