تتقدم الطبقة المتأخرة في التصريحات العادية، وينعكس ترتيب الطبقات للمهمة. نقارن تصريحات المؤلف في حالات مضبوطة. [2]
الخلاصة السريعة
- في A فاز الأزرق رغم أن كتلة early الحمراء مكتوبة بعد late.
- في B فاز الأخضر خارج الطبقات؛ وفي C فازت early الحمراء مع أهمية الجميع.
- بتبديل سطر ترتيب الإنشاء وحده في D عاد الأزرق.
- أضافت E البرتقالي إلى early، وبقي اللون المحسوب أزرق.
خمس صفحات صغيرة بالإعداد نفسه
خصصنا لكل حالة صفحة جديدة فيها فقرة واحدة تحمل الصنف chip. كل المحددات المتنافسة هي الاسم نفسه مسبوقا بنقطة؛ لا نقارن محددا لمعرف بمحدد لصنف. خصصنا الأحمر للطبقة early والأزرق للطبقة late، والأخضر للتصريح الذي نضيفه خارج الطبقات. لا نضع أنماطا في سمة style، ولا حركات أو انتقالات أو طبقات متداخلة.
الأسماء early وlate اختيارات لنا، وليست أسماء محجوزة تصنع الأولوية من معناها الإنجليزي. بدأنا بسطر يذكر early ثم late. وبعده كتبنا كتلة late أولا ثم كتلة early، عمدا، حتى يختلف ترتيب الكتل الظاهر عن ترتيب الإنشاء الذي سجلناه.
| الحالة | سطر الإنشاء | الإعداد | اللون المقروء |
|---|---|---|---|
| A | early, late | طبقتان عاديتان | أزرق |
| B | early, late | A مع أخضر خارجي | أخضر |
| C | early, late | B مع أهمية الجميع | أحمر |
| D | late, early | C بترتيب مبدل | أزرق |
| E | early, late | A مع إعادة فتح early | أزرق |
ابدأ بالحالة A
احفظ المقطع التالي في ملف HTML وافتحه وحده. [1]
<style>
@layer early, late;
@layer late {
.chip {color:blue}
}
@layer early {
.chip {color:red}
}
</style>
<p class="chip">Probe</p>قرأنا لون الفقرة في A فوجدناه أزرق، أي RGB بالقيم صفر وصفر و255. لو اعتمدت على أن الأحمر آخر لون مكتوب، لتوقعت نتيجة لم تظهر في هذه الصفحة. احتفظ بسطر الأسماء الأول مع الكتلتين؛ حذف ذلك السطر يغير التجربة التي نقارنها هنا.
يحدد الإنشاء الأول ترتيب الطبقات؛ وإعادة فتح اسم موجود لا تنقله. [1]
أضف الأخضر ثم اجعل الجميع مهما
في B ننسخ A إلى ملف مستقل ونضيف المقطع الأخضر خارج الكتلتين، داخل style. [1] [2]
.chip {color:green}أصبحت القراءة في B خضراء: صفر و128 وصفر. أبقينا المحدد chip وموضع الفقرة والطبقتين، وأضفنا تصريحا واحدا. لذلك لا يفسر التحول اختلاف العنصر الذي نقيسه، أو ظهور محدد أكثر تعقيدا في الملف.
في C نبدأ من B ونضيف !important بعد قيمة color في التصريحات الثلاثة جميعا. [2]
صارت القراءة حمراء: 255 وصفر وصفر. لم نضع العلامة على الأحمر وحده؛ الأزرق والأخضر يحملانها أيضا. لهذا يختبر الصف C المنافسة بين تصريحات مهمة، ولا يختبر مجرد تغلب تصريح مهم وحيد على تصريحين عاديين.
داخل هذا النطاق، تتقدم التصريحات العادية خارج الطبقات على نظيراتها داخلها، أما المهمة فالعكس. [2]
بدل الترتيب أو أعد فتح الاسم
في D ننسخ C ونستبدل سطر الأسماء الأول فقط بالمقطع المعروض. وفي E نعود إلى A ونضيف كتلة early البرتقالية المعروضة. [1]
@layer late, early;@layer early {
.chip {color:orange}
}قرأنا الأزرق في D. صارت late الأولى في سطر الإنشاء، مع بقاء العلامات الثلاث ومواضع الكتل كما في C. لا تزال كلمة late تعني الشيء نفسه لغويا، لكن دورها في هذه الورقة تغير بتغيير ترتيب الأسماء الذي كتبناه.
في E عدنا إلى A وأضفنا البرتقالي إلى early. بقي الأزرق فائزا؛ إعادة فتح الاسم لم تنقل طبقتنا إلى نهاية ترتيب الإنشاء. [1]
اقرأ النتيجة قبل تعميمها
من وحدة تحكم كل ملف، نفذ سطر القراءة التالي. [1] [2]
getComputedStyle(document.querySelector(".chip")).colorنفذنا الحالات الخمس في صفحات مستقلة في Edge 155.0.4283.45، وأبقينا سجل اللون المحسوب بجانب تكوين كل صفحة. بطاقات الرسم تعيد تلك القراءات، أما لوحة الترتيب فتختصر المقارنة التي اختبرناها؛ لا تعتمد على تمييز اللون وحده لأن اسم الحالة واسم الفائز مكتوبان.
إذا كانت نتيجتك مختلفة، ابدأ بقراءة الملف الذي فتحتَه: هل أضفت العلامة إلى الألوان الثلاثة في C وD؟ هل عدت إلى A قبل إنشاء E؟ وهل وضعت الأخضر خارج الأقواس؟ هذه أسئلة محددة عن نسخنا؛ لا نستنتج منها ترتيب كل أنماط صفحة أخرى تحتوي مصادر أو مؤثرات إضافية.
المراجع
أُعدّ هذا المقال بمساعدة الذكاء الاصطناعي وراجعته أدوات ذكاء اصطناعي. لا يُنسب إلى مراجع بشري أو خبير مستقل. منهجية المحتوى.