ההיסטוריה של ::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
הוא עכשיו רכיב שנשמר בעץ, כלומר הוא יורש את כל המאפיינים שעוברים בירושה מהרכיב המקור שלו.
תמיכה בדפדפנים
בעקבות השינוי הזה, אפשר לשנות את ערכי המאפיינים המותאמים אישית ברכיבים ספציפיים, ול-::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);
}
::backdrop
יש גישה למשתנה --backdrop-color
והוא יכול להשתמש בו כדי לצבוע את הרקע שלו.