تصميمات سهلة لإعادة الاستخدام.
أوراق الأنماط القابلة للإنشاء هي طريقة لإنشاء وتوزيع أنماط قابلة لإعادة الاستخدام عند استخدام ShadowDOM.
كان من الممكن دائمًا إنشاء أوراق أنماط باستخدام JavaScript. مع ذلك، كانت هذه العملية في السابق هي إنشاء عنصر <style> باستخدام document.createElement('style')، ثم الوصول إلى خاصية ورقة البيانات للحصول على مرجع إلى مثيل CSSStyleSheet الأساسي. ويمكن أن تؤدي هذه الطريقة إلى إنشاء رمز CSS مكرّر وتضاعف كبير الحجم،
وتؤدّي عملية الإرفاق إلى وميض من المحتوى غير النمطي سواء كان هناك انتفاخ أو لا. الواجهة CSSStyleSheet هي جذر مجموعة من واجهات تمثيل بيانات CSS يُشار إليها باسم
CSSOM،
وهي توفّر طريقة آلية لمعالجة أوراق الأنماط وتزيل المشاكل
المرتبطة بالطريقة القديمة.
تُسهل أوراق الأنماط القابلة للإنشاء تحديد أنماط CSS المشتركة وإعدادها، ومن ثم تطبيق تلك الأنماط على العديد من جذور الظل أو المستند بسهولة وبدون تكرار. يتم تطبيق التعديلات التي يتم إجراؤها على CSSStyleSheet المشتركة على جميع شهادات الجذر التي تم اعتمادها فيها، ويصبح استخدام ورقة أنماط سريعًا ومتزامنًا بعد تحميل ورقة البيانات.
تفسح الارتباط الذي تم إعداده بواسطة أوراق الأنماط القابلة للإنشاء لعدد من التطبيقات المختلفة. ويمكن استخدامه لتوفير مظهر مركزي يستخدمه العديد من المكوّنات: يمكن أن يكون المظهر مثيل CSSStyleSheet يتم تمريره إلى المكوّنات، مع نشر تعديلات على المظهر في المكوّنات تلقائيًا. ويمكن استخدامها لتوزيع قيم السمة المخصّصة في CSS على
أشجار فرعية محددة في DOM بدون الاعتماد على
التتابع. ويمكن أيضًا استخدامها كواجهة مباشرة للمحلل اللغوي لصفحات الأنماط المتتالية (CSS) في المتصفح، ما يسهّل تحميل أوراق الأنماط مسبقًا بدون إدخالها في نموذج العناصر في المستند (DOM).
إنشاء ورقة أنماط
بدلاً من تقديم واجهة برمجة تطبيقات جديدة لتنفيذ ذلك، تتيح مواصفات جداول بيانات الأنماط
القابلة للإنشاء
إنشاء أوراق أنماط بشكل إلزامي من خلال استدعاء
دالة إنشاء 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..."
استخدام أوراق أنماط تم إنشاؤها
الميزة الجديدة الثانية التي تم تقديمها من خلال أوراق الأنماط القابلة للإنشاء هي خاصية 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);
خلاصة ما سبق ذكره
من خلال جداول بيانات الأنماط القابلة للإنشاء، أصبح لدى مطوّري البرامج على الويب الآن حل واضح لإنشاء جداول بيانات CSS وتطبيقها على أشجار DOM. ولدينا واجهة برمجة تطبيقات جديدة تستند إلى Promise لتحميل StyleSheets من سلسلة من مصدر CSS تستخدم المحلِّل اللغوي المضمَّن في المتصفّح وتحميل دلالات الألفاظ. وأخيرًا، لدينا آلية لتطبيق تحديثات ورقة الأنماط على جميع استخدامات ورقة الأنماط، وتبسيط أشياء مثل تغييرات المظاهر وتفضيلات الألوان.
نظرة مستقبلية
تم شحن النسخة الأولية من أوراق الأنماط القابلة للإنشاء بواسطة واجهة برمجة التطبيقات
الموضحة هنا، ولكن لا يزال هناك عمل قيد التنفيذ لتسهيل استخدام الأشياء. هناك اقتراح لتوسيع adoptedStyleSheets FrozenArray باستخدام طرق مخصّصة لإدراج أوراق الأنماط وإزالتها، ما من شأنه أن يغنيك عن استنساخ الصفائف ويتجنّب المراجع المحتمَلة لأوراق الأنماط.