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

سبک های قابل استفاده مجدد بدون درز.

Jason Miller

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

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

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

ارتباط راه‌اندازی شده توسط Constructable Stylesheets به خوبی به تعدادی از برنامه‌های کاربردی مختلف کمک می‌کند. می‌توان از آن برای ارائه یک موضوع متمرکز استفاده شده توسط بسیاری از مؤلفه‌ها استفاده کرد: موضوع می‌تواند یک نمونه CSSStyleSheet باشد که به مؤلفه‌ها منتقل می‌شود و به‌روزرسانی‌های موضوع به طور خودکار به مؤلفه‌ها منتشر می‌شوند. می توان از آن برای توزیع مقادیر CSS Custom Property به زیردرخت های خاص DOM بدون تکیه بر آبشار استفاده کرد. حتی می‌توان از آن به‌عنوان یک رابط مستقیم برای تجزیه‌کننده 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);