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

סגנונות שניתן להשתמש בהם שוב ושוב בצורה חלקה.

Jason Miller

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

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

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

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

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

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

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

במבט קדימה

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

מידע נוסף

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