שינויים בירושה של 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 Positioned Layout.

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

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