שימוש במגוון סגנונות לשימוש חוזר.
גיליונות סגנונות ניתנים לבנייה הם דרך ליצור ולהפיץ סגנונות לשימוש חוזר כשמשתמשים ב-Shadow DOM.
תמיד הייתה אפשרות ליצור גיליונות סגנונות באמצעות JavaScript. עם זאת, בעבר התהליך היה יצירת רכיב <style> באמצעות document.createElement('style'), ואז גישה למאפיין הגיליון שלו כדי לקבל הפניה למכונה הבסיסית של CSSStyleSheet. השיטה הזו יכולה לייצר קוד CSS כפול וכמות גדולה של נתונים נלווים. כמו כן, הצירוף יוביל להבהוב של תוכן ללא עיצוב, גם אם יש תפיחה וגם אם לא. ממשק CSSStyleSheet הוא הבסיס של אוסף של ממשקי ייצוג CSS שנקראים CSSOM, ומציע דרך פרוגרמטית לשנות גיליונות סגנונות וגם לבטל בעיות הקשורות לשיטה הישנה.
גיליונות סגנונות מבניים מאפשרים להגדיר ולהכין סגנונות CSS משותפים, ולאחר מכן להחיל את הסגנונות האלה בקלות וללא כפילויות על כמה שורשים של Shadow Root או על המסמך. עדכונים בגיליון CSSStyleSheet משותפים חלים על כל רמות הבסיס שבהן הוא הוטמע, ושימוש בגיליון סגנון הוא מהיר וסינכרוני אחרי שהגיליון נטען.
השיוך שהוגדר על ידי Constructable Stylesheets מתאים היטב למספר אפליקציות שונות. אפשר להשתמש בו כדי ליצור עיצוב מרוכז שנעשה בו שימוש ברכיבים רבים: העיצוב יכול להיות מכונה של CSSStyleSheet שמועברת לרכיבים, והעדכונים של העיצוב מופצים לרכיבים באופן אוטומטי. אפשר להשתמש בו כדי להפיץ את הערכים של מאפיין מותאם אישית של CSS לתתי משנה ספציפיים של DOM בלי להסתמך על הדירוג. אפשר אפילו להשתמש בו כממשק ישיר למנתח ה-CSS של הדפדפן, כדי להקל על הטעינה מראש של גיליונות סגנונות בלי להחדיר אותם ל-DOM.
בניית גיליון סגנונות
במקום להשיק API חדש כדי לעשות זאת, המפרט של Buildable StyleSheets מאפשר לכם ליצור גיליונות סגנונות באופן חיוני על ידי הפעלה של ה-constructor של CSSStyleSheet(). באובייקט CSSStyleSheet שנוצר יש שתי שיטות חדשות, שמאפשרות להוסיף ולעדכן כללים של גיליון סגנונות באופן בטוח יותר בלי להפעיל Flash של תוכן ללא סגנון (FOUC).
השיטות replace() ו-replaceSync() מחליפות את גיליון הסגנונות במחרוזת של CSS, וגם replace() מחזירה הבטחה. בשני המקרים אין תמיכה בהפניות חיצוניות לגיליון סגנונות - המערכת מתעלמת מכל הכללים של @import ותוצג אזהרה.
const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// replace all styles:
sheet.replace('a { color: blue; }')
.then(() => {
console.log('Styles replaced');
})
.catch(err => {
console.error('Failed to replace styles:', err);
});
// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."
שימוש בגיליונות סגנונות שנוצרו
התכונה החדשה השנייה שהוצגה ב-Constructable StyleSheets היא מאפיין מסוג adoptedStyleSheets שזמין ב-Shadow Roots וב-Documents. כך אפשר להחיל באופן מפורש את הסגנונות שהוגדרו על ידי CSSStyleSheet על עץ משנה נתון של DOM. כדי לעשות זאת, נגדיר את הנכס למערך של גיליון סגנונות אחד או יותר שיחול על הרכיב הזה.
// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');
// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);
// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);
סיכום של כל המידע
באמצעות Constructable StyleSheets, למפתחי אינטרנט יש עכשיו פתרון מפורש ליצירת StyleSheets ב-CSS ולהחלתם על עצי DOM. יש לנו ממשק API חדש שמבוסס על Promise לטעינת StyleSheets ממחרוזת של מקור CSS, המשתמשת במנתח המובנה ובסמנטיקה לטעינה של הדפדפן. לבסוף, יש לנו מנגנון להחלת עדכונים של גיליון סגנונות על כל השימושים בגיליון סגנונות, כדי לפשט דברים כמו שינויי עיצוב והעדפות צבע.
במבט קדימה
הגרסה הראשונית של Constructable Stylesheets נשלחה יחד עם ה-API שמתואר כאן, אבל אנחנו עדיין עובדים על זה כדי להקל על השימוש. יש הצעה להרחיב את adoptedStyleSheets FrozenArray באמצעות שיטות ייעודיות להוספה ולהסרה של גיליונות סגנונות, כדי למנוע את הצורך בשכפול מערכים ולמנוע הפניות פוטנציאליות כפולות של סגנונות.