استخدم CSS محددًا على مستوى المكوّن للتحكم في العناصر التي تنطبق عليها القاعدة، وورقة أنماط مشتركة لإعادة استخدام القواعد عبر الصفحات. يمكنك الجمع بينهما في مشروع HTML صغير على Mac؛ اختر ترتيب الملفات وفقًا لما تحتاج إلى نقله وصيانته.

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

ما القرار الذي تتخذه فعلًا؟

هناك قراران: موضع CSS، والعناصر التي يحددها. توجد ورقة الأنماط المضمّنة في عنصر style ضمن مستند HTML. أما ورقة الأنماط الخارجية فهي مورد منفصل يُربط باستخدام link، مع rel="stylesheet" ومسار href. هذه هي آليات HTML لتوفير CSS؛ ولا يمنح أي من الترتيبين المحددات العادية حدًا فاصلًا للمكوّن تلقائيًا. معيار HTML: عنصر style، MDN: عنصر رابط المورد الخارجي.

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

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

مهمتك الحالية الترتيب المقترح ما الذي يجب نقله معها
إبقاء صفحة صغيرة واحدة في ملف واحد تضمين CSS في عنصر style HTML، وأي أصول مشار إليها بشكل منفصل
صيانة البطاقة نفسها عبر عدة صفحات استخدام ورقة أنماط خارجية مع أصناف مخصصة للمكوّن كل صفحة HTML وملف CSS المشترك
استخدام محددات أقصر ضمن فرع محدد إضافة قواعد @scope ذات جذر صريح، مضمّنة أو خارجية CSS والترميز الذي يحتوي على الجذر المطابق
دعم متصفحات لا يُعرف مدى دعمها لتحديد النطاق إبقاء التنسيقات الأساسية في قواعد أصناف عادية HTML وورقة الأنماط التي تحتوي على تلك القواعد

لذلك، يحتاج مصطلح «قابل للنقل» إلى معنى محدد. يسهل نقل ملف HTML واحد بمفرده. ويمكن أيضًا نقل مجلد يحتوي على HTML وCSS، ما دامت مساراته لا تزال صالحة. أما المكوّن القابل لإعادة الاستخدام فيحتاج إلى نوع ثالث من قابلية النقل: يجب أن يحافظ موقعه الجديد على روابط الترميز التي تتوقعها محدداته.

أنشئ مثالًا عمليًا من ملفين على Mac

أنشئ مجلدًا باسم form-study. احفظ داخله ملفين نصيين عاديين باسم index.html وshared.css. إذا كنت تستخدم TextEdit، فاختر File > New، ثم Format > Make Plain Text قبل لصق الشيفرة. وبالنسبة إلى ملف HTML، توثّق Apple طريقة الحفظ بامتداد .html واختيار Use .html عند ظهور المطالبة. تأكد من أن الاسم الفعلي لملف ورقة الأنماط هو shared.css، من دون إضافة اللاحقة .txt. العمل مع مستندات HTML في TextEdit على Mac.

احفظ مستند HTML الكامل هذا باسم index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

احفظ ورقة الأنماط الكاملة هذه باسم shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

افتح index.html في Safari أو متصفح آخر على الكمبيوتر. النتيجة المتوقعة بطاقة بيضاء ذات حدود ومربع أزرق مستدير الزوايا، تليها ملاحظة بلا حدود. يتبع ربط ورقة الأنماط النمط الموثق في MDN: يحدد HTML مورد CSS عبر href على رابط ورقة الأنماط. MDN: تضمين ورقة أنماط.

يمنح المثال عنوان البطاقة عمدًا صنفًا خاصًا به. وهذا يجعل علاقة التنسيق المقصودة واضحة من دون الحاجة إلى تحديد النطاق الأصلي. خلفية الصفحة والخط هما الإعدادان الافتراضيان للمستند؛ أما حدود البطاقة ولون العنوان وشكلها فتنتمي إلى البطاقة. حافظ على هذا التمييز عند استخراج قواعد قابلة لإعادة الاستخدام: قد تحتاج الصفحة الوجهة إلى البطاقة من دون اعتماد خلفية هذه الصفحة أو عرضها.

لمشاركة التصميم، أنشئ صفحة HTML ثانية في المجلد نفسه واستخدم رابط ورقة الأنماط ذاته. عندئذٍ ستشير الصفحتان إلى ملف CSS واحد. تعامل مع التعديلات على ذلك الملف بوصفها تغييرات تؤثر في كل صفحة ترتبط به؛ وراجع كل صفحة بعد تغيير قاعدة مشتركة.

متى يكون CSS محدد النطاق الأصلي مفيدًا؟

استخدم @scope عندما يحتوي المكوّن على عدة عناصر تستفيد من محددات محلية بسيطة، لا سيما إذا كنت تحتاج إلى حد سفلي صريح حول المحتوى المتداخل. تحدد مواصفة CSS Cascading and Inheritance النطاق من خلال جذر وعناصر حدّية اختيارية. يكون الجذر ضمن النطاق؛ أما العناصر الحدّية وعناصرها المتفرعة فتُستثنى من المطابقة مع القواعد محددة النطاق. هذه المواصفة مسودة عمل. CSS Cascading and Inheritance Level 6: تحديد نطاق الأنماط.

لتجربة صغيرة، أضف المقطع الاختياري التالي إلى shared.css. إنه يستخدم الترميز الحالي في المثال ويغيّر مظهر فقرة البطاقة:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

في متصفح يدعم ذلك، تحصل الفقرة داخل البطاقة على خلفية باهتة وهوامش داخلية. وتبقى فقرة الملاحظة خارج نطاق هذه القاعدة. يظل CSS في الملف المشترك؛ فتحديد النطاق والمشاركة يعملان معًا.

إذا أضفت لاحقًا منطقة متداخلة بالصنف nested-sample، فيمكنك استبدال ذلك المقطع الاختياري بهذا المقطع. إنه مثال على الحدود؛ ولا تحتوي الصفحة الأصلية بعد على منطقة متداخلة كهذه.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

يستثني الحد المنطقة المتداخلة من مطابقات هذه المحددات. لكنه لا ينشئ عزلًا كاملًا للأنماط: إذ قد تظل الخصائص الموروثة مثل color وfont-family تنتقل إلى ما وراء حد النطاق. ضع هذا التمييز في اعتبارك عند تشخيص عنصر متداخل ما زال يشبه العنصر الأب. MDN: شرح @scope.

كما يوضح الجذر الصريح مثل .shape-card التبعية عند نقل CSS بين الملفات. يجب أن يحتوي المستند الوجهة على عنصر بهذا الصنف. نقل ورقة الأنماط وحدها لا يوفر الترميز المطلوب.

ما حدود دعم المتصفحات؟

تصنّف MDN حاليًا @scope ضمن Baseline 2026، أي أنها أصبحت متاحة حديثًا عبر أحدث إصدارات المتصفحات منذ مارس 2026. قد لا تدعمها المتصفحات الأقدم. وجود جهاز Mac على مكتبك لا يحدد ميزات CSS التي يدعمها المتصفح المثبّت عليه؛ فتحقق من معلومات التوافق الخاصة بالإصدارات التي تنوي استخدامها. MDN: توافق المتصفحات مع @scope.

أبقِ تنسيقات البطاقة الأساسية في قواعد الأصناف العادية أعلاه عند الحاجة إلى دعم المتصفحات الأقدم. عندئذٍ يمكن أن يظل تنسيق الفقرة الاختياري محدد النطاق تحسينًا إضافيًا. تتيح معالجة أخطاء CSS للمتصفحات تجاهل المحتوى غير المدعوم ومواصلة معالجة CSS الصالح، لذا فإن وجود ورقة أنماط لا يثبت أن كل قاعدة فيها قد طُبّقت. MDN: معالجة أخطاء CSS.

لتطبيق تنسيق الفقرة نفسه من دون @scope، امنح فقرة البطاقة صنفًا مخصصًا مثل shape-card__caption، ثم استهدف ذلك الصنف في قاعدة عادية. يضيف هذا رابطًا في الترميز، لكنه يجنّب الاعتماد على تحديد النطاق الأصلي للحصول على النتيجة.

لا تضف سمة scoped إلى عنصر style متوقعًا السلوك نفسه. فقائمة السمات الخاصة بهذا العنصر في معيار HTML الحالي لا تتضمنها. يستخدم تحديد النطاق الأصلي في CSS قاعدة @scope. معيار HTML: عنصر style، MDN: صياغة @scope.

كيف تحافظ على قابلية نقل الصفحة؟

في هذا المثال، يحافظ نقل المجلد الكامل form-study على العلاقة بين index.html وshared.css. أما نقل HTML وحده فيترك ورقة الأنماط وراءه. استخدم عقد التبعيات البسيط هذا قبل تسليم صفحة من تأليفك أو إعادة تنظيمها:

  1. الترميز: حافظ على أصناف المكوّن وأي بنية تتطلبها محدداته.
  2. ورقة الأنماط: أرفق ملف CSS وأبقِ رابط HTML يشير إلى موقعه.
  3. الموارد: أرفق أي ملفات مشار إليها في CSS، مع الحفاظ على مساراتها أو تحديثها.
  4. المتصفح: احتفظ بمسار تنسيق مدعوم لإصدارات المتصفح التي ستفتح الصفحة.

يصبح الفحص الثالث مهمًا عندما يكتسب المكوّن خطوطًا أو ملفات زخرفية. توثّق MDN أن عناوين URL النسبية في CSS تُحل نسبةً إلى عنوان URL لورقة الأنماط. لذلك قد يؤدي نقل التصريحات إلى ورقة أنماط في مجلد آخر إلى تغيير موقع المورد الذي تشير إليه. MDN: دالة CSS url().

على سبيل المثال، إذا نُقلت ورقة أنماط خارجية من مجلد المشروع إلى مجلد فرعي باسم styles، فسيشير تصريح مباشر إلى url("assets/tile.png") داخل styles/assets الآن. حدّث المسار أو حافظ على بنية المجلدات المقابلة. يتجنب المثال العملي هذه التبعية برسم شكله باستخدام CSS وحده.

إذا كان تسليم ملف واحد هو الأولوية، فأدرج CSS المزوّد في عنصر style داخل head في المستند، واحذف رابط ورقة الأنماط. عندئذٍ لا يحتاج المثال الحالي إلا إلى ملف HTML. احتفظ بالمحددات نفسها، بما فيها أي كتلة اختيارية @scope ذات جذر صريح. يدعم HTML تضمين ورقة أنماط عبر عنصر style. معيار HTML: عنصر style.

تحقّق من القرار باختبار النقل وإعادة التحميل

أنشئ نسخة من مجلد المشروع الكامل في موقع آخر، ثم افتح ملف HTML المنسوخ في متصفحك. في تلك النسخة، غيّر لون خلفية الشكل في shared.css، واحفظ الملف وأعد تحميل الصفحة. يؤكد التغيير المرئي أنك عدّلت ورقة الأنماط التي تستخدمها الصفحة المنسوخة.

بعد ذلك، افحص البطاقة والملاحظة. تحافظ النتيجة الناجحة على تنسيق البطاقة، وتُبقي الملاحظة خارج قاعدة الفقرة الاختيارية محددة النطاق. إذا فقدت الصفحة كلها تنسيقها، فتحقق أولًا من اسم ملف CSS ومسار الرابط. وإذا غاب التنسيق الاختياري وحده، فتحقق من دعم المتصفح والجذر المحدد للنطاق. وإذا تغيّر عنصر غير متعلق، افحص المحددات التي يمتد تأثيرها إلى ما وراء المكوّن المقصود.

عند إعادة فتح HTML في TextEdit، استخدم File > Open، ثم Show Options وIgnore rich text commands إذا احتجت إلى رؤية مصدره. وتوثّق Apple أيضًا الإعداد Display HTML files as HTML code instead of formatted text لعمليات الفتح المستقبلية. العمل مع مستندات HTML في TextEdit على Mac.

اختر CSS المضمّن عندما تكون المهمة الأساسية هي إبقاء هذه الصفحة الصغيرة مجتمعة. واختر ورقة أنماط مشتركة عندما ينبغي لعدة صفحات استخدام القواعد نفسها التي تتم صيانتها. أضف تحديد النطاق الأصلي حيث تبسّط حدوده تلك القواعد ويسمح دعم المتصفح بذلك. واختتم بنقل الملفات الفعلية وإعادة فتحها؛ فهذا يتحقق من علاقات الترميز وورقة الأنماط والموارد التي يعتمد عليها الترتيب الذي اخترته.

المصادر