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

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

Jason Miller

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

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

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

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

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

بدلاً من تقديم واجهة برمجة تطبيقات جديدة لتحقيق ذلك، تتيح مواصفات 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..."

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

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

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

باستخدام أوراق الأنماط القابلة للإنشاء، أصبح لدى مطوّري الويب الآن حلّ واضح ل إنشاء أوراق أنماط CSS وتطبيقها على أشجار DOM. لدينا واجهة برمجة تطبيقات جديدة تستند إلى وعد لتحميل أوراق الأنماط من سلسلة مصدر CSS تستخدِم ميزتَي التحليل والتحميل المضمّنتَين في المتصفّح. أخيرًا، لدينا آلية لتطبيق تعديلات ملفّ التنسيق على جميع استخدامات ملفّ التنسيق، ما يسهّل إجراء تغييرات على المظهر والإعدادات المفضّلة للألوان.

الاطّلاع على العرض التوضيحي

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

تم شحن الإصدار الأول من التنسيقات القابلة للإنشاء مع واجهة برمجة التطبيقات описанة هنا، ولكن يتم حاليًا العمل على تسهيل استخدامها. هناك اقتراح لتوسيع adoptedStyleSheets FrozenArray باستخدام طرق مخصّصة لإدراج أوراق الأنماط وإزالتها، ما سيؤدي إلى عدم الحاجة إلى استنساخ الصفيف وتجنُّب الإشارات المحتملة المكرّرة لأوراق الأنماط.

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

• حالة النظام الأساسي Chrome
• مثال
• واجهة برمجة التطبيقات
• الشرح
• نية التنفيذ
• Intent to Ship (نية الشحن)
• Discourse