از کجا میاد این استایل؟ آشنایی با Origin و Importance
تو درس قبل گفتیم اولین چیزی که Cascade برای حل تداخل بررسی میکنه، Origin و Importanceه. تو این درس دقیق میبینیم این دو مفهوم دقیقاً چی هستن و چطور روی نتیجه نهایی اثر میذارن.
Origin چیست؟
Origin (مبدأ) یعنی اینکه یک استایل خاص از کجا اومده. برخلاف تصور رایج، تنها منبع استایلدهی یک صفحه، فایل CSSای نیست که خودمون مینویسیم؛ در واقع چند منبع مختلف با هم ترکیب میشن تا ظاهر نهایی صفحه شکل بگیره.
منابع اصلی Origin
مرورگر معمولاً استایلها رو از این منابع دریافت میکنه:
- User Agent Stylesheet: استایلهای پیشفرضی که خود مرورگر برای هر تگ HTML در نظر گرفته
- Author Stylesheet: استایلهایی که توسعهدهنده (یعنی خود ما) مینویسیم؛ چه External، چه Internal، چه Inline
- User Stylesheet: استایلهای سفارشیای که خود کاربر مرورگر (نه توسعهدهنده) تنظیم کرده، مثلاً برای دسترسیپذیری بهتر
User Agent Stylesheet دقیقاً چیه؟
هر مرورگری، حتی بدون اینکه ما هیچ CSSای بنویسیم، یه سری استایل پیشفرض به تگهای HTML اعمال میکنه. برای همینه که مثلاً تگ <h1> بدون هیچ CSSای، بهطور پیشفرض بزرگ و بولد نمایش داده میشه، یا لینکها بهطور پیشفرض آبی و زیرخطدار هستن.
<h1>این یک تیتر است</h1>
<a href="#">این یک لینک است</a>حتی اگه هیچ فایل CSSای به این صفحه وصل نکنیم، مرورگر با استایلهای پیشفرض داخلی خودش، این تگها رو یه شکل خاص نمایش میده. این همون User Agent Stylesheetه.
Author Stylesheet: استایلهای خود ما
وقتی ما بهعنوان توسعهدهنده، CSS مینویسیم (چه از طریق فایل خارجی، چه Internal، چه Inline)، این استایلها Author Stylesheet نامیده میشن.
h1 {
color: darkblue;
font-size: 32px;
}این Rule که خودمون نوشتیم، معمولاً روی استایل پیشفرض مرورگر (User Agent Stylesheet) اولویت داره. یعنی اگه هم مرورگر و هم ما برای h1 استایلی تعریف کرده باشیم، در حالت عادی مقدار ما (Author) برنده میشه.
User Stylesheet: وقتی کاربر خودش دخالت میکنه
بعضی از کاربران مرورگر، از طریق تنظیمات دسترسیپذیری یا افزونههای خاص، میتونن استایل سفارشی خودشون رو به تمام صفحاتی که بازدید میکنن اعمال کنن؛ مثلاً افزایش اندازه فونت پیشفرض یا تغییر رنگ پسزمینه برای کاهش خستگی چشم. این نوع استایل، User Stylesheet نامیده میشه.
این حالت کمتر در پروژههای روزمره باهاش سروکار داری، ولی دونستنش کمک میکنه بفهمی چرا گاهی یک صفحه، رفتار متفاوتی روی سیستم کاربران خاص داره.
اولویت کلی بین منابع Origin
بهطور کلی و در حالت عادی (بدون درنظر گرفتن Importance)، ترتیب اولویت اینطوره:
User Stylesheet > Author Stylesheet > User Agent Stylesheetیعنی اگه کاربر یک استایل سفارشی تنظیم کرده باشه، اون معمولاً روی استایل ما (Author) هم اولویت داره، و استایل ما هم روی استایل پیشفرض مرورگر اولویت داره. اما این ترتیب، با ورود مفهوم Importance، میتونه کاملاً برعکس بشه.
Importance چیست؟
Importance (اهمیت) به این اشاره داره که آیا یک Declaration با !important علامتگذاری شده یا نه. وقتی یک Declaration با !important نشوندار بشه، اولویت خیلی بالاتری نسبت به حالت عادی پیدا میکنه.
p {
color: blue !important;
}
p {
color: red;
}تو این مثال، با اینکه Rule دوم پایینتر نوشته شده (که طبق Source Order باید اولویت داشته باشه)، ولی چون Rule اول با !important مشخص شده، رنگ نهایی متن آبی خواهد بود، نه قرمز.
ترتیب کامل اولویت با احتساب Importance
وقتی هم Origin و هم Importance رو با هم در نظر بگیریم، ترتیب کلی اولویت (از پایینترین به بالاترین) اینطور میشه:
- User Agent Stylesheet (عادی)
- Author Stylesheet (عادی)
- User Stylesheet (عادی)
- Author Stylesheet با
!important - User Stylesheet با
!important
همونطور که میبینی، یک Declaration با !important از طرف کاربر (User)، بالاترین اولویت ممکن رو داره؛ حتی بالاتر از !importantای که خود توسعهدهنده نوشته.
چرا نباید در استفاده از !important زیادهروی کرد؟
استفاده مکرر از !important باعث میشه فرایند عادی Cascade و Specificity عملاً بیاثر بشه؛ چون هر Declaration جدیدی که بخواد اون مقدار رو تغییر بده، خودش هم باید !important بگیره. این موضوع بهمرور کد رو غیرقابلنگهداری میکنه و دیباگ کردن استایلها رو خیلی سختتر میکنه.
نکات مهم
- استایلهای یک صفحه، همیشه ترکیبی از User Agent، Author و گاهی User Stylesheet هستن.
- در حالت عادی، Author Stylesheet روی User Agent Stylesheet اولویت داره.
!importantمیتونه این اولویتبندی طبیعی رو کاملاً برعکس کنه.
اشتباهات رایج
- استفاده گسترده از
!importantبهجای اصلاح ریشهای Specificity یا Source Order. - فراموش کردن اینکه User Agent Stylesheet هم بخشی از ظاهر اولیه صفحهست، حتی وقتی خودمون هیچ CSSای ننوشتیم.
جمعبندی
Origin مشخص میکنه یک استایل از کدوم منبع اومده: مرورگر (User Agent)، توسعهدهنده (Author) یا کاربر (User). Importance هم مشخص میکنه آیا یک Declaration با !important علامتگذاری شده یا نه. ترکیب این دو مفهوم، اولین و مهمترین لایهی تصمیمگیری در فرایند Cascade محسوب میشه.