שמות CSS שהוגדרו על ידי המחבר ו-DOM של צל: במפרט ובפועל

Noam Rosenthal

שמות CSS שהוגדרו על ידי המחבר ו-DOM של הצללית אמורים לפעול יחד. עם זאת, הדפדפנים אינם תואמים למפרט, לפעמים עם אחר, וכל שם של שירות CSS לא עקבי בצורה קצת שונה.

במאמר הזה אנחנו מתעדים את הסטטוס הנוכחי של אופן הפעולה של שמות CSS שהוגדרו על ידי המחבר את כל היקפי הצלליות, בתקווה שהיא תוכל לשמש כקו מנחה לשיפור ביכולת הפעולה ההדדית בעתיד הקרוב.

מהם שמות CSS שהוגדרו על ידי המחבר?

שמות CSS שהוגדרו על ידי המחבר הם מנגנון תחביר CSS ישן יחסית, שבמקור נוסף לכלל @keyframes, שמגדיר <keyframe-name> כך מזהה מותאם אישית או מחרוזת. מטרת הקונספט הזה היא להצהיר משהו בחלק אחד של גיליון סגנונות, ולהפנות אליו בחלק אחר.

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

תכונות CSS אחרות שמשתמשות בשמות CSS הן גופנים, הצהרות מאפיינים, שאילתות קונטיינרים, ולאחרונה הצגת מעברים, מיקום עוגן ואנימציות שמונעות גלילה. הטבלה הלא-מקיפה הבאה כוללת שמות ש-Chrome בודק את המצב שלו.

כמו שאפשר לראות בטבלה, בדרך כלל לשם של שירות CSS יש שירות CSS תואם. הפניה. לדוגמה, animation-name הוא הפניה אל @keyframes שם. שמות CSS שונים משמות שמוגדרים ב-DOM, כמו מאפיינים ושמות של תגים, כפי שהם מוצהרים ואז מפנים אליהם בהקשר של גיליונות סגנונות.

מה הקשר בין שמות ל-DOM של הצללה

שמות CSS נוצרים כדי ליצור קשרים בין חלקים שונים של מסמך או גיליון סגנונות, Shadow DOM הוא שנועד לעשות את ההפך. הוא כולל את הקשרים כדי שלא דלפו בכל רכיבי אינטרנט שאמורים להיות בעלי מרחב שמות משלהם.

החיבור בין שמות CSS ו-DOM של הצללים יוצר את חוויית ההרכבת רכיבי אינטרנט אמורים להרגיש מספיק אקספרסיביים כדי להיות גמישים אבל מוגבלים מספיק כדי להיות יציבים.

זה טוב בתיאוריה. בפועל, דפדפנים שונים באופן ה-CSS פועלים באופן הדדי עם DOM של צל, שניהם בין מאפיינים בדפדפן, בדפדפנים שונים, בין התכונות למפרט.

איך שמות ו-DOM של הצללות צריכים לפעול יחד

כדי להבין את הבעיה, כדאי להבין איך החלקים האלה של שירות ה-CSS הם אמורים לעבוד יחד בתיאוריה.

הכלל

הכלל הכללי לאופן שבו שמות CSS מתנהגים בעצי צל מוגדר מפרט CSS Scoping Level 1. לסיכום: שם של שירות CSS הוא גלובלי בהיקף שבו הוא מוגדר. כלומר, ניתן לגשת אליו מעצי צל צאצא, אבל לא מאח או אח עצי צל של אבות. שימו לב: הם לא דומים לשמות בפלטפורמת האינטרנט, של מזהי הרכיבים, שנכללים באותו היקף של עץ.

חריגה מהכלל: @property

בשונה משמות CSS אחרים, מאפייני ה-CSS לא מכוסים על ידי DOM של הצללה. במקום זאת, הם האמצעים הנפוצים להעברת פרמטרים בין צללים שונים עצים. זה הופך את מתאר @property מיוחד: הוא אמור להתנהג כמו הצהרה מסוג מסמך גלובלי, מגדיר את אופן הפעולה של נכס בעל שם מסוים. הנכסים צריכים להיות תואמים בין עצי הצל, חוסר התאמה בין הצהרות נכסים יגרום ליצירת תוצאות, לכן צוינו @property הצהרות לכיווץ ולפתרון בהתאם לסדר המסמכים.

איך הכלל צריך לפעול עם ::part

חלקי צלל לחשוף רכיב בתוך עץ צל לעץ ההורה שלו. לאחר מכן, עץ ההורה יכול לגשת לאלמנט הזה וגם לעצב אותו באמצעות ::part לרכיב מסוים.

מכיוון ש-::part מאפשר לשני היקפי עצים לעצב את אותו רכיב, התנאים הבאים צוין סדר מדורג:

1. קודם כל, יש לבדוק את הסגנון בתוך ההקשר של הצללית. זוהי "ברירת המחדל", הסגנון של החלק.
2. לאחר מכן, מחילים את הסגנון החיצוני כפי שהוגדר ב-::part. כאן 'מותאם אישית' הסגנון של החלק.
3. לאחר מכן, צריך להחיל כל סגנון פנימי שהוגדר יחד עם !important. כך רכיב מותאם אישית יכול להצהיר שמאפיין מסוים של מאפיין מסוים אי אפשר להתאים אישית את החלק הזה על ידי ::part.

כלומר, אי אפשר להפנות לשמות מתוך הצללית DOM ::part, כי ::part הוא סגנון ברמת המארח ולא בהיקף צל לדוגמה:

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

איך הכלל צריך לפעול עם סגנונות בתוך השורה

בשונה מ-::part, סגנונות מוטבעים עם המאפיין style, או הגדרה פרוגרמטית של הסגנון באמצעות סקריפט, היקף החשיפה של הרכיב בהיקף של. הסיבה לכך היא שכדי להחיל סגנון על אלמנט שנדרשת אליו גישה לנקודת האחיזה של הרכיב, וכך לשורש הצל עצמו.

איך שמות CSS ו-DOM של הצללים פועלים יחד במציאות

למרות שהכללים הקודמים מוגדרים היטב ועקביים, ולא תמיד משקפות זאת. בפועל, @property פועל באופן שונה מהמפרט באופן עקבי בדפדפנים שונים, וברוב התכונות האחרות יש באגים פתוחים (חלקן עדיין לא הושקו, כך שיש זמן לתקן אותן).

כדי לבדוק ולהדגים איך התכונות האלה עובדות בפועל, יצרנו את הדף הבא: https://css-names-in-the-shadow.glitch.me/. בדף הזה יש כמה מסגרות iframe, כל אחת מהן מתמקדת באחת מהתכונות ובודקת שש תרחישים:

• הפניה חיצונית לשם חיצוני: לא מעורבת DOM שהוסרו. בעבודה.
• אזכור חיצוני של שם פנימי: זה לא אמור לעבוד, כי הוא המשמעות היא שהשם שהוגדר בהקשר הצללית דלף.
• הפניה פנימית לשם חיצוני: זה אמור לעבוד, בתור שמות ברמת העץ עוברים בירושה לשורשי הצל.
• הפניה פנימית לשם פנימי: זה אמור לעבוד, בתור השם של נמצאים באותו היקף.
• הפניה של ::part לשם חיצוני: זה אמור לעבוד, כי גם ה-::part והשם מוצהר באותו היקף.
• הפניה של ::part לשם פנימי: זה לא אמור לעבוד, כי ההיקף החיצוני לא אמורים לקבל ידע על שמות שהוצהרו בתוך ה-DOM של הצל.

@keyframes

כפי שמוגדר במפרט, צריכה להיות לכם אפשרות להפנות לשמות של תמונות מפתח. מתוך שורש הצללית, כל עוד הכלל @keyframes נמצא בישות אב היקף. בפועל, אף דפדפן לא מיישם את ההתנהגות הזו, אפשר להפנות להגדרות רק במסגרת ההיקף שבו הן מוגדרות. צפייה בעיה 10540.

@property

כפי שמוגדר במפרט, כל הצהרה של @property שטוחות להיקף המסמך. עם זאת, היום בכל הדפדפנים ניתן רק הצהרה על @property בהיקף המסמך ו-@property הצהרות ב- המערכת תתעלם משורשי צל.
ראו בעיה 10541.

באגים ספציפיים לדפדפן

התכונות האחרות לא מציגות התנהגות עקבית בכל הדפדפנים:

• @font-face הוא שטוח להיקף הרמה הבסיסית (root) ב-Safari.
• Chromium לא מאפשר לקבל בירושה כללים של @anchor-name ברמה הבסיסית (root) של הצל
• ההיקף של @scroll-timeline-name ו-@view-timeline-name לא נכון ב-::part (גם ב-Chromium).
• אף דפדפן לא מאפשר להצהיר על @font-palette-values ברמה הבסיסית (root) של הצל.
• ניתן להגדיר את view-transition-class בתוך שורש של הצללה (המעבר עצמה מחוץ לשורש הצל).
• Firefox מאפשר ל-::part לגשת לשמות הצללים הפנימיים (שאילתות קונטיינרים, תמונות מפתח).
• Firefox ו-Safari לא מתייחסים ל-@counter-style ברמה הבסיסית (root) של הצל.

לתשומת ליבך: ב-counter-reset, ב-counter-set, ב-counter-increment יש מעט שינויים כללים שונים כי הם שמות מרומזים, וההצהרה על מאפייני CSS ליצור מערכת כללים מוגדרת ונבדקת היטב.

סיכום

החדשות הרעות הן שכשבוחנים את תמונת המצב של המצב הנוכחי של יכולת פעולה הדדית בנוגע לשמות CSS ול-DOM של הצלליות, החוויה לא עקבית באגים. אף אחת מהתכונות שבדקנו כאן לא מתנהגת באופן עקבי בהתאם למפרט. החדשות הטובות הן שהדלתא כדי להבטיח את העקביות של החוויה היא מוגבלת רשימה של באגים ובעיות במפרט. קדימה, נפתור את זה! בינתיים, הסקירה הכללית עשויה לעזור לך לפתור את הבעיה. את חוסר העקביות שמתוארת במאמר הזה.