برگه‌های سبک نگارش قابل‌ساخت

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

Jason Miller

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

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

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

نموداری که جریان را از CSS تألیف‌شده به نمونه‌سازی و سپس به برنامه نشان می‌دهد.

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

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

درحال ساختن برگه سبک نگارش

به‌جای معرفی یک API جدید برای انجام این کار، مشخصات Constructable StyleSheets امکان ایجاد برگه‌های سبک نگارش را به‌صورت امری با فراخوانی سازنده 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..."

استفاده از برگه سبک نگارش ساخته‌شده

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

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

پیش‌نگری

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

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