השכבה העליונה ממוקמת מעל document
הקשור אליה בחלון התצוגה בדפדפן, וכל document
משויך לשכבה עליונה אחת. המשמעות היא שרכיבים שקודמו לשכבה העליונה לא צריכים לדאוג לגבי z-index
או היררכיית DOM. הם מקבלים גם רכיב פסאודו-רכיב ::backdrop
מגניב לשחק איתו. במפרט של Fullscreen API מפורטים פרטים נוספים, כי Fullscreen היה דוגמה מצוינת לשכבה העליונה שבשימוש לפני הופעת התמיכה ב-dialog
.
השכבה העליונה עוזרת לפתור את הבעיה של רינדור התוכן מעל שאר החלקים של document
.
חשוב לזכור:
- השכבה העליונה נמצאת מחוץ לתהליך document
.
- ל-z-index
אין השפעה בשכבה העליונה.
- לכל אלמנט בשכבה העליונה יש פסאודו-אלמנט ::backdrop
שניתן לעיצוב.
- כל רכיב ו-::backdrop
יוצרים הקשר חדש של סטאקינג.
- הרכיבים בשכבה העליונה נערמים לפי הסדר שבו הם מופיעים בקבוצה. הסימון האחרון בכיתוב מופיע למעלה. אם רוצים לקדם רכיב, מסירים אותו ומוסיפים אותו שוב.
איך חיקינו את השכבה העליונה עד עכשיו? לא נדיר לראות מפתחים שמוסיפים רכיב מאגר ריק בסוף ה-body
. לאחר מכן, המערכת תשתמש בתמונה הזו כשכבה עליונה 'מזויפת'. הרעיון הוא שהקונטיינר הזה ממוקם מעל כל שאר הרכיבים בסטאק. אם רוצים לקדם משהו מעל כל שאר הפריטים, צריך לצרף אותו למאגר הזה. אפשר לראות את זה בחבילות פופולריות כמו SweetAlert, reactjs-popup, Magnific Popup ועוד.
בעזרת רכיבים מובנים חדשים וממשקי API כמו <dialog>
ו-'חלון קופץ', לא תצטרכו להשתמש בפתרונות הזמניים האלה. אתם יכולים לקדם תוכן לשכבה העליונה.
מסגרות ממשק משתמש מאפשרות לנו למקם אלמנטים לקידום לצד רכיבי הצד השני שלהם. עם זאת, לרוב הם מופרדים ב-DOM כשמדובר ברינדור.
כשמשתמשים בשכבה העליונה, הרכיבים שמקודמים נמצאים במקום שבו שמתם אותם בקוד המקור (לדוגמה, <dialog>
). לא משנה כמה שכבות למטה נמצא הרכיב ב-DOM. הוא יועבר לשכבה העליונה ותוכלו לבדוק אותו במקום שבו הוא אמור להיות, לצד ה-HTML של הרכיב. כך קל יותר לבדוק בו-זמנית את רכיב הטריגר ואת הרכיב ששודרג ב-DOM. שימושי במיוחד אם רכיב הטריגר מבצע עדכוני מאפיינים, למשל. יש לכך גם יתרון נוסף לגבי הנגישות, עכשיו שהרכיבים נמצאים באותו מיקום.
כדי להמחיש את השכבה העליונה לעומת הגבוהה של z-index
, נבחן את ההדגמה הזו.
בדמו הזה אפשר לפתוח חלון קופץ של SweetAlert וגם לפתוח שכבה עליונה <dialog>
. פותחים את <dialog>
ומנסים לפתוח את החלון הקופץ של SweetAlert. הוא יופיע מתחת לרכיב השכבה העליונה. בנוסף, בשורש של חלון הקופץ של SweetAlert נעשה שימוש ב-z-index
של 10000 עם position: fixed
.
.swal-overlay {
z-index: 10000;
position: fixed;
}
אין צורך להחיל סגנונות על <dialog>
כדי להופיע מעל כל תוכן אחר.
כלי פיתוח
עכשיו נדבר על התמיכה ב-DevTools. נוספה תמיכה ברכיבים של השכבה העליונה לכלי הפיתוח של Chrome, כדי שתוכלו לבדוק את השכבה העליונה. כך קל יותר לנפות באגים ולהציג נתונים באופן ויזואלי בשכבה העליונה או אפילו בשכבה העליונה.
Alina Varkki כתבה מאמר מעולה שמסביר בהרחבה איך משתמשים בכלים האלה. הן זמינות כרגע כתכונה בגרסת טרום-השקה (Preview) של Chrome Canary בגרסה 105.
זהו!
מבוא קצר לשכבה העליונה. כך תוכלו לומר "ביי" לדברים כמו:
.popup-container {
z-index: 10000;
}
מה תרצו לדחוף לשכבה העליונה? ניסית את dialog
? או בדקתם את OpenUI Popover API? שלח לנו הודעה!