أوراق أنماط قابلة للبناء

أنماط قابلة لإعادة الاستخدام بسلاسة

Jason Miller

أوراق الأنماط القابلة للإنشاء هي طريقة لإنشاء أنماط قابلة لإعادة الاستخدام وتوزيعها عند استخدام Shadow DOM.

كان من الممكن دائمًا إنشاء أوراق الأنماط باستخدام JavaScript. ومع ذلك، كانت العملية في السابق تتضمّن إنشاء عنصر <style> باستخدام document.createElement('style')، ثم الوصول إلى خاصية sheet للحصول على مرجع إلى مثيل CSSStyleSheet الأساسي. يمكن أن تؤدي هذه الطريقة إلى إنشاء رمز CSS مكرّر وتضخّم مصاحب له، كما أنّ عملية الربط تؤدي إلى ظهور وميض من المحتوى غير المصمّم سواء كان هناك تضخّم أم لا. تمثّل الواجهة CSSStyleSheet جذر مجموعة من واجهات تمثيل CSS المشار إليها باسم CSSOM، وتوفّر طريقة برمجية للتعامل مع أوراق الأنماط، بالإضافة إلى حلّ المشاكل المرتبطة بالطريقة القديمة.

تتيح أوراق الأنماط القابلة للإنشاء تحديد أنماط CSS مشتركة وإعدادها، ثم تطبيق هذه الأنماط على عدة جذور Shadow أو على المستند بسهولة وبدون تكرار. يتم تطبيق التعديلات على CSSStyleSheet مشترَكة على جميع العناصر الجذرية التي تم اعتمادها فيها، كما أنّ اعتماد ورقة أنماط يكون سريعًا ومتزامنًا بعد تحميل الورقة.

إنّ عملية الربط التي تتيحها أوراق الأنماط القابلة للإنشاء مناسبة تمامًا لعدد من التطبيقات المختلفة. ويمكن استخدامها لتوفير مظهر مركزي تستخدمه العديد من المكوّنات: يمكن أن يكون المظهر مثيلاً من CSSStyleSheet يتم تمريره إلى المكوّنات، مع نشر التعديلات على المظهر إلى المكوّنات تلقائيًا. يمكن استخدامها لتوزيع قيم سمة CSS المخصّصة على أجزاء معيّنة من شجرة DOM بدون الاعتماد على التتالي. ويمكن حتى استخدامها كواجهة مباشرة لمحلّل CSS في المتصفّح، ما يسهّل التحميل المُسبَق لأوراق الأنماط بدون إدخالها في نموذج DOM.

إنشاء ورقة أنماط

بدلاً من تقديم واجهة برمجة تطبيقات جديدة لتحقيق ذلك، تتيح مواصفات Constructable StyleSheets إنشاء أوراق أنماط بشكل إلزامي من خلال استدعاء الدالة الإنشائية CSSStyleSheet(). يحتوي عنصر CSSStyleSheet الناتج على طريقتَين جديدتَين تجعلان إضافة قواعد أوراق الأنماط وتعديلها أكثر أمانًا بدون التسبّب في وميض المحتوى غير المصمّم (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 StyleSheets وتطبيقها على أشجار DOM. لدينا واجهة برمجة تطبيقات جديدة مستندة إلى Promise لتحميل أوراق الأنماط من سلسلة مصدر CSS تستخدم المحلّل المضمّن في المتصفّح ودلالات التحميل. أخيرًا، لدينا آلية لتطبيق تعديلات على ورقة الأنماط على جميع استخدامات StyleSheet، ما يسهّل إجراء تغييرات مثل تغييرات المظهر وإعدادات الألوان المفضّلة.

عرض العرض التوضيحي

نظرة مستقبلية

تم إطلاق الإصدار الأولي من Constructable Stylesheets مع واجهة برمجة التطبيقات الموضّحة هنا، ولكنّنا نعمل حاليًا على تسهيل استخدامها. هناك اقتراح لتوسيع نطاق adoptedStyleSheets FrozenArray ليشمل طرقًا مخصّصة لإدراج أوراق الأنماط وإزالتها، ما سيغني عن الحاجة إلى استنساخ المصفوفة ويتجنّب الإشارات المكرّرة المحتملة إلى أوراق الأنماط.

مزيد من المعلومات

• حالة "منصة Chrome"
• مثال
• واجهة برمجة التطبيقات
• فيديو توضيحي
• النية في التنفيذ
• Intent to Ship
• Discourse