تكلمنا في الجزء الأول من سلسلة ال cascade عن ال specificity و ال order، سيكون حديثنا اليوم عن ال inline styles و important keyword.
Ibrahim Harchiche
الـ Inline Styles والـ Specificity
تعتبر ال inline styles ثاني أقوى حاجة في نظام ال cascade قبل ال important، فبالتالي ال inline styles بيفوزوا على ال specificity والطريقة الوحيدة عشان تعمل ليهم override هي عبر استخدام ال important.
<style>
h1#myId.my-class {
color: blue;
} /* specificity: 1,1,1 */
</style>
<body>
<h1 style="color: red" id="myId" class="my-class">
A red heading.
</h1>
</body>
في غاية الأهمية - Important
في الجزء الأول من السلسلة كنا قلنا أننا بنرجع لل order فقط لما تكون ال specificity متساوية، أما لو ال specificity غير متساوية فلا اعتبار لل order، نفس الشيء مع ال important، لو في important وحده فلا قيمة لل inline styles أو ال specificity أو ال order، ودي قوة ال important أنو مينفعش تعمل ليها override إلا ب important أختها، أما لو في أكثر من وحدة important فعندها بنقارن بينهم من ناحية inline styles و specificity و order.
<style>
h1 {
font-size: 16px;
color: green !important;
}
.heading#Heading {
font-size: 32px;
color: blue;
}
</style>
<body>
<h1 style="color: red" class="heading" id="Heading">
A green heading with 32px font size.
</h1>
</body>
رغم أن ال selector الثاني عنده specificity أعلى من الأول، بل حتى بعده في الترتيب ، ورغم أنه يوجد inline style أقوى من الاثنين، لكن لأن important حاضرة فلون ال heading يكون green.
مثال على أكثر من وحدة important :
<style>
h1 {
font-size: 16px;
color: green !important;
}
.heading#Heading {
font-size: 32px;
color: blue !important;
}
</style>
<body>
<h1 style="color: red" class="heading" id="Heading">
A blue heading with 32px font size.
</h1>
</body>
عشان في اثنين important's محتاجين حاجة تبين لنا لون ال heading هيكون إيه.
هل إحدى ال important's مكتوبة ك inline style؟ لو كانت موجودة، إذن هي هتفوز. لو مفيش إذن ماذا عن ال specificity تبع ال selectors؟ هل وحدة منهم أعلى من الأخرى؟ في مثالنا هذا لا توجد inline styles عليها important لكن يوجد selector ب specificity أعلى، بس لو ال specificity مستاوية هنشوف ال order، ولا يمكن لترتيب أن يتساوى.
<style>
h1.heading {
color: green !important;
} /* specificity: 0,1,1 */
h1.title {
color: blue !important;
} /* specificity: 0,1,1 */
</style>
<body>
<h1 style="color: red" class="heading title">
A blue heading
</h1>
</body>
لون ال heading هيكون blue عشان عندنا تساوي في important و ال specificity، فملقيناش حاجة نحتكم ليها غير ال order.
فخلاصة الموضوع أن ال important بتقلب الطاولة، وبتخلي أضعف طرق styling الأقوى، إلا لو في أكثر من وحدة فبنحتاج حاجة كال specificity او ال order نقرر بيها مين الي هتفوز.
في الختام
بهذا نكون قد أنهينا كلامنا عن ال cascade وعرفنا كيف يتم حساب ال style إلى element معين هيخدو لما يتم تنسيقه بأكثر من طريقة، وبإذن الله تكون بقراءتك لهذين المقالين تخلصت من وحدة من أكبر المشاكل الي بتواجه المطوريين لما يتعاملوا مع css.
Discussion