شیت های قابل ساخت

سبک‌های یکپارچه و قابل استفاده مجدد.

Jason Miller

استایل‌شیت‌های قابل ساخت (Constructable Stylesheets ) روشی برای ایجاد و توزیع استایل‌های قابل استفاده مجدد هنگام استفاده از Shadow DOM هستند.

ایجاد stylesheetها با استفاده از جاوا اسکریپت همیشه امکان‌پذیر بوده است. با این حال، این فرآیند از لحاظ تاریخی به این صورت بوده است که یک عنصر <style> با استفاده از document.createElement('style') ایجاد شود و سپس به ویژگی sheet آن دسترسی پیدا شود تا به نمونه CSSStyleSheet زیرین ارجاع داده شود. این روش می‌تواند کد CSS تکراری و bloat همراه آن را تولید کند و عمل پیوست کردن منجر به انتشار محتوای بدون استایل می‌شود، چه bloat وجود داشته باشد و چه نه. رابط CSSStyleSheet ریشه مجموعه‌ای از رابط‌های نمایش CSS است که به عنوان CSSOM شناخته می‌شوند و روشی برنامه‌نویسی شده برای دستکاری stylesheetها و همچنین حذف مشکلات مرتبط با روش قدیمی ارائه می‌دهند.

استایل‌شیت‌های قابل ساخت، تعریف و آماده‌سازی استایل‌های CSS مشترک و سپس اعمال آن استایل‌ها به چندین Shadow Root یا سند را به راحتی و بدون تکرار امکان‌پذیر می‌کنند. به‌روزرسانی‌های یک CSSStyleSheet مشترک، به تمام ریشه‌هایی که در آن‌ها پذیرفته شده است، اعمال می‌شود و پس از بارگذاری صفحه، اتخاذ یک استایل‌شیت سریع و همزمان است.

ارتباط ایجاد شده توسط Constructable Stylesheets به خوبی با تعدادی از برنامه‌های مختلف سازگار است. می‌توان از آن برای ارائه یک تم متمرکز که توسط بسیاری از کامپوننت‌ها استفاده می‌شود، استفاده کرد: تم می‌تواند یک نمونه CSSStyleSheet باشد که به کامپوننت‌ها ارسال می‌شود و به‌روزرسانی‌های تم به طور خودکار به کامپوننت‌ها منتشر می‌شوند. می‌توان از آن برای توزیع مقادیر CSS Custom Property به زیردرخت‌های خاص DOM بدون تکیه بر آبشار استفاده کرد. حتی می‌توان از آن به عنوان یک رابط مستقیم برای تجزیه‌کننده CSS مرورگر استفاده کرد و پیش‌بارگذاری استایل‌شیت‌ها را بدون تزریق آنها به DOM آسان کرد.

ساخت یک شیوه‌نامه

به جای معرفی یک API جدید برای انجام این کار، مشخصات Constructable StyleSheets امکان ایجاد stylesheetها را به صورت اجباری با فراخوانی سازنده CSSStyleSheet() فراهم می‌کند. شیء CSSStyleSheet حاصل دارای دو متد جدید است که افزودن و به‌روزرسانی قوانین stylesheet را بدون فعال کردن Flash of Unstyled Content (FOUC) ایمن‌تر می‌کند. متدهای replace() و replaceSync() هر دو stylesheet را با یک رشته CSS جایگزین می‌کنند و replace() یک Promise را برمی‌گرداند. در هر دو مورد، ارجاعات خارجی stylesheet پشتیبانی نمی‌شوند - هرگونه قانون @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، یک ویژگی adoptStyleSheets است که در Shadow Roots و Documents موجود است. این ویژگی به ما اجازه می‌دهد تا سبک‌های تعریف شده توسط یک CSSStyleSheet را به طور صریح به یک زیردرخت DOM مشخص اعمال کنیم. برای انجام این کار، ما این ویژگی را روی آرایه‌ای از یک یا چند stylesheets تنظیم می‌کنیم تا به آن عنصر اعمال شود.

// 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 StyleSheets و اعمال آنها به درخت‌های DOM دارند. ما یک API جدید مبتنی بر Promise برای بارگذاری StyleSheets از یک رشته منبع CSS داریم که از تجزیه‌کننده داخلی مرورگر و بارگذاری معناشناسی استفاده می‌کند. در نهایت، ما مکانیسمی برای اعمال به‌روزرسانی‌های stylesheet به تمام کاربردهای یک StyleSheet داریم که مواردی مانند تغییرات تم و تنظیمات رنگ را ساده می‌کند.

مشاهده نسخه آزمایشی

با نگاهی به آینده

نسخه اولیه Constructable Stylesheets با API شرح داده شده در اینجا ارائه شد، اما کارهایی در حال انجام است تا استفاده از آن آسان‌تر شود. پیشنهادی برای گسترش adoptedStyleSheets FrozenArray با متدهای اختصاصی برای درج و حذف stylesheetها وجود دارد که نیاز به شبیه‌سازی آرایه را برطرف کرده و از ارجاعات تکراری به stylesheet جلوگیری می‌کند.

اطلاعات بیشتر

• وضعیت پلتفرم کروم
• مثال
• رابط برنامه‌نویسی کاربردی
• توضیح دهنده
• قصد اجرا
• قصد ارسال
• گفتمان