نفذ Chromium مؤخرًا ميزة جديدة من HTML5، وهي: أوراق الأنماط ذات النطاق المحدد، المعروفة أيضًا باسم.
<style scoped>. يمكن لمؤلف الويب فرض قيود على قواعد الأنماط ليتم تطبيقها على جزء من الصفحة فقط، وذلك من خلال ضبط السمة "نطاق" على عنصر <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> أخضر:
a div! a !
a div! a!
a div! a!
في المقابل، إذا عيَّنا 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!
a div! a span!
a div! span!
بالطبع يمكن إجراء ذلك في أي مكان في الترميز. إذا كنت من محبّي المغامرة، يمكنك دمج الأنماط ذات النطاق المحدّد في الأجزاء الأخرى ذات النطاق المحدّد من الترميز بالقدر الذي تريده للتحكّم بدقة في مواضع تطبيق الأنماط.
حالات الاستخدام
الآن ما فائدة هذا؟
تتمثل إحدى حالات الاستخدام الشائعة في المحتوى المقتبس: عندما تريد كمؤلف على الويب دمج محتوى من جهة خارجية، بما في ذلك جميع أنماطه، ولكنك لا تريد المخاطرة بأن تخاطر هذه الأنماط "بتلوث" أجزاء أخرى غير ذات صلة من الصفحة. إحدى الميزات الرائعة هنا هي إمكانية دمج محتوى من مواقع إلكترونية أخرى، مثل Yelp وtwitter وebay وغيرها، في صفحة واحدة بدون الحاجة إلى عزلها باستخدام <iframe> أو تعديل المحتوى الخارجي بشكل فوري.
إذا كنت تستخدم نظام إدارة محتوى (CMS) يرسل إليك مقتطفات من الترميز تم دمجها معًا في عرض نهائي للصفحة، يمكن الاستفادة من هذه الميزة الرائعة للتأكد من تعديل نمط كل مقتطف بشكل منفصل عن أي عنصر آخر على الصفحة. ويمكن أن يكون ذلك مفيدًا لموقع wiki أيضًا.
عندما تريد إنشاء رمز تجريبي رائع على إحدى الصفحات، فمن السهل أن تقتصر الأنماط على المحتوى التجريبي فقط. يتيح لك ذلك استخدام خدمة CSS على الإصدار التجريبي، بدون أن يؤثر ذلك في أي عنصر آخر على الصفحة.
وهناك حالة استخدام أخرى هي ببساطة التغليف: على سبيل المثال، إذا كانت صفحة الويب الخاصة بك تحتوي على قائمة جانبية، من المنطقي وضع أنماط خاصة بتلك القائمة في قسم <style scoped> في ذلك الجزء من الترميز. لن يكون لقواعد النمط هذه أي تأثير عند عرض أجزاء أخرى من الصفحة، مما يبقيها منفصلة بشكل جيد عن المحتوى الرئيسي!
من المحتمل أن تكون إحدى حالات الاستخدام الأكثر إقناعًا هي نموذج مكوّن الويب. ستكون مكونات الويب طريقة رائعة لإنشاء أشياء مثل أشرطة التمرير، والقوائم، ومنتقي التاريخ، وأدوات علامات التبويب، وما إلى ذلك. فمن خلال توفير الأنماط ذات النطاق الواسع، يمكن للمصمم إنشاء عنصر مصغّر وتجميعه بأنماطه كوحدة مستقلة يمكن للآخرين جمعها ودمجها في تطبيق ويب ثري. نخطط لاستخدام <style scoped> بشكل كبير مع مكوّنات الويب و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 في الوقت الحالي نظرًا لوجود فرصة كبيرة لتغيير المواصفات.
نود أن نشجع كل الأشخاص المهتمين بهذه الميزة على تجربتها وإعلامنا بتجاربك: الجيدة، والسيئة، و (ربما) العربة.