آبشار css چیست؟

ما برای استایل دهی به وبسایت‌هایمان از CSS که مخفف Cascading Style Sheets است، استفاده می‌کنیم. اما واقعا معنای cascading چیست؟ البته که معنای لغوی این کلمه آبشار است.

در واقع CSS Cascade یکی از قدرتمندترین بخش‌های CSS است؛ در عین حال اگر مفهوم آن را به درستی درک نکرده باشید، می‌تواند برای شما دردسرساز نیز باشد. هر شخصی که تجربه‌ی کار بر روی یک وبسایت بزرگ را داشته باشد، قطعا با سوال‌هایی این چنینی مواجه شده است: «چرا فلان پراپرتی css کار نمی‌کند؟» احتمالا برای حل این مشکل نیز به سراغ استفاده از !important رفته‌اند.

برای جلوگیری از اتفاقات این چنینی بهتر است کمی به اصول اولیه برگردیم و سعی کنیم که به شکل مفهومی آن‌ها را درک کنیم.

اگر بخواهیم تعریفی برای حالت آبشاری css بدهیم، باید بگوییم که روشی است که مرورگرها برای حل مشکل قواعد css ای که به شکل رقابتی تعریف کرده‌ایم، از ‌آن استفاده می‌کنند.

هربار که ما قاعده یا رولی (rule) در سی اس اس می‌نویسیم، آن قاعده وارد حالت آبشاری css می‌شود تا تعیین شود که ایا در خروجی نهایی استایل دهی، تاثیر بگذارد یا خیر. هر چه این قاعده در سطوح پایین‌تری از این آبشار قرار گیرد، احتمال تاثیرگذاری آن در استایل نهایی کاهش خواهد یافت.

در زیر به جنبه‌های مختلفی از این آبشار خواهیم پرداخت.

1. اهمیت (importance)

اولین بخش این آبشار به نوع قاعده‌ی ما نگاه می‌کند تا متوجه اهمیت آن شود.

از نظر اهمیت،‌ ۴ دسته قاعده در css وجود دارد:

الف) Transition (انتقال)

قواعدی که به انتقال‌های فعال اعمال می‌شوند، از اهمیت بالایی برخوردار خواهند بود.

ب) !important

وقتی این مورد را به انتهای تعریف یک قاعده در css اضافه می‌کنیم، آن قاعده وارد این دسته می‌شود. بهتر است که شما از این کلیدواژه فقط در هنگام بازنویسی (override) استایل‌هایی که از یک کتاب‌خانه‌ی خارجی (third-party) دریافت کرده‌اید، استفاده کنید.

ج) Animation (انیمیشن)

قواعدی که به یک انیمیشن فعال اختصاص داده می‌شوند، در این دسته از آبشار قرار می‌گیرند. 

د) Noramal (معمولی)

این دسته جایی است که عمده‌ی قواعد css ای در آن جای می‌گیرند.

همانگونه که احتمالا متوجه شده‌اید، هدف اصلی این بخش، اطمینان حاصل کردن از اجرای انیمیشن‌ها به شکل صحیح است؛ البته که برخی توسعه‌دهندگان درمانده نیز می‌توانند از آن استفاده کنند. (!important)

حال بیایید برای درک بهتر بخش اول، مثال بیاوریم:

A

p {
  color: sandybrown;
}

B

p {
  color: orchid !important;
}

در سند ما نهایتا رنگ تگ‌های p به orchid در خواهد آمد. چرا که مورد B در دسته‌ی ۲ قرار می‌گیرد و مورد A در دسته‌ی ۴. پس مورد B در الویت بیش‌تری قرار خواهد گرفت.

حال اگر مسابقه در دست اول به تساوی کشیده شود (هر دو قاعده‌ی css در یک دسته از نظر اهمیت قرار گیرند) باید به بخش‌های بعدی دقت کنیم:

۲. Origin (خاستگاه)

دومین بخش از آبشار ما مربوط به مکانی است که آن قاعده در آن تعریف شده است.

سه مکان برای تعریف یک قاعده وجود دارد:

الف) وبسایت

این تنها لولی است که شما به عنوانی یک توسعه دهنده، بر آن کنترل دارید.

ب) کاربر

ج) مرورگر

هر مرورگری مجموعه‌ای از استایل‌های مختص به خود را دارد که باعث می‌شود برخی موارد مانند دکمه‌ها (<button>) دارای یک استایل پیش‌فرض باشند.

نکته: بر خلاف تصور، قواعد پیش‌فرض مرورگر که دارای !important هستند، بر قواعد دسته‌ی وبسایت که دارای این کلیدواژه اند، پیروز خواهند شد؛ این درحالیست که قواعد وبسایت اکثرا بر قواعد پیش‌فرض مرورگر برتر خواهند بود.

به نظر شما کدام یک از دو مورد زیر برنده خواهند بود:

A

p {
  color: sandybrown;
}

B

p {
  color: orchid;
}

قاعده‌ی اول پیروز خواهد بود. چرا که قواعد وبسایت، در اولویت بیش‌تری از قواعد پیش‌فرض مرورگر  قرار می‌گیرند.

۳. Specificity (اختصاصی)

سومین جنبه از آبشار سی اس اسی ما مربوط به اختصاصی بودن یک قاعده است.

۴ دسته انتخاب‌گر (selector) وجود دارند:

الف) inline (درون خط)

استایل‌هایی که درون پراپرتی style تگ‌های HTML قرار می‌گیرند، دارای بالاترین اولویت هستند.

ب) id

ما می‌توانیم المنت‌های مورد نظرمان را با استفاده از نام id آن‌ها مورد هدف قرار دهیم؛ مثل #id

ج) class / attribute / pseudo-class

ما می‌توانیم المنت‌های مورد نظرمان را با استفاده از نام کلاسشان مورد هدف قرار دهیم؛ مثل .class

همچنین این سطح شامل انتخاب‌گرهای اتریبیوت نیز می‌شود که به یک اتریبیوت خاص در HTML اشاره دارند؛ مثل [checked]

مورد آخری که در این دسته قرار می‌گیرد نیز pseudo-selectors خواهد بود؛ مثل :hover

د) type / pseudo-element 

در css می‌توان المنت‌های مختلف را با استفاده از نام تگ آن‌ها مورد خطاب قرار داد؛ مثل h1

مورد دیگر موجود در این دسته pseudo-element هایی مثل :before هستند.

به نظر شما کدام یک از دو قاعده‌ی زیر برنده خواهند بود؟

A

<p style="color: sandybrown">...</p>

B

p {
  color: orchid;
}

قطعا قاعده‌ی اول پیروز خواهد بود؛ چرا که همان‌طور که قبلا گفتیم، قواعد inline یا درون خطی، دارای اولویت بیش‌تری از قواعد دسته‌ی انتخاب‌گر type هستند.

بیایید یک مثال دیگر نیز  ببینیم:

A

.paragraph {
  color: sandybrown;
}

B

#paragraph {
  color: orchid;
}

در این مثال قاعده‌ی دوم اولویت پیدا خواهد کرد؛ زیرا انتخاب‌گرهای id از الویت بیش‌تری نسب به انتخاب‌گرهای class قرار می‌گیرند.

A

.paragraph:first-of-type {
  color: sandybrown;
}

B

p.paragraph {
  color: orchid;
}

در مثال بالا مورد اول برنده خواهد بود؛ چون این مورد دارای دو انتخاب‌گر سطح سه است (کلاس و سودو کلاس) ولی مورد دو دارای یک انتخاب‌گر از این سطح است (کلاس) و انتخاب‌گر سطح چهار آن (type) در این مقایسه به کار نمی‌آید.

A

p#paragraph {
  color: sandybrown;
}

B

#paragraph.paragraph {
  color: orchid;
}

در این مثال قاعده‌ی دوم برنده خواهد بود؛ درست است که هر دوی این قواعد دارای یک انتخاب‌گر از سطح ۱ (id) هستند، اما قاعده‌ی دوم علاوه بر این، یک انتخاب گر از سطح ۳ (class) نیز دارد که بر انتخاب‌گر دوم قاعده‌ی اول که از سطح ۴ است (tag name) غلبه می‌کند.

۴. Position (موقعیت)

بالاخره به آخرین بخش این مطلب رسیدیم که مربوط به ترتیب قرارگیری دستورهاست.

قواعدی که بعدتر از دیگران در تگ style یا در استایل شیت‌های لینک شده قرار می‌گیرند، برنده خواهند بود.

A

p {
  color: sandybrown;
  color: orchid;
}

B

p {
  color: sandybrown;
  color: orchid;
}

در این مثال رنگ پاراگراف‌ها در نهایت به orchid در خواهند آمد.

نتیجه‌گیری

امیدوارم این مقاله به درک بهتر شما از آبشاری بودن css و کاهش سردرگمی شما در آینده کمک کرده باشد.

از این پس راه‌های بهتری برای اشکا‌ل‌زدایی استایل‌ها به غیر از !important خواهید داشت.

منبع