نفَّذ Chromium مؤخرًا ميزة جديدة من HTML5: جداول الأنماط على مستوى النطاق، والمعروفة أيضًا باسم
<style scoped>. يمكن لمؤلف الويب حصر قواعد الأنماط لتطبيقها على جزء من الصفحة فقط من خلال ضبط السمة "scope" على عنصر <style> الذي يكون العنصر الثانوي المباشر للعنصر الجذر للبنية الفرعية التي تريد تطبيق الأنماط عليها. يحدّ هذا من تأثير الأنماط على العنصر الرئيسي لعنصر <style> فقط وجميع العناصر الفرعية له.
مثال
في ما يلي مستند بسيط يستخدم تنسيقًا عاديًا:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
ستلوّن قواعد الأنماط المحدّدة النص ضمن أي <div> باللون الأحمر، وضمن أي <span> باللون الأخضر:
div span
div span
div span
ومع ذلك، إذا ضبطنا scoped على العنصر <style>:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
بعد ذلك، يتم تقييد قواعد الأنماط بحيث يتم تطبيقها على <div> المحيط الذي يمثّل العنصر الرئيسي لعنصر <style scoped> وأي عنصر داخل هذا <div> فقط. ونُطلق على ذلك اسم "النتائج على مستوى نطاق معيّن"، وتظهر النتيجة على النحو التالي:
div! span!
div! span!
div! span!
ويمكن إجراء ذلك بالطبع في أي مكان في الترميز. إذا كنت جريئًا، يمكنك دمج الأنماط على مستوى النطاق ضمن أجزاء أخرى على مستوى النطاق من الترميز بقدر ما تريد للحصول على تحكم دقيق في مواضع تطبيق الأنماط.
حالات الاستخدام
ما الغرض من ذلك؟
ومن حالات الاستخدام الشائعة المحتوى المُدار: عندما تريد أنت بصفته مؤلف ويب دمج محتوى تابع لجهة خارجية، بما في ذلك جميع أنماط هذا المحتوى، ولكن لا تريد المخاطرة بأن تؤدي هذه الأنماط إلى "تلويث" أجزاء أخرى غير ذات صلة من الصفحة. ومن المزايا الرائعة هنا إمكانية دمج محتوى من مواقع إلكترونية أخرى، مثل yelp وtwitter وebay وما إلى ذلك، في صفحة واحدة بدون الحاجة إلى عزل المحتوى الخارجي باستخدام <iframe> أو تعديله أثناء التنقل.
إذا كنت تستخدم نظام إدارة محتوى (CMS) يرسل إليك مقتطفات من الترميز يتم تجميعها معًا في عرض الصفحة النهائي، هذه ميزة رائعة للتأكّد من أنّه يتم تصميم كل مقتطف بشكل منفصل عن أي عنصر آخر على الصفحة. ويمكن أن يكون ذلك مفيدًا أيضًا في الموسوعات على الإنترنت.
عندما تريد إنشاء رمز تجريبي جميل على صفحة، من السهل حصر الأنماط على المحتوى التجريبي فقط. يتيح لك ذلك استخدام CSS على الإصدار التجريبي، ولن يتأثّر أي عنصر آخر في الصفحة.
وتشمل حالات الاستخدام الأخرى الحِزم: على سبيل المثال، إذا كانت صفحة الويب تحتوي على قائمة جانبية، من المنطقي وضع الأنماط الخاصة بهذه القائمة في قسم <style scoped> في هذا الجزء من الترميز. ولن يكون لهذه القواعد المتعلقة بالأنماط أي تأثير عند عرض أجزاء أخرى من الصفحة، ما يحافظ على فصلها بشكل جيد عن المحتوى الرئيسي.
من المحتمل أن تكون إحدى حالات الاستخدام الأكثر إقناعًا هي نموذج مكوّن الويب. ستكون مكونات الويب طريقة رائعة لإنشاء عناصر مثل أشرطة التمرير والقوائم وأدوات اختيار التاريخ وتطبيقات مصغّرة للعلامات وغيرها. ومن خلال توفير الأنماط على مستوى النطاق، يمكن للمصمم إنشاء تطبيق مصغّر وتعبئته بأنماطه كوحدة مستقلة يمكن للآخرين استخدامها ودمجها في تطبيق ويب غني. نخطّط لاستخدام <style scoped> بشكل كبير مع Web Components وshadow DOM (يمكن تفعيله من خلال ضبط العلامة التجريبية "shadow DOM" في chrome://flags). في الوقت الحالي، لا تتوفّر طريقة جيدة للتأكّد من أنّ الأنماط تقتصر على مكوّنات الويب بدون اللجوء إلى ممارسات سيئة مثل الأنماط المضمّنة، لذا فإنّ الأنماط على مستوى نطاق معيّن هي الخيار الأمثل لذلك.
ما أهمية تضمين العنصر الرئيسي؟
الطريقة الأكثر طبيعية هي تضمين العنصر الرئيسي لكي تتمكّن قواعد <style scoped> من ضبط لون خلفية شائع للنطاق بأكمله، على سبيل المثال. ويسمح أيضًا بكتابة أوراق الأنماط على مستوى النطاق بشكل "وقائي" للمتصفّحات التي لا تتوافق مع <style scoped> بعد، وذلك عن طريق إضافة بادئة إلى القواعد باستخدام أداة اختيار رقم تعريف أو فئة كخيار احتياطي:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
ويُحاكي ذلك تأثير استخدام الأنماط عند تنفيذ "النطاق"، ولكن مع بعض التأثيرات السلبية على الأداء في وقت التشغيل بسبب أداة الاختيار الأكثر تعقيدًا. والميزة الرائعة في هذا النهج هي أنّه يسمح باعتماد نهج احتياطي مناسب إلى أن يصبح <style scoped> متاحًا على نطاق واسع ويمكن ببساطة إيقاف أدوات اختيار الأرقام التعريفية.
الحالة
بما أنّ تنفيذ جداول الأنماط على مستوى النطاق لا يزال جديدًا، فهي مخفية حاليًا خلف علامة وقت التشغيل في Chrome. لتفعيل هذه الميزة، يجب الحصول على إصدار Chrome يحمل رقم الإصدار 19 أو إصدارًا أحدث (Chrome Canary حاليًا)، ثم تحديد موقع الإدخال "تفعيل <style scoped>" في chrome://flags (في نهاية الصفحة)، والنقر على "تفعيل" ثم إعادة تشغيل المتصفّح.
لا تتوفّر حاليًا أي أخطاء معروفة، ولكنّ @global والإصدارات على مستوى النطاق من @keyframes و@-webkit-region لا تزال قيد التنفيذ. ويتم أيضًا تجاهل @font-face في الوقت الحالي لأنّه من المرجّح أن تتغيّر المواصفات.
نريد تشجيع جميع المستخدمين المهتمين بالميزة على تجربتها وإخبارنا بتجاربهم: الإيجابية والسلبية (وربما) تلك التي تتضمّن أخطاء.