كيفية إدخال طبقات تتابع CSS في ورقة أنماط موجودة

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

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

لماذا تخسر الأنماط الجديدة الموضوعة في طبقات أمام القواعد الموجودة؟

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

تأمل مقطع CSS هذا الذي يستهدف عنصرًا يحمل الصنف tile:

.tile {
  background-color: #b8bdc5;
}

@layer components {
  .tile {
    background-color: #246a73;
  }
}

سيظل لون الخلفية رماديًا. فتسمية الطبقة overrides، أو نقل كتلتها إلى موضع أبعد في الملف، أو زيادة تخصيص محددها، لا يغير أولوية القاعدة العادية غير الموضوعة في طبقة. ليس لأسماء الطبقات معنى مضمّن؛ فالترتيب المعلن هو ما يحدد العلاقة بينها. MDN: طبقات التتابع.

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

نوع الإعلان	الأولوية من الأدنى إلى الأعلى
عادي	الطبقة المعلنة أولًا ← الطبقات المعلنة لاحقًا ← القواعد غير الموضوعة في طبقة
!important	القواعد غير الموضوعة في طبقة ← الطبقات المعلنة لاحقًا ← الطبقة المعلنة أولًا

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

أي حد للترحيل ينبغي أن تختار؟

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

وضعك	الخطوة العملية التالية	النتيجة
يجب أن تحتفظ CSS الموجودة بأولويتها	اتركها من دون طبقة وأضف قيمًا افتراضية في طبقات ذات أولوية أدنى	توفر الطبقات الجديدة قيمًا عندما لا تتنافس معها قواعد أقوى
يمكنك تعديل CSS الموجودة	ضع القواعد القديمة المؤهلة داخل @layer legacy	يمكن للطبقات اللاحقة تجاوز الإعلانات القديمة العادية
يمكنك تغيير نقطة إدخال ورقة الأنماط	استورد الملف الموجود باستخدام layer(legacy)	تنضم ورقة الأنماط المستوردة إلى تلك الطبقة من دون إعادة كتابة محدداتها
لا يمكنك تغيير CSS القديمة المتنافسة أو طريقة تحميلها	أبقِ التجاوز الضروري مؤقتًا من دون طبقة	ستظل بحاجة إلى معالجة التخصيص وعوامل التتابع الأخرى

تتبع هذه الخيارات آليات الطبقات الثلاث الموثقة في CSS: يعلن تصريح أسماء الطبقات، وتُسنَد القواعد إلى طبقة عبر كتلة، وتُسنَد ورقة الأنماط المستوردة إلى طبقة عبر استيراد موضوع في طبقة. لا ينقل التصريح وحده القواعد الموجودة. التتابع والوراثة في CSS، المستوى 5: التصريح عن طبقات التتابع.

قد يكون إحاطة القواعد العادية بطبقة ملائمًا لورقة أنماط صغيرة. أما في حالة ملف خارجي موجود، فينشئ الاستيراد الموضوع في طبقة حدًا واضحًا. لا تضع قواعد @import الموجودة داخل كتلة @layer؛ فعمليات الاستيراد قواعد على المستوى الأعلى تخضع لقيود الموضع. MDN: @import.

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

كيف تنشئ مثالًا محليًا كاملًا على جهاز Mac؟

أنشئ مجلدًا يحتوي على ملفات النص العادي الثلاثة التالية. استخدم محرر شيفرة وحافظ على امتدادي .html و.css. لا تحتاج الملفات إلى حزم أو نصوص برمجية أو خطوط أو أصول محمّلة. أسماؤها موارد لعينة محلية.

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layer sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="sample">
    <h1>Shape sample</h1>
    <p>Tile A</p>
    <div class="tile" aria-label="Sample shape"></div>
  </main>
</body>
</html>

يرتبط المستند فقط بـ styles.css. يستخدم HTML العنصرين rel="stylesheet" وhref لربط ورقة الأنماط الخارجية بالصفحة. لا يعرّف معيار HTML الحالي سمة layer للعنصر link؛ لذا أسند المورد إلى طبقة عبر CSS. معيار HTML: عنصر الرابط.

احفظ ورقة الأنماط الكاملة هذه باسم legacy.css. وهي تمثل قواعد موجودة تبقى محدداتها كما هي:

body {
  margin: 2rem;
  font-family: system-ui, sans-serif;
  color: #26313a;
  background-color: #f4f5f7;
}

#sample .tile {
  width: 6rem;
  height: 6rem;
  background-color: #b8bdc5;
  border-radius: 0;
}

احفظ ورقة الأنماط الكاملة هذه، وهي نقطة الإدخال، باسم styles.css:

@layer legacy, components;
@import url("legacy.css") layer(legacy);

@layer components {
  .tile {
    background-color: #246a73;
    border-radius: 50%;
  }
}

افتح sample.html في إصدار حديث من Safari أو Firefox لسطح المكتب. النتيجة المتوقعة دائرة بلون فيروزي أسفل التسمية Tile A. توفر طبقة التوافق الأبعاد، بينما توفر طبقة المكوّنات اللاحقة لون الخلفية والشكل المستدير. يتغلب محدد الصنف الواحد فيها على محدد المعرّف القديم لأن الإعلانات تتنافس عبر طبقات مختلفة. MDN: @layer.

ينشئ ملف نقطة الإدخال ترتيب الطبقات أولًا، ويُبقي الاستيراد قبل الكتلة، ثم يضيف قواعد المكوّن. وهذا يتبع قواعد صياغة الاستيراد وموضعه الموثقة. يمكن أن يسبق تصريح الطبقات عمليات الاستيراد؛ أما كتلة الطبقة فلا يمكنها ذلك. MDN: @import.

ما الذي ينبغي تغييره في صفحة موجودة؟

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

استخدم المثال لتوقع الإخفاق: أضف رابطًا منفصلًا مباشرًا إلى ورقة الأنماط legacy.css، ويمكن لإعلاناتها العادية أن تعيد المربع الرمادي. يؤدي حذف هذا التحميل المباشر إلى إبقاء القواعد القديمة داخل الطبقة المقصودة. يستند هذا التوقع إلى وضع المواصفة للقواعد غير الموضوعة في طبقة بعد الطبقات الصريحة في ترتيب الأولوية العادية. وحدة التتابع والوراثة في CSS، المستوى 5: ترتيب الطبقات.

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

كيف تتحقق من الترحيل في Firefox على macOS؟

افتح صندوق أدوات المطور في Firefox باستخدام Command–Option–I واختر Inspector. حدّد الشكل النموذجي في شجرة المستند، ثم افحص عرض Rules. توثق Mozilla اختصار صندوق الأدوات على Mac وأدوات فحص CSS في Inspector. كل اختصارات لوحة المفاتيح، فحص CSS وتحريره.

تحقق من المثال خاصيةً واحدةً في كل مرة:

1. ابحث عن background-color. ينبغي أن يتغلب إعلان المكوّن على القيمة الرمادية القديمة.
2. ابحث عن border-radius. ينبغي أن تنتج قيمة المكوّن دائرة.
3. تحقق من width وheight. ينبغي أن تظل قيمتاهما آتيتين من الملف القديم.
4. عطّل مؤقتًا إعلان خلفية المكوّن. ينبغي أن يظهر اللون الرمادي القديم مع بقاء الشكل مستديرًا.

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

في صفحة حقيقية، كرر هذا الفحص للحالات التي غيّرتها: النوافذ الأضيق، وشروط الوسائط ذات الصلة، ومتغيرات المكوّن. احفظ التعديلات الدائمة في الملفات المصدرية وأعد التحميل؛ فالتغييرات المؤقتة في أدوات الفحص مفيدة للتشخيص.

ما الذي قد يتغير على نحو غير متوقع أثناء الترحيل؟

الإعلانات المهمة تعكس الترتيب المقصود

مع @layer legacy, components، يتغلب إعلان مهم في legacy على إعلان مهم متنافس في components. لذلك قد يجعل نقل القواعد القديمة المهمة إلى طبقة مبكرة تجاوزها أصعب. كما تتقدم جميع إعلانات أوراق الأنماط المهمة الموضوعة في طبقات على إعلانات أوراق الأنماط المهمة المتنافسة غير الموضوعة في طبقة ضمن مصدر المؤلف والسياق نفسيهما. MDN: @layer.

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

تحتاج الأنماط المضمنة إلى معالجة منفصلة. تتقدم الأنماط المضمنة العادية على قواعد أوراق أنماط المؤلف العادية، وتتقدم الأنماط المضمنة المهمة على إعلانات المؤلف المهمة الأخرى. لا يؤدي نقل ورقة أنماط إلى طبقة إلى نقل سمة النمط الخاصة بعنصر. MDN: مقدمة إلى تتابع CSS.

لا يمكن لتصريح لاحق إعادة ترتيب الطبقات الموجودة

تستمد الطبقات ترتيبها من أول تصريح عنها. تؤدي إعادة فتح طبقة مسماة إلى إضافة قواعد إليها من دون نقل موضعها. ضع الترتيب المقصود قبل أن تنشئ الصفحة تلك الطبقات لأول مرة، بما في ذلك إنشاؤها عبر أوراق الأنماط المستوردة. وحدة التتابع والوراثة في CSS، المستوى 5.

للترحيل التدريجي، أبقِ الترتيب الأولي قصيرًا وصريحًا. انقل مجموعة متماسكة من القواعد، وافحص القواعد الفائزة، ثم تابع. فنقل قاعدة واحدة مع ترك نسخة متنافسة غير موضوعة في طبقة غالبًا ما يُبقي حد الأولوية نفسه الذي كنت تقصد إزالته.

ما قيود دعم المتصفحات المهمة على Mac؟

تشير MDN إلى أن @layer مدعومة على نطاق واسع في المتصفحات منذ مارس 2022. وتوثق WebKit دعم طبقات التتابع في Safari 15.4. تصف هذه التواريخ مدى توفر الميزة؛ لكنها لا تثبت أن كل جهاز Mac يتضمن متصفحًا يدعمها. تحقّق من الإصدارات التي تحتاج صفحتك فعليًا إلى دعمها. MDN: @layer، WebKit: ميزات WebKit الجديدة في Safari 15.4.

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

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

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

المصادر

• التتابع والوراثة في CSS، المستوى 5 — W3C.
• وحدة التتابع والوراثة في CSS، المستوى 5 — مجموعة عمل CSS.
• معيار HTML — WHATWG.
• قاعدة CSS @layer — MDN Web Docs.
• قاعدة CSS @import — MDN Web Docs.
• طبقات التتابع — MDN Web Docs.
• مقدمة إلى تتابع CSS — MDN Web Docs.
• معالجة أخطاء CSS — MDN Web Docs.
• كل اختصارات لوحة المفاتيح — Mozilla.
• فحص CSS وتحريره — Mozilla.
• ميزات WebKit الجديدة في Safari 15.4 — WebKit.