طبقات الشلال في CSS: أي قاعدة تغلب، وعند أي خطوة

ما طبقات الشلال؟

طبقة الشلال درجٌ مسمّى تضع فيه شيفرة CSS لتستطيع ترتيب مجموعات كاملة من القواعد بعضها إزاء بعض، بلا أن تمسّ محدِّدًا واحدًا. تعلن الترتيب مرةً — ‏@layer reset, components, utilities — ومن ثمّ يغلب كل ما في utilities كل ما في components، مهما كانت المقارنة بين المحدِّدات. وهي الآلية التي كسبتها CSS للمشكلة التي لم تُصمَّم الخصوصية لحلّها أصلًا: أن يكفّ إطار عمل ومكتبة مكوّنات وتعديلاتك أنت عن التصارع.

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

والمواصفة تبرهن ذلك بنفسها. فهي تعرض قاعدة audio مجرّدة خصوصيتها 0,0,1، مكتوبةً أولًا، تغلب قاعدة audio[controls] خصوصيتها 0,1,1 داخل طبقة reset — وتقول صراحةً إن للتصاريح بلا طبقة الأسبقية وإن كانت أقل خصوصيةً وأسبق في ترتيب الظهور. وذلك هو المثال الافتراضي في هذه الصفحة، والأداة تشير إلى خطوة الطبقات بوصفها التي حسمته.

كيف تستعملها

1. الصق القواعد المتنافسة. تُقرأ بيانات الطبقات وكتلها والقواعد العادية جميعًا. واقتصر على التصاريح المتنازعة فعلًا — فالشلال يحسم خاصيةً واحدة في كل مرة، والأداة تنبّهك إن وجدت أكثر من واحدة.
2. اقرأ الخطوة التي حسمت، لا الغالب وحده. الحكم يسمّي أي الخطوات الست فرّقت بين الأوّلين. وتلك هي الفائدة: فإن قال الخطوة الرابعة، فلن يغيّر النتيجةَ صنفٌ تضيفه إلى محدِّد.
3. راجع ترتيب الطبقات. يظهر بالترتيب الذي يستعمله المتصفح، والطبقة النهائية الضمنية للأنماط بلا طبقة في الأسفل حيث تقع فعلًا. وأزرار الأمثلة تغطي مثال المواصفة، وimportant ينقلب على صاحبه، وترتيب طبقات محدَّدًا سلفًا، وتنافسًا يصل إلى الخصوصية فعلًا.

لماذا يُضعف important القاعدةَ التي بلا طبقة

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

ثم اضمم ذلك إلى الطبقة النهائية الضمنية. فالتصريح بلا طبقة يقع آخرًا، وذلك ما يجعله الأقوى بين التصاريح العادية. فإن وسمتَه بـimportant انقلب الترتيب: صار الأخير هو الأضعف، فتنتقل القاعدة نفسها من الغلبة على كل الطبقات إلى الخسارة أمامها جميعًا. ووسمُ تعديلٍ بلا طبقة بـimportant — وهو ردّ الفعل حين يأبى شيء أن يُطبَّق — هو عين الحركة الخاطئة، وهو زرّ المثال الثاني في هذه الصفحة.

وملحوظة المواصفة تبيّن لماذا هذا متّسق لا شاذّ: فهو يتبع منطق ترتيب المصادر نفسه، حيث تكون أنماط المؤلف الموسومة بـimportant أضعف من أنماط المستخدم الموسومة بها، مع أن العادية من المؤلف أقوى من العادية من المستخدم. فوسم important موجود ليتمكن من هو أسفل في الكومة من فرض ما لا يستطيع من فوقه نقضه. والطبقات ترث ذلك المنطق، فمعنى الوسم أفسِح للطبقة الأساس، لا اغلِب بأي ثمن.

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

الخصوصية هي الخطوة الخامسة من ستّ

يفرز الشلال التصاريح بستة معايير على الترتيب، ويقف عند أولها فرقًا. أولًا المصدر والأهمية، ثم السياق، ثم أالتصريح ملصقٌ بالعنصر مباشرةً، ثم الطبقات، ثم الخصوصية، وأخيرًا ترتيب الظهور. فالخصوصية خامسة. وكل ما فوقها يحسم قبل أن يُنظَر في المحدِّد أصلًا.

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

والصفحتان تتشاركان محرّكًا واحدًا لهذا بعينه — فأرقام الخصوصية هنا يحسبها الوحدة نفسها، فلا يمكن أن تطبعا قيمتين مختلفتين لمحدِّد واحد.

وثمة عضو آخر في القائمة يحسن معرفته. فالأنماط الملصقة مباشرةً — خاصية style — تقع في الخطوة الثالثة، فوق الطبقات وفوق الخصوصية. ولهذا يغلب النمط السطري محدِّدَ المعرِّف بلا أن يكون أخصّ من شيء: فهو يغلب قبله بخطوتين.

ما لا تفعله هذه الأداة

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

وخطوتان من الست لا تُطبَّقان، وللسبب نفسه: لا شيء تُطبَّقان عليه. فالسياق يحتاج حدود شجرة ظلّ، وليست في ورقة ملصوقة. ورتبتان من رتب المصدر الثماني هما تصاريح الانتقال والحركة، وتحتاجان شيئًا يعمل فعلًا. والجدول الكامل معروض وتلك الصفوف موسومة، فالإغفال ظاهر لا مكتوم.

وهي لا تعرف مستندك كذلك. فالشلال لا يقارن إلا تصاريح تنطبق على العنصر نفسه والخاصية نفسها، وأينطبق محدِّدان على العنصر نفسه سؤالٌ عن HTML عندك. والأداة تفترض أن كل ما تلصقه متنازع؛ فالقاعدة التي لا تنطبق أبدًا لا تدخل التنافس أصلًا.

وأخيرًا، هذه تحسم الشلال لا الطريق كله من ورقة الأنماط إلى البكسل المرسوم. فالوراثة، وكلمتا revert وrevert-layer، والانتقالات، كلها تعمل بعد اختيار الغالب، ولا شيء منها ممثَّل هنا.

لماذا هي مجانية؟

قراءة CSS وفرز التصاريح عملُ نصّ يجري في متصفحك. ولا خادم في الأمر، فلا شيء يُحاسَب عليه ولا حساب يُنشأ.

ولا يُرفع شيء ولا يُحفظ شيء. أعد تحميل الصفحة تجدها قد نسيت شيفرتك.