שינויים בירושה של CSS ::backdrop

Fullscreen API הציג מושגים חדשים כמו השכבה העליונה והרכיב ::backdrop.

  • השכבה העליונה היא שכבת סטאקינג חדשה שמוצגת קרוב ככל האפשר למשתמש באזור התצוגה. הוא בגודל שדה התצוגה ומופיע מעל כל השכבות האחרות.
  • רכיב ה-CSS ::backdrop הוא תיבה בגודל אזור התצוגה, שמעובדת מתחת לכל רכיב שמוצג בשכבה העליונה.

אחת מהתכונות של המפרט המקורי של ::backdrop הייתה:

הוא לא עובר בירושה מאף רכיב ולא עובר בירושה מרכיב כלשהו.

אמנם זה היה שימושי כדי לבודד את הסגנון של ::backdrop, אבל זה גם אומר של-::backdrop לא הייתה גישה לאף אחד מהנכסים המותאמים אישית שהוגדרו ב-:root. המצב הזה גרם לבלבול בקרב מפתחי אתרים.

כפתרון עקיף, צריך להצהיר באופן מפורש על המאפיינים המותאמים אישית ב-::backdrop וגם ב-:root כדי שהם יהיו זמינים:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

עדכון לגבי ::backdrop

כדי לפתור את הבעיות ב-::backdrop, קבוצת העבודה בנושא CSS אימצה את המושגים האלה ועכשיו ציינה אותם במפרט של CSS Positioned Layout.

בנוסף להעברת ההגדרות למפרט חדש, הן שופרו.

שיפור אחד שיש לו השפעה ישירה על מפתחי אתרים הוא שרכיב ::backdrop הוא עכשיו רכיב שנשמר בעץ, כלומר הוא יורש את כל המאפיינים שעוברים בירושה מהרכיב המקור שלו.

תמיכה בדפדפנים

  • Chrome: ‏ 122.
  • Edge: ‏ 122.
  • Firefox: ‏ 120.
  • Safari: 17.4.

בעקבות השינוי הזה, אפשר לשנות את ערכי המאפיינים המותאמים אישית ברכיבים ספציפיים, ול-::backdrop תהיה גישה אליהם. לדוגמה, ל-::backdrop שמשויך לרכיב <dialog> פתוח יש עכשיו גישה למאפיינים המותאמים אישית שזמינים ב-<dialog> הזה.

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}
דוגמה עם <dialog> שנפתח בשכבה העליונה. בגרסה 122 ואילך של Chrome, ל-::backdrop יש גישה למשתנה --backdrop-color והוא יכול להשתמש בו כדי לצבוע את הרקע שלו.