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

Bramus

ההיסטוריה של ::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);
}

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