Series: CSS Basics Lesson 2

CSS Asoslari - 2-dars

Brauzer CSS'ni qanday qo'llaydi, DOM, CSSOM, computed style va CSS performance haqida o'rganing.

2-dars

CSS Asoslari - Brauzer Qanday Ishlaydi?

Bu darsda brauzer CSS'ni qanday qo'llashini, DOM va CSSOM nima ekanligini, computed style va CSS performance haqida o'rganamiz.

1. Brauzer CSS'ni qanday qo'llaydi?

Bu nima?

Brauzer CSS'ni birdaniga qo'llamaydi. U bosqichma-bosqich ishlaydi.

Qanday ishlaydi (oddiy)

  1. HTML o'qiladi
  2. CSS o'qiladi
  3. Qaysi CSS qaysi elementga mos — tekshiriladi
  4. Yakuniy ko'rinish chiqariladi

Muhim joy

Brauzer:

  • CSS'ni o'zi tahlil qiladi
  • biz yozganimizni tekshirib keyin ishlatadi

Xulosa

CSS ishlashi — brauzer qarori.

2. DOM degani nima?

Bu nima?

DOM — brauzer ichida HTML'ning daraxt ko'rinishi.

HTML:

<body>
  <p>Hello</p>
</body>

Brauzer buni:

  • elementlar daraxti qilib saqlaydi

Nega bu muhim?

CSS to'g'ridan-to'g'ri HTML'ga emas, DOM'dagi elementlarga qo'llanadi.

Xulosa

CSS DOM bilan ishlaydi, fayl bilan emas.

3. CSSOM degani nima?

Bu nima?

CSSOM — brauzer ichida CSS'ning qoidalar daraxti.

CSS:

p {
  color: red;
}

Brauzer buni:

  • "qaysi selector"
  • "qaysi property" ko'rinishida saqlaydi.

Nega kerak?

Brauzer:

  • DOM + CSSOM ni birlashtirib
  • qaysi style qayerga tushishini hisoblaydi

Xulosa

DOM — HTML tomoni CSSOM — CSS tomoni

4. Computed style degani nima?

Bu nima?

Computed style — element uchun yakuniy, aniq qiymatlar.

Oddiy tushuntirish

Sen yozgan CSS:

p {
  font-size: 1em;
}

Brauzer hisoblab chiqadi:

  • font-size: 16px

Muhim joy

Computed — brauzer chiqargan haqiqat

  • yozganing emas, ishlayotgani

Xulosa

CSS'ni tekshirmoqchi bo'lsang — computed'ga qaraysan.

5. Nega yozganim emas, boshqa qiymat ishladi?

Bu nima?

Ba'zan:

  • sen 1em yozasan
  • brauzer 16px ko'rsatadi

Bu normal holat.

Sabab

Brauzer:

  • nisbiy qiymatlarni
  • aniq qiymatga aylantirib ishlaydi

Misol

p {
  width: 50%;
}

Brauzer:

  • "container 800px ekan → 400px"

Xulosa

CSS — hisob-kitobli til.

6. CSS qachon qayta hisoblanadi?

Bu nima?

CSS har doim emas, kerak bo'lganda qayta hisoblanadi.

Qachon?

  • class o'zgarsa
  • window resize bo'lsa
  • DOM o'zgarsa
  • CSS fayl yuklansa

Muhim joy

Har o'zgarish:

  • brauzerga ish qo'shadi

Xulosa

Keraksiz CSS o'zgarish — keraksiz hisob.

7. Qaysi CSS tez, qaysi biri sekin?

Bu nima?

Hamma CSS bir xil og'irlikda emas.

Oddiy tushuntirish

  • Rang, background → tez
  • Width, height → sekinroq
  • Position, layout → eng og'iri

Nega?

Chunki:

  • ba'zi property'lar faqat bo'yash qiladi
  • ba'zilari butun sahifani qayta hisoblatadi

Xulosa

CSS performance — tanlov masalasi.