تعليق: لقد جلب لنا تحويل HTML5 الكثير من السمات الجديدة المفيدة للغاية ، مثل العنصر النائب ، التنزيل ، المخفي ، وما إلى ذلك.
على وجه الخصوص ، هناك سمة جديدة تتيح لنا التحكم في خصائص عناصر متعددة ، وهي: تحديد النطاق. يمكن أن تجعل السمة الناطقة التي ظهرت حديثًا على علامة النمط نمط CSS فعالًا فقط على العناصر المحلية. على وجه التحديد ، فإن عناصر الطفل للعنصر الذي يخزن هذا النمط النمط يسري. الفرق الوحيد عن النمط المعتاد هو إضافة سمة تحديد جديدة:
<style scoped>
/ * الأنماط تذهب هنا */
</style>
يتم تطبيق أنماط مع سمات النطاق فقط على العنصر الحالي وأطفاله. لا تزال الأنماط المضمنة ذات أولوية أعلى من الأنماط المنتشر ، لذلك من الأفضل تجنب استخدام الأنماط المضمنة. فيما يلي مزيج من عدة أنماط معًا لمقارنة نطاق الكفاءة الخاص بهم:
<viv>
<style scoped>
div {الحدود: 1 بكسل خضراء صلبة ؛ القاع الهامش: 20 بكسل ؛ MINIight: 40 بكسل ؛ }
.democontain {background: #f8f8f8 ؛ }
</style>
<viv> </viv>
<viv>
<style scoped>
Div {Background: LightBlue ؛ الحدود: 1 بكسل الأزرق الصلب. }
</style>
<viv> </viv>
</div>
<viv> </viv>
</div>
في الأنماط الناطفية ، يمكنك استخدام أي علامات نمط قانونية CSS ، مثل استعلامات الوسائط ، مثل هذا:
<style scoped>
MEDIA فقط شاشة و (الحد الأقصى WIDTH: 1024px) {
div {background: #000 ؛ }
}
</style>
هذه الخاصية الناشئة الناشئة مفيدة للغاية ، خاصة بالنسبة لأولئك الذين يقومون بإنشاء قوالب ، أو مستخدمي CMS ، أو بعض المطورين الذين لا يستطيعون تشغيل ملف النمط بأكمله. ولكن تجدر الإشارة إلى أن بعض المتصفحات القديمة لا تدعم هذه الخاصية. في هذه الحالة ، قد تحتاج إلى استخدام المكون الإضافي jQuery (https://github.com/thingsinjars/jquery-scoped-css-plugin) لتعويض هذه المشكلة.