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

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

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);

همه را کنار هم گذاشتن

با ساختن StyleSheets، توسعه دهندگان وب اکنون یک راه حل صریح برای ایجاد CSS StyleSheets و اعمال آنها بر روی درختان DOM دارند. ما یک API مبتنی بر Promise برای بارگیری StyleSheets از رشته ای از منبع CSS داریم که از تجزیه کننده داخلی مرورگر و بارگذاری معنایی استفاده می کند. در نهایت، ما مکانیزمی برای اعمال به‌روزرسانی‌های صفحه سبک برای همه موارد استفاده از StyleSheet داریم که مواردی مانند تغییرات تم و ترجیحات رنگ را ساده می‌کند.

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

نگاه به جلو

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

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

• وضعیت پلتفرم کروم
• مثال
• API
• توضیح دهنده
• قصد پیاده سازی
• قصد حمل
• گفتمان