تعلم تطوير الويب التعاقب والتخصيص والوراثة في CSS

نهدف في هذا المقال إلى تنمية قدرتك على استيعاب بعضٍ من أهم المفاهيم الأساسية في CSS وهي التعاقب cascade والتخصيص specificity والوراثة inheritance، فهذه المفاهيم الثلاثة تتحكم بكيفية تطبيق CSS على HTML وتمكنك من معرفة كيفية حل المشاكل الناتجة عن تطبيق قواعد تنسيق مختلفة على العنصر ذاته، أي حل حالات النزاع.

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

• أساسيات عمل الحاسوب.
• أساسيات تثبيت البرمجيات.
• أساسيات التعامل مع الملفات.
• فكرة عن أساسيات HTML.
• فكرة عن أساسيات عمل CSS

تنازع قواعد CSS

يأتي المصطلح CSS اختصارًا لعبارة Cascading Style Sheets وترجمتها أوراق الأنماط المتعاقبة أو المتسلسلة ومن المهم جدًا فهم معنى كلمة متعاقب Cascading، فطريقة تعاقب أو تسلسل القواعد هي مفتاح فهم لغة CSS.

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

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

مفهوم التعاقب Cascading

يعني هذا المفهوم ببساطة شديدة أنّ ترتيب ظهور القواعد في شيفرة CSS مهم، فعندما تُطبق قاعدتان لهما مستوى التخصيص ذاته، فستُستخدَم القاعدة التي تظهر تاليًا في الشيفرة.

لدينا في المثال التالي قاعدتان يمكن تطبيقهما على عنصر العنوان <h1>، لكن ستكون النتيجة هي ظهوره باللون الأزرق والسبب في ذلك أنّ القاعدتين تمتلكان محدِّد العنصر ذاته، أي أنهما متساويتان في التخصيص لذا ستكون الغلبة للقاعدة التي تظهر أخيرًا ضمن الشيفرة:

التخصيص Specificity

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

• محدد العنصر element selector أقل خصوصيةً لأنه سيختار كل عناصر الصفحة من النوع ذاته لذا يُعطى تقييمًا أقل فيما يتعلق بالخصوصية. كما أن محددات العناصر الزائفة Pseudo-element selectors تملك نفس درجة تخصيص محددات العناصر العادية.

• محدد الصنف class selector أكثر خصوصيةً لأنه سيختار فقط عناصر الصفحة التي تحمل الصنف نفسه، أي قيمة السمة class فيها متماثلة، وسيُعطى تقييمًا أعلى فيما يتعلق بالخصوصية. كما أن محددات الخاصيات attribute selectors والأصناف الزائفة pseudo-classes تملك نفس درجة خصوصية الأصناف.

إليك مثالًا فيما يلي، إذ لدينا في المحرر التفاعلي التالي قاعدتان يمكن تطبيقهما على عنصر العنوان <h1>، لكن العنوان سيظهر باللون الأحمر لأن محدد الصنف main-heading يملك تخصيصًا أعلى، علمًا أنّ القاعدة الأخرى التي تضم محدد العنصر <h1> ظهرت تاليًا في الشيفرة البرمجية:

سنشرح بمزيد من التفصيل طريقة تقييم التخصيص لكل محدِّد لاحقًا.

الوراثة Inheritance

من الضروري كذلك اعتبار مفهوم الوراثة لمعرفة التنسيقات الصحيحة التي تطبق على العناصر، حيث ترث بعض العناصر الأبناء بعض قيم التنسيق المطبقة على آبائها وبعضها الآخر لا يرث هذه القيم، فإذا ضبطت قيمتَي الخاصيتين color و font-family على عنصر ما، فسيرث كل عنصر ابن ضمنه قيم هاتين الخاصيتين إذا لم تطبق عليه تنسيقًا خاصًا به مباشرةً.

لا يمكن في المقابل توريث بعض الخاصيات مثل خاصية العرض width، فإذا ضبطت قيمة هذه الخاصية لعنصر ما لتكون 50‎%‎، فلن يكون عرض العناصر الأبناء 50‎%‎ كما هو حال العنصر الأب، لأن الوضع في هذه الحالة سيكون مربكًا ومحبطًا.

ملاحظة: يمكنك معرفة إن كانت الخاصية تورث أم لا من قسم التعريف الرسمي لها في المرجع MDN CSS، على سبيل المثال انظر إلى التعريف الرسمي لخاصية اللون color وستجد yes بجانب Inherited ما يعني أنها خاصية تورث من العنصر الأب لأبنائه.

آلية العمل المشتركة لمفاهيم الوراثة والتخصيص والتعاقب

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

استيعاب مفهوم الوراثة

لدينا في المثال التالي عنصر قائمة غير مرتبة <ul> الذي يضم مستويين متداخلين من القوائم غير المرتبة، وقد قمنا بضبط قيم الحاشية padding والإطار border ولون الخط color للعنصر الخارجي أي العنصر الأب الموجود في المستوى الأول.

كما تلاحظ فقد طُبِّق اللون على الأبناء المباشرين وعلى غير المباشرين أيضًا وهم العناصر <li> داخل قائمة <ul> الأولى المتداخلة مع قائمة <ul> ذات المستوى الأول، ثم أضفنا الصنف special إلى القائمة الثانية <ul> المتداخلة مع قائمة <ul> ذات المستوى الأول وطبقنا عليها لونًا مختلفًا، وكما تلاحظ ستورَّث هذه الخاصية إلى العناصر الأبناء لهذه القائمة أيضًا:

لم تورّث خاصيات مثل العرض width والهوامش margins والحاشية padding والإطارات borders كما شرحنا سابقًا، فإذا وُرِّثت خاصية الإطار في المثال السابق، لكنت سترى إطارًا حول كل قائمة وعنصر قائمة ابن، وهذا بالطبع أمر غير مرغوب على الإطلاق.

ما يورّث إذًا من خاصيات افتراضيًا وما لا يورّث أمر يعتمد بشدة على المنطق العام لفكرة التنسيق.

التحكم بالوراثة

تتيح CSS خمس قيم عامة تأخذها الخاصيات وتتحكم بموضوع وراثة التنسيقات، إذ تقبل كل خاصية القيم التالية:

• inherit: تجعل قيمة الخاصية التي نطبقها على عنصر محدد نفسها القيمة المطبقة على العنصر الأب، أي أنها تُفعِّل الوراثة.
• initial: تجعل قيمة الخاصية التي نطبقها على العنصر نفسها القيمة الأولية للخاصية.
• revert: تعيد ضبط قيمة الخاصية المطبقة على العنصر لتكون نفسها القيمة الافتراضية للمتصفح بدلًا من القيمة الافتراضية التي تأخذها الخاصية، ولهذه القيمة نفس عمل القيمة unset في حالات كثيرة.
• revert-layer: تعيد ضبط قيمة الخاصية المطبقة على العنصر المحدد لتأخذ القيمة المحددة في طبقة تعاقب سابقة cascade layer في تسلسل التنسيقات. (شرح فكرة cascade layer خارج نطاق المقال الحالي لكنها باختصار طريقة تمكنك من تجاوز أولويات شيفرات CSS بسهولة بعض النظر عن درجة التخصيص).
• unset: تعيد قيمة الخاصية إلى وضعها الطبيعي، أي أنها تعمل عمل القيمة inherit إذا كانت الخاصية ترث التنسيقات افتراضيًا وإلا فستعمل عمل القيمة initial.

يتيح لك المحرر التفاعلي في الأسفل العمل مع شيفرة CSS وتعديلها لترى ما يمكن أن يحدث، فالعمل مباشرةً مع الشيفرة هو السبيل الأفضل لتتمكن من فهم CSS و HTML، وإليك بعض الأمثلة:

1. يمتلك عنصر القائمة الثاني الصنف my-class-1 والذي يجعل لون العنصر <a> الموجود داخله موروثًا، فكيف سيتغير لون الرابط إذًا إذا أزلت هذه القاعدة؟
2. هل فهمت السبب الذي جعل لون الرابط في عنصري القائمة الثالث والرابع كما هو عليه؟ لقد ضُبطت خاصية اللون في الثالث لتكون initial، ويعني ذلك استخدام القيمة الأولية للخاصية -وهي الأسود في هذه الحالة- وليست القيمة الافتراضية للمتصفح -وهي اللون الأزرق-، كما ضُبطت الخاصية على unset في عنصر القائمة الرابع ويعني ذلك أنّ قيمة الخاصية ستماثل قيمتها في العنصر الأب وتكون باللون الأخضر.
3. ما الروابط التي سيتغير لونها إن عرّفت القاعدة التالية a { color: red; } مثلًا؟
4. بعد قراءة الفقرة التالية التي تشرح طريقة إعادة ضبط جميع الخاصيات، عد إلى الكود مجددًا وقم بتغيير قيمة الخاصية color إلى all. لاحظ كيف أن الرابط الثاني سيظهر على سطر جديد ويكون له تعداد نقطي. ما هي الخصائص التي تعتقد أنها موروثة هنا؟

إعادة ضبط قيم جميع الخاصيات

تُستخدَم الخاصية المختصرة all لتطبيق إحدى القيم الخمسة العامة للوراثة على كل الخاصيات تقريبًا في اللحظة نفسها، إذ يمكن أن تأخذ إحدى القيم inherit أو initial أو revert أو revert-layerأو unset، وهي طريقة جيدة للتراجع عن التغييرات المطبقة على التنسيقات لكي تعود إلى نقطة بداية محددة قبل تطبيق تغييرات أخرى.

لدينا في المثال التالي عنصرَي نص اقتباس <blockquote>، طُبِّق على العنصر تنسيق يستهدف هذا العنصر بذاته، بينما طبق على الثاني صنف باسم fix-this يضبط الخاصية unset لهذا الاقتباس بالقيمة all.

حاول تغيير قيمة الخاصية all إلى قيم أخرى وراقب ما قد يحدث.

استيعاب مفهوم التعاقب

قد تدرك الآن السبب الذي يجعل لون فقرة نصية موجودة في مكان بعيد ضمن بنية HTML سيماثل لون العنصر <body> مثلًا، فقد رأينا سابقًا كيف نُطبِّق CSS على عنصر في أي مكان من المستند سواءً بإسناد تنسيقات إلى عنصر محدد أو بإنشاء صنف، وسنتابع الآن بشيء من التفصيل كيف يعمل مفهوم التعاقب وأي قاعدة ستُطبق عندما يمكن تطبيق أكثر من قاعدة تنسيق على نفس العنصر وكل قاعدة تتصمن نفس الخاصيات لكن بقيم مختلفة.

هنالك ثلاثة عوامل يمكن أخذها بالحسبان، وقد رتبناها في هذه القائمة حسب تزايد أهميتها:

1. ترتيب الشيفرة المصدرية Source order.
2. درجة التخصيص Specificity.
3. الأهمية Importance.

سنستعرض هذه العوامل لنرى كيف يتصرف المتصفح تمامًا عند انتقاء القاعدة التي يطبقها:

ترتيب الشيفرة المصدرية

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

التخصيص

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

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

يساعد هذا السلوك في تقليل التكرار في شيفرتك، ومن الممارسات الأكثر شيوعًا في هذا المجال هي تعريف تنسيقات معمّمة generic styles للعناصر الأساسية ثم بناء أصناف لتلك التي نريد تنسيقها بطريقة مختلفة، فقد عرفنا على سبيل المثال في الشيفرة التالية تنسيقًا معممًا لعنصر العنوان من المستوى الثاني ثم أنشأنا بعض الأصناف التي تغيّر بعض الخاصيات والقيم، وقد طُبِّقت القيم المعرفة في التنسيق المعمّم في البداية على كل عناصر العنوان من المستوى الثاني، ثم طُبِّقت القيم الأكثر تخصيصًا على العناصر التي تمتلك الأصناف الخاصة.

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

ملاحظة: تملك التنسيقات المضمنة inline style أسبقية على جميع الأنماط العادية بغض النظر عن الخصوصية وهي لا تحتوي على محددات، ولكن يعد تخصيصها أعلى بغض النظر عن المحددات المستخدمة في التنسيقات العادية.

وبالتالي يُقاس مقدار التخصيص باعتماد أربع قيم (أو مكوّنات) مختلفة هي التنسيق السطري inline style ومحدد المعرف ID ومحدد الصنف CLASS ومحدد العنصر ELEMENT ويمكن أن توازنها بفكرة منازل الآلاف والمئات والعشرات والآحاد لعدد من 4 خانات كما يلي:

1. التنيسقات المضمنة: يضاف 1 في خانة الآلاف لكل تصريح تنسيق ضمن السمة style، أي إن كان التنسيق سطريًا فلا توجد محددات في تصريحات كهذه لذلك سيكون تقييمها 1000.
2. Identifiers: يُضاف1 في خانة المئات لكل محدد مُعرّف ID Selector ضمن المحدد الكلي.
3. Classes: يُضاف 1 في خانة العشرات لكل محدد صنف أو محدد سمة أو صنف مجرَّد pseudo-class موجود ضمن المحدد الكلي.
4. Elements: يُضاف 1 في خانة الآحاد لكل محدد عنصر أو عنصر مجرَّد ضمن المحدد الكلي.

ملاحظة: لا تأثير للمحددات العامة * والموازنات (+ أو > أو ~ أو ' ') ونافيات الأصناف المجردة (not:) على التخصيص.

إليك جدول يوضح طريقة حساب نقاط التخصيص وكيفية حساب النقاط التي تمنح لكل حالة:

لنلق نظرةً قبل أن نتابع على تطبيق عملي:

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

• يتنافس أول محددين لتنسيق لون خلفية الرابط، ويربح الثاني جاعلًا لون الخلفية أزرقًا لأنه يضم محدد معرّفات إضافية في سلسلته وبالتالي حصل على 2-0-1 نقطة مقابل 1-0-0 للأول.
• يتنافس المحددين الثالث والرابع على تنسيق لون نص الرابط، ويربح الرابع جاعلًا لون النص أبيضًا على الرغم من امتلاكه محددات عناصر أقل بواحد من سابقه لكنه يحتوي على محدد صنف وبالتالي خسر نقطة وربح 10 وسيحصل على 1-1-3 نقطة مقابل 1-0-4 للثالث.
• يتنافس المحددان الخامس والسابع على تنسيق إطار الرابط عندما يمر مؤشر الفأرة فوقه ويخسر السادس مقابل الخامس بنتيجة 0-2-3 مقابل 0-2-4 لأنه يمتلك عددًا أقل بواحد من محددات العناصر، في حين يربح المحدد السابع في منافسته مع الخامس والسادس على الرغم من امتلاكه نفس العدد من المحددات الفرعية للخامس لكن وجود محدد صنف حسم النتيجة لصالحه وكانت 0-3-3 مقابل 0-2-3 و 0-2-4.

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

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

التصريح important!

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

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

ألق نظرةً على المثال التالي الذي يضم فقرتين نصيتين تمتلك أحدهما محدد معرّفات.

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

1. لاحظ تطبيق قيمتي الخاصيتين color و padding في القاعدة الثالثة، بينما لم تطبق قيمة الخاصية background-color والسبب أنها تصريحات ظهرت في آخر تسلسل الشيفرة، وعادةً ما تلغي الأخيرة ما جاء في الأولى.
2. ربحت القواعد الأعلى منها لأنّ محدد الصنف أعلى تخصيصًا من محدد العناصر.
3. يمتلك كلا العنصرين السمة class التي تأخذ القيمة better، لكن تمتلك الفقرة النصية الثانية المعرّف id ذو القيمة winning أيضًا، وطالما أنّ محددات المعرّفات أعلى تخصيصًا من محددات الأصناف -إذ لا يوجد سوى عنصر واحد في الصفحة يمتلك هذا المعرّف بينما قد تمتلك عدة عناصر الصنف نفسه- فمن المفترض أن يُطبَّق اللون الأحمر على الخلفية ويظهر الإطار الأسود الذي سماكته 1 بكسل حول الفقرة النصية الثانية، وستبقى الفقرة الأولى باللون الرمادي وبلا إطار وفقًا للقيم في محدد الصنف.
4. طُبّق بالفعل اللون الأحمر على خلفية الفقرة النصية الثانية ولم يُعرض الإطار الأسود، والسبب وجود التصريح important! في القاعدة الثانية بعد border: none مما يعني أنّ هذا التصريح سيكون الأعلى تخصيصًا على الإطلاق.

ملاحظة: ستكون الطريقة الوحيدة للتخلص من التصريح important! هو أن يأتي تصريح آخر بمستوى التخصيص نفسه لاحقًا في الشيفرة أو أن يأتي تصريح important! آخر له تخصيص أعلى.

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

تأثير موقع CSS

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

ترتيب الأهمية لمواقع CSS

تُطبَق التصريحات التي تتنازع على تنسيق عنصر وفق الترتيب التالي الذي يلغي فيه كل بند سابقه:

1. التصريحات الموجودة في ملف تنسيق عميل المستخدِم مثل التنسيق الافتراضي للمتصفح إذا لم توجد أية تنسيقات أخرى.
2. التصريحات العادية في ملف تنسيق المستخدِم، أي التنسيق الذي يطبقه المستخدِم.
3. التصريحات العادية في ملف تنسيق المطوّر، وهي التنسيقات التي يضعها مؤلفِي صفحات ويب.
4. التصريحات المهمة في ملف تنسيق المؤلف.
5. التصريحات المهمة في ملف تنسيق المستخدِم.
6. التصريحات المهمة في ملف تنسيق عميل المستخدِم.

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

الخلاصة

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

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

ترجمة -وبتصرف- للمقال Cascade and inheritance.

اقرأ أيضًا:

• المقال السابق: آلية عمل لغة CSS
• تعرف على CSS
• المحددات (Selectors) في CSS
• كيفية تحويل شيفرة CSS إلى تنسيقات مرئية