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