Ներկայացրեք, թե ինչպես է բրաուզերը որոշում, թե որ տարրերին պետք է կիրառել CSS ոճերը։

Բրաուզերը որոշում է, թե որ տարրերին պետք է կիրառել CSS-շերտերը՝ օգտագործելով որոնման և համապատասխանեցման մեխանիզմներ CSS սելեկտորների վրա հիմնված:

Ընթացքը տեղի է ունենում հետևյալ կերպ՝

1. CSS-ի վերլուծություն: Բրաուզերը վերլուծում է CSS ֆայլերը և <style> բլոկները HTML-ում՝ ստեղծելով ներքին ոճերի ներկայացում:
2. HTML-ի վերլուծություն: Բրաուզերը վերլուծում է HTML-ը՝ ստեղծելով DOM (Document Object Model) ծառ:
3. Համապատասխանեցում (Matching): Ամեն մի հանգույց DOM-ում բրաուզերը փորձում է համապատասխանել այն CSS կանոններին։ Սա կատարվում է CSS կանոնների սելեկտորների ստուգմամբ։ Սովորաբար, աշխատում է առավել հատուկ սելեկտորից դեպի պակաս հատուկ (աջից դեպի ձախ): Օրինակ, div article p սելեկտորի համար, նախ գտնում է p, ապա ստուգում՝ արդյոք այն ժառանգ է article-ից, որը իր հերթին ժառանգ է div-ից:
4. Կիրառում (Applying): Եթե DOM հանգույցը համապատասխանում է մեկ կամ մի քանի CSS կանոններին, բրաուզերը կիրառում է համապատասխան ոճերը այդ հանգույցին։ Եթե մի քանի կանոններ են կիրառելի, բրաուզերը որոշում է վերջնական ոճերի հավաքածուն՝ օգտագործելով հատուկության կանոնները, հայտարարությունների կարգը և ժառանգությունը:

Հատուկություն (Specificity):

Հատուկությունը՝ դա ալգորիթմ է, որը բրաուզերը օգտագործում է CSS սելեկտորների քաշը հաշվարկելու համար։ Ավելի հատուկ սելեկտորը ունի բարձր առաջնահերթություն։ Հատուկությունը հաշվարկվում է ID-ների, դասերի/պսևդո-դասերի/ատրիբուտների և տարրերի/պսևդո-տարրերի քանակով։

// Հաշվարկ հատուկության՝ (a, b, c)
// a = ID-ների քանակը
// b = դասերի, պսևդո-դասերի,ատրիբուտների քանակը
// c = տարրերի, պսևդո-տարրերի քանակը
// Inline ոճերը ունեն բարձրագույն առաջնահերթություն (1, 0, 0, 0)
// `*` սելեկտորը ունի հատուկություն (0, 0, 0)

Օրինակ՝ հատուկության հաշվարկ:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Հայտարարությունների կարգը:

Եթե երկու կանոն ունեն նույն հատուկությունը, ապա կիրառվում է վերջինը CSS կոդում:

Ներառումը (Inheritance):

Որոշ CSS հատկություններ ժառանգվում են ծնողական տարրերից դեպի երեխաներ (օրինակ՝ color, font-family)։ Եթե հատկության համար բացահայտ արժեք չի սահմանված, բրաուզերը որոնում է ժառանգված արժեքը վերևից դեպի ներքև DOM ծառում:

Այսպիսով, բրաուզերը որոշում է տարրերի ոճերը՝ համապատասխանեցնելով սելեկտորներին, լուծելով հակասությունները հատուկության և հայտարարությունների կարգի միջոցով, ինչպես նաև հաշվի առնելով ժառանգությունը։