ميزة تجريبية جديدة - أوراق الأنماط ذات النطاق

Alex Danilo
X

نفذ 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 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!
a div! span!
a div! ضربة جزاء.

يمكن إجراء ذلك بالطبع في أي مكان في الترميز. لذا، إذا كنت مغامرًا، يمكنك تضمين أنماط محددة ضمن أجزاء أخرى تم تحديد نطاقها من الترميز بقدر ما تريد للتحكّم بدقة في مواضع تطبيق الأنماط.

حالات الاستخدام

ما الذي يفيد هذا الآن؟

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

ونريد تشجيع كل من يريد استخدام الميزة على تجربتها وإطلاعنا على تجاربك فيها، مثل الجيدة منها والسيئة والأخطاء البرمجية.