שימוש במגוון סגנונות לשימוש חוזר.
גיליונות סגנונות ניתנים לבנייה הם דרך ליצור ולהפיץ סגנונות לשימוש חוזר כשמשתמשים ב-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);
Putting it all together
With Constructable StyleSheets, web developers now have an explicit solution for
creating CSS StyleSheets and applying them to DOM trees. We have a new
Promise-based API for loading StyleSheets from a string of CSS source that uses
the browser's built-in parser and loading semantics. Finally, we have a
mechanism for applying stylesheet updates to all usages of a StyleSheet,
simplifying things like theme changes and color preferences.
Looking ahead
The initial version of Constructable Stylesheets shipped with the API
described here, but there's work underway to make things easier to use. There's
a proposal to extend
the adoptedStyleSheets FrozenArray with dedicated methods for inserting and
removing stylesheets, which would obviate the need for array cloning and avoid
potential duplicate stylesheet references.
More information