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

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

Jason Miller

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

Browser Support

• 73
• 79
• 101
• 16.4

Source

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

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

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

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

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

في الإصدارات السابقة من المواصفات، كان replace() يسمح بقواعد @import ويعرض Promise يتم حلّه عند الانتهاء من تحميل هذه القواعد. اعتبارًا من الإصدار 84 من Chrome، تمت إزالة هذه الميزة من المواصفات ويتم تجاهل قواعد @import مع عرض تحذير.

استخدام أوراق الأنماط التي تم إنشاؤها

الميزة الجديدة الثانية التي تقدّمها أوراق الأنماط القابلة للإنشاء هي سمة adoptedStyleSheets المتوفّرة في Shadow Roots والمستندات. يتيح لنا ذلك تطبيق الأنماط المحدّدة بواسطة 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);

في الإصدارات السابقة من المواصفات، تم تنفيذ adoptedStyleSheets كمصفوفة مجمّدة، ما يعني أنّ الطفرات الموضعية مثل push() أدت إلى ظهور استثناء. كانت إضافة ورقة أنماط جديدة تتطلّب إعادة تعريف الصفيفة: `document.adoptedStyleSheets = [...document.adoptedStyleSheets, newSheet] لم يعُد هذا الأمر ضروريًا لأنّه تم تعديل المواصفات للسماح بتغييرات الصفيفة.

خلاصة ما سبق ذكره

باستخدام أوراق الأنماط القابلة للإنشاء، أصبح لدى مطوّري تطبيقات الويب الآن حلّ واضح لإنشاء أوراق أنماط CSS وتطبيقها على أشجار نموذج العناصر في المستند. لدينا واجهة برمجة تطبيقات جديدة مستندة إلى Promise لتحميل أوراق الأنماط من سلسلة من مصدر CSS تستخدم المحلل اللغوي المضمّن في المتصفّح ودلالات التحميل. أخيرًا، لدينا آلية لتطبيق تحديثات أوراق الأنماط على جميع استخدامات StyleSheet، مما يبسط أشياء مثل تغييرات السمات وتفضيلات الألوان.

عرض توضيحي

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

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

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

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