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

تصميمات سلسة وقابلة لإعادة الاستخدام

جايسون ميلر

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

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

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

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

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

بدلاً من تقديم واجهة برمجة تطبيقات جديدة لتنفيذ ذلك، تتيح مواصفات StyleSheetsالقابلة للإنشاء إمكانية إنشاء أوراق أنماط بشكل ضروري عن طريق استدعاء الدالة الإنشائية CSSStyleSheet(). يحتوي كائن CSSStyleSheet على طريقتين جديدتين تجعل إضافة قواعد الأنماط وتعديلها أكثر أمانًا بدون تشغيل Flash of Unstyled Content (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);