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