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

تصميمات سهلة لإعادة الاستخدام.

Jason Miller

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

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

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

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

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

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

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

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

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