גיליונות סגנונות ניתנים לבנייה

סגנונות חלקים שניתנים לשימוש חוזר.

Jason Miller

גיליונות סגנונות שניתן ליצור הם דרך ליצור ולחלק סגנונות לשימוש חוזר כשמשתמשים ב-Shadow DOM.

תמיד היה אפשר ליצור גיליונות סגנונות באמצעות JavaScript. עם זאת, בעבר היה צריך ליצור רכיב <style> באמצעות document.createElement('style'), ואז לגשת למאפיין הגיליון שלו כדי לקבל הפניה למכונה הבסיסית של CSSStyleSheet. השיטה הזו עלולה ליצור קוד CSS כפול ואת הבעיה של עודף קוד, והפעולה של ההצמדה מובילה להצגה קצרה של תוכן ללא עיצוב, גם אם יש עודף קוד וגם אם לא. ממשק CSSStyleSheet הוא הרמה הבסיסית (root) של אוסף של CSS שנקראים CSSOM, שמציע דרך פרוגרמטית לשנות גיליונות סגנונות וגם לבטל בעיות שקשורות לשיטה הישנה.

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

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

בניית גיליון סגנונות

במקום להשיק ממשק API חדש כדי לעשות זאת, המודל StyleSheets מאפשר ליצור גיליונות סגנונות באופן חיוני על ידי הפעלה ה-constructor של CSSStyleSheet(). באובייקט CSSStyleSheet שנוצר יש שני שיטות חדשות המבטיחות יותר להוסיף ולעדכן כללים של גיליון סגנונות ללא מפעיל הבהוב של סגנון לא מעוצב תוכן (FOUC). replace() וגם replaceSync() ה-methods מחליפות את גיליון הסגנונות במחרוזת של 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 Root ומסמכים. כך אפשר להחיל במפורש את הסגנונות שהוגדרו על ידי 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, למפתחי אינטרנט יש כעת פתרון מפורש יצירת גיליונות סגנונות CSS והחלתם על עצי DOM. יש לנו ממשק API חדש שמבוסס על Promise לטעינת גיליונות סגנונות ממחרוזת של מקור CSS, שמשתמש בניתוח המובנה ובסמנטיקה של טעינת הדפדפן. לבסוף, יש לנו מנגנון להחלה של עדכוני סגנונות על כל השימושים בסגנון, שמפשט דברים כמו שינויים בעיצוב והעדפות צבע.

לצפייה בהדגמה

במבט קדימה

הגרסה הראשונית של גיליונות סגנונות שניתן ליצור נשלחת עם ה-API שמתואר כאן, אבל אנחנו עובדים על שיפור השימוש בהם. יש הצעה להרחיב את adoptedStyleSheets FrozenArray בשיטות ייעודיות להוספה ולהסרה של גיליונות סגנונות, כדי למנוע את הצורך בליצור עותקים משובכים של מערך ולהימנע מהפניות כפולות פוטנציאליות לגיליונות סגנונות.

מידע נוסף

• סטטוס הפלטפורמה של Chrome
• דוגמה
• API
• הסברים
• כוונה להטמעה
• הכוונה למשלוח
• שיחה