CSS Academy · درس

@scope للأنماط ذات النطاق المحدد

احصر نطاق قواعد CSS في أشجار فرعية محددة باستخدام قاعدة @scope.

@scope للأنماط ذات النطاق المحدد درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما @scope؟

تحد قاعدة at-rule المسماة @scope (في Chrome 118+ وSafari 17.4+) قواعد CSS ضمن شجرة فرعية محددة من DOM. ولا تنطبق القواعد داخل @scope إلا على العناصر الموجودة ضمن جذر النطاق المعلن، ما يمنع تسرب التنسيقات بين المكونات.

الصيغة الأساسية

أعلنوا عن نطاق باستخدام محدد جذر النطاق. تنطبق جميع القواعد الموجودة داخله على العناصر السليلة لجذور النطاق المطابقة فقط، وليس على المستند بأكمله.

<div class="card">
  <div class="title">Scoped Title</div>
  <div class="body">Scoped body text &mdash; styles only apply inside .card.</div>
</div>

جذر النطاق

يحدد جذر النطاق (@scope (.card)) نقطة الدخول. تُنسّق العناصر داخل النطاق التي تطابق .title. أما العناصر الموجودة خارج .card والحاملة للصنف .title فلا تتأثر، ما يوفر عزلًا حقيقيًا للتنسيقات من دون Shadow DOM.

حد النطاق (حدود النطاق)

يمكنكم تعريف حد للنطاق اختياريًا باستخدام to: @scope (.card) to (.nested-card). تنطبق القواعد داخل .card، لكنها تتوقف عند العناصر السليلة .nested-card، ما يقصر التنسيقات على مستوى واحد من تداخل المكونات ويستبعد النسخ الأعمق.

الصنف الزائف :scope داخل @scope

يشير :scope داخل كتلة @scope إلى عنصر جذر النطاق نفسه. ينسّق @scope (.card) { :scope { border-radius: 8px; } } عنصر .card مباشرةً، وليس عناصره السليلة.

الخصوصية القائمة على القرب

يقدم @scope خصوصية قائمة على القرب: عندما تطابق نطاقات متعددة عنصرًا ما، يفوز جذر النطاق السلف الأقرب، بغض النظر عن خصوصية المحدد. ويمنع ذلك تنسيقات المكونات المتداخلة بعمق من أن تتجاوزها تنسيقات نطاقات الأسلاف البعيدة.

@scope مقابل CSS Modules

تنشئ CSS Modules أسماء فئات فريدة ومُرمّزة بالتجزئة لتحقيق تحديد النطاق وقت البناء — وهذا أمر يخص أداة تجميع JavaScript. أما @scope فيحقق تحديد النطاق أصليًا في المتصفح، من دون أدوات بناء أو أسماء مُرمّزة بالتجزئة أو صياغة خاصة بإطار عمل — باستخدام CSS خالص.

@scope مقابل Shadow DOM

ينشئ Shadow DOM عزلًا كاملًا للأنماط، فلا يمكن للأنماط الخارجية اختراقه. أما @scope فيوفر عزلًا جزئيًا، إذ يمكن للأنماط الخارجية الوصول إلى العناصر الواقعة ضمن النطاق إذا كانت درجة تخصيصها مرتفعة بما يكفي. ويمثل @scope بديلًا أخف لتحديد نطاق مكونات الواجهة من دون عزل كامل.

استخدام الطبقات مع @scope

يمكنكم الجمع بين @scope و@layer للتحكم الدقيق في التتالي: عرّفوا الأنماط الخاصة بالمكونات داخل طبقة خاصة بالمكون. وبذلك يمكنكم إدارة ترتيب التتالي عبر الطبقات ونطاق الأنماط عبر @scope بطريقة قابلة للتركيب، من دون اللجوء إلى حيل معقدة في تسمية الفئات.

حالات الاستخدام العملية

مكونات نظام التصميم: حدّدوا نطاق جميع أنماط الأزرار باستخدام @scope (.button-group) حتى لا تتسرب أنماط الأزرار الداخلية إلى الخارج. عزل الأدوات: حدّدوا نطاق أنماط أداة تابعة لجهة خارجية داخل الحاوية الخاصة بها، لمنع تعارضها مع الأنماط العامة للصفحة.

دعم المتصفحات والخطة البديلة

يتوافق @scope مع Chrome 118+ وSafari 17.4+ وFirefox 128+. في المتصفحات غير المدعومة، تُتجاهل الأنماط الموجودة داخل @scope، ويعود التتالي إلى الأنماط العامة. استخدموا @scope كتحسين تدريجي عندما يكون تحديد نطاق المكونات مفيدًا لكنه غير ضروري.

اختبار المعرفة

ما المشكلة التي يحلها @scope ويصعب التعامل معها باستخدام محددات CSS التقليدية وحدها؟

الخلاصة

يحد @scope من تطبيق قواعد CSS ليقتصر على شجرة DOM مُعلنة، مما يتيح احتواء الأنماط أصليًا من دون Shadow DOM أو ترميز أسماء الفئات باستخدام أدوات البناء. وتجعل حدود النطاق، ودرجة التخصيص الناتجة عن القرب، والتكامل مع @layer من @scope أداة أساسية قوية لأنظمة التصميم التي تحدد نطاق المكونات باستخدام CSS خالص.

الأسئلة الشائعة

هل درس «@scope للأنماط ذات النطاق المحدد» مجاني؟

نعم — نص درس «@scope للأنماط ذات النطاق المحدد» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «@scope للأنماط ذات النطاق المحدد»؟

احصر نطاق قواعد CSS في أشجار فرعية محددة باستخدام قاعدة @scope. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «@scope للأنماط ذات النطاق المحدد»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy