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

סגנונות שאפשר להשתמש בהם שוב ושוב.

Jason Miller

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

Browser Support

• 73
• 79
• 101
• 16.4

Source

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

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

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

יצירת גיליון סגנונות

במקום להציג API חדש כדי לעשות את זה, המפרט של Constructable StyleSheets מאפשר ליצור גיליונות סגנונות באופן אימפרטיבי על ידי הפעלת ה-constructor של CSSStyleSheet(). לאובייקט CSSStyleSheet שנוצר יש שתי שיטות חדשות שמאפשרות להוסיף ולעדכן כללים של גיליון סגנונות בצורה בטוחה יותר, בלי להפעיל Flash of Unstyled Content‏ (FOUC). השיטות replace() ו-replaceSync() מחליפות את גיליון הסגנונות במחרוזת של CSS, ו-replace() מחזירה Promise. בשני המקרים, אין תמיכה בהפניות לגיליונות סגנונות חיצוניים – המערכת מתעלמת מכללי @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..."

בגרסאות קודמות של המפרט, replace() אפשר כללים של @import והחזיר Promise שנפתר כשהטעינה שלהם הסתיימה. החל מגרסה 84 של Chrome, התכונה הזו הוסרה מהמפרט והמערכת מתעלמת מכללי @import ומציגה אזהרה.

שימוש בגיליונות סגנונות מובנים

התכונה החדשה השנייה שנוספה ב-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);

בגרסאות קודמות של המפרט, adoptedStyleSheets הוטמע כמערך קפוא, כלומר מוטציות במקום כמו push() גרמו לחריגה. כדי להוסיף גיליון סגנונות חדש, היה צריך להגדיר מחדש את המערך: `document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] זה כבר לא המצב, כי המפרט עודכן כדי לאפשר שינויים במערך.

סיכום של כל המידע

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

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

במבט קדימה

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

מידע נוסף

• סטטוס הפלטפורמה של Chrome
• דוגמה
• API
• הסברים
• Intent to Implement
• thought Intent to Ship
• Discourse