Parse CSS-1

وقتی یک صفحه ی وب رو باز میکنیم، همه ی مراحل عکس بالا طی می شن تا صفحه لود شده و به ما نمایش داده بشه. اگه به شکل دقت کنین ابتدا سند HTML لود و بعد پارس شده و همزمان با پارس شدن سند HTML، سند (های) CSS هم لود و پارس میشن. در این پست در باره ی این مرحله بحث می کنیم.

پارس شدن سند(های) CSS شامل دو مرحله هست:

1-resolve conflicting CSS declaration

2-proccess final CSS value

در این پست درباره ی مرحله ی 1 یه سری نکات رو توضیح میدم.

قبل از این که مرحله یک رو شرح بدم باید دو تا نکته رو یادآوری کنم:

1- قانون نوشتاری CSS :

• سلکتور میتونه نام تگ، کلاس، آیدی و یا تلفیقی از این سه مورد باشه.
• به کدهای داخل اسکوپ Declaration Block گفته میشه. هر Declaration Block میتونه شامل یک یا چند Declaration باشه.
• هر Declaration از دو قسمت Property و Value تشکیل شده.

2- سه نوع سورس CSS داریم:

• کدهای CSS که دولوپر(های) پروژه نوشتن.(Author)
• کدهای CSS که به وسیله ی کاربر ایجاد می شن. به عنوان مثال وقتی کاربر اندازه فونت صفحه رو از طریق تنظیمات مرورگر عوض میکنه.(User)
• کدهای CSS که به صورت پیش‌فرض در هر مرورگر وجود داره.(User Agent)

خب، با یک مثال بریم سراغ بحث اصلی:

برای Property رنگ تگ h1 چندین Declaration به صورت زیر نوشته شده ولی در نهایت h1 قرمز شده.

ولی سوال اینجاست که مرورگر با چه قانونی این Declaration ها رو اولویت‌بندی میکنه تا در نهایت رنگ تگ قرمز بشه؟

قوانین اولویت CSS :

1- در مرحله اول، Declaration ها به ترتیب زیر وزن‌دهی میشن:

1- User !important

2- Author !important

3- Author Declarations

4- User Declarations

5- Default Browser Declarations

پس Declarationهایی که important دارن بیش‌ترین وزن رو هم دارن.بعد از این دو مورد Declarationهایی که به وسیله دولوپر(ها)، CSS های ایجاد شده به وسیله ی کاربر و کد های CSS موجود در سورس پیش‌فرض مرورگر هم به ترتیب دارای بیش‌ترین وزن هستن.

اما اگه وزن دو Declaration باهم برابر باشه، یعنی به طور مثال هر دو Declaration در سورسی که دولوپرها نوشتن باشه مرورگر وارد مرحله دوم میشه.

2- در مرحله دوم Declaration ها به ترتیب زیر اولویت‌بندی میشن:

1-Inline Style

2- IDs

3- Classes, Pseudo-classes

4- Elements, Pseudo-elements

اعمال استایل به تگ باتوجه به اولویت‌بندی بالا و فرمول زیر هست:

(Inline Style, IDs, Classes Pseudo-classes attributes, Elements, Pseudo-elements)

به عنوان مثال به Selector زیر دقت کنین:

div p.title:hover #id .post .item:after

Inline Style : 0

ID : 1

Classes, Pseudo-classes, attributes : 4

Elements, Pseudo-elements : 3

پس امتیاز این Selector به صورت زیر هست:

(0 ,1 ,4 ,3)

و هر Selector که امتیازش بیش‌تر باشه از اولویت بیش‌تری هم برخوردار هست.

الان می تونیم امتیاز Selector هایی که در مثال بالا آوردم رو محاسبه کنیم و بفهمیم اولویت با کدوم هست:

h1{}

Inline Style : 0

ID : 0

Classes, Pseudo-classes, attributes : 0

Elements, Pseudo-elements : 1

(0, 0, 0, 1)

.container .h1{}

Inline Style : 0

ID : 0

Classes, Pseudo-classes, attributes : 1

Elements, Pseudo-elements : 1

(0, 0, 1, 1)

.container #header .h1{}

Inline Style : 0

ID : 1

Classes, Pseudo-classes, attributes : 1

Elements, Pseudo-elements : 1

(0, 1, 1, 1)

پس به همن دلیل رنگ تگ h1 قرمز شده.

3- در مرحله سوم و پایانی اگر اولویت Declaration ها هم برابر باشند، اولویت با آخرین Declaration هست.

با توجه به گفته های بالا باید به چند نکته توجه بشه:

• هر Declaration که دارای important باشه، بالاترین اولویت رو داره.(استفاده از important راحت‌ترین راه برای رفع اشکلات هست ولی اگه زیاد استفاده بشه ممکنه بعدا مشکلات بزرگ‌تری به وجود بیاره.)
• استایل‌های inline اولویت بالاتری نسبت به استایل های external دارن. (استایل‌هایی که با استفاده از DOM اعمال میشن هم inline به حساب میان.)
• سلکتوری که فقط 1 آیدی داره اولویتش از سلکتوری که 100 کلاس داره بیشتره! و همین طور سلکتوری که 1 کلاس داره اولویتش از سلکتوری که 100 المنت داره بیش تره!
• سلکتور * (Universal Selector) هیچ امتیازی با توجه به فرمول بالا نداره! (0 ,0 , 0, 0)