Parse CSS-2

در بخش اول این مقاله درباره resolve conflicting CSS declaration یه سری نکات گفته شد و در این پست درباره مرحله دوم Parse CSS یعنی proccess final CSS value بحث می کنیم.

بهتره برای قابل درک و شفاف تر بودن نکات، همراه با مثال پیش بریم:

همون طور که میبینین در قسمت CSS سه Declaration Block نوشته شده که تو هر کدوم چن تا Declaration هست و Property هر کدوم از Declaration ها دارای مقدار (Value) خاصی هست.

این Value ها برای اینکه مرورگر بتونه به المنت ها اعمال کنه 6 مرحله رو طی میکنن:

1- از بین تمام کدهای CSS که دولوپر نوشته ( Author ) تمام مقادیری که به Property های CSS تگ اعمال شدن شناسایی میشن. در مثال بالا برای پراپرتی width تگ p دو مقدار مختلف اعمال شده که هر دو شناسایی و آماده ی اعمال میشن. (Declared Value)

2- چون تو خیلی از موارد ممکن هست به یکی از Property های CSS در چند Declaration مختلف چندین مقدار تعین بشه در مرحله ی دوم با توجه به اولویت بندی Selector ها که در بخش اول مقاله دربارشون بحث شد، فقط یکی از اون مقادیر انتخاب میشه. پس width تگ p که بهش دو مقدار مختلف اعمال شده با توجه به اینکه اولویت سلکتور text. بالاتر از سلکتور ، p هست، برابر با 63% میشه. در این مرحله از Declaration هایی که در سورس های دیگه هم نوشته شده استفاده میشه. (Cascaded Value)

3- با توجه به قانون CSS، همه Property های CSS یک المنت باید مقدار (value) داشته باشن. در این مرحله حتی اگه دولوپر برای اون Property مقداری تعین نکرده باشه، مقدار پیش فرض اون Property اعمال میشه. در مثال بالا برای Property های padding یا margin تگ p هیچ مقداری تعین نشده ولی مقدار پیش فرض اون پراپرتی ها که برابر با 0px اعمال میشه. (Specified Value)

4- در مرحله چهار مقادیری که واحد Relative دارن (rem, em, vh, vw) به مقداری با واحد Absolute که همون px هست تبدیل میشن. CSS Keyword هایی مثل pink برای Property های color و background-color و یا bold و bolder برای font-weight هم به مقدار Absolute تبدیل میشن. (Computed Value)

5- در این مرحله محاسبه ی نهایی انجام میشه و تمام مقادیر با واحد Absolute آماده ی اعمال میشن. در مثال بالا برای تگ p مقدار width برابر 63 درصد width تگ پدرش(Parent Tag) هست که مقدار اون برابر با 226.8 px میشه. (Used Value)

(360px) * (63%) = 226.8 px

6- در مرحله آخر مقادیری که اعشار دارن گرد میشن تا به صورت عدد صحیح در بیان تا مرورگر بتونه تفسیرشون کنه. (Actual Value)

پس :

226.8 px = 227 px

با توجه به مراحل بالا، Property های زیر به این شکل محاسبه میشن:

1- مقدار width ،Property تگ p :

• در دو Declaration مختلف، دو مقدار متفاوت برای width ،Property این تگ اعمال شده:

p{
    width: 140px;
}

.text{
    width: 63%;
}

• با توجه به اولویت بندی Selector ها فقط مقدار 63% برای width ،Property اعمال میشه .
• در این مرحله چون مقداری تعین شده پس از مقدار پیش فرض استفاده نمیشه.
• چون واحدمون rem , em , vh , vw نیست تبدیلی در این مرحله اتفاق نمیفته.
• در نهایت مقدار نهایی 63% از طول تگ پدر تگ p محاسبه میشه و با واحد px اعمال میشه که قبلا محاسبه کردیم.

عدد بدست آمده گرد و مقدار نهایی 227px اعمال میشه.

2- مقدار padding ،Property تگ p :

• چون هیچ مقداری padding ،Property تگ p نوشته نشده پس در مراحل 1 و 2 هیچ کاری صورت نمیگیره.
• در مرحله 3 چون هیچ مقداری padding ،Property تگ p نوشته نشده، مقدار پیش فرض اون جایگذاری میشه که برابر با 0px هست.
• در مراحل 4 و 5 چون واحد اعمال شده px هست پس هیچ کاری صورت نمیگیره.
• در مرحله 6 هم چون مقدار برابر یک عدد صحیح است باز هیچ کاری صورت نمیگیره و مقدار 0px برای padding ،Property تگ p اعمال میشه.

3- مقدار font-size ،Property روت (body و html) :

• چون بین کد های CSS برای تگ های <body> و <html> هیچ font-size تعین نشده پس در این مرحله کاری صورت نمیگیره.
• در مرحله دوم font-size پیش فرضی که همه مرورگرها در فایل CSS پیش فرض خودشون(User Agent) دارن اعمال میشه که معمولا برابر با 16px هست.
• مراحل بعدی چون واحد مقدار Property از نوع Absolute هست (px) و هم عدد صحیح پس بدون هیچ پردازشی طی میشن و 16px ،font-size به روت اعمال میشه.

4- مقدار font-size ،Property تگ <"div class="wrapper> :

• در مرحله اول مقدار 2rem که در کدهای CSS نوشته شده شناسایی و اعمال میشه.
• چون فقط یک مقدار اعمال شده پس همون هم انتخاب میشه.
• در مرحله سوم هم چون مقدار تعین شده، پس هیچ کاری صورت نمیگیره.
• در این مرحله واحد rem به px تبدیل میشه. 1rem برابر با فونت سایز root هست. پس:

1rem = 16px =====> (2rem) * (16px) = 32px

در مراحل بعدی هم هیچ کاری صورت نمیگیره و همون 36px اعمال میشه.

5- مقدار font-size ،Property تگ <p> :

• چون بین کدهای CSS که توسط دولوپر نوشته شده (Author) هیچ مقداری برای font-size ،Property تگ p نوشته نشده پس در مراحل اول و دوم هیچ کاری صورت نمگیره.
• در مرحله سوم چون هیچ مقداری تعین نشده پس مرورگر از مقدار پیش فرض استفاده میکنه. برای font-size مقدار پیش فرض برابر با مقدار font-size تگ پدر اون تگ هست. یعنی فونت سایز تگ p برابر با font-size تگ <"div class="wrapper> هست . بنابراین مقدارش برابر با 32px میشه.
• اینجا هم چون واحد مقدار px هست و عددش هم صحیح در مراحل بعدی هیچ کاری صورت نمیگیره.