11-dars

O'zing nomla

1. inline-block qachon kerak?

inline-block nima?

inline-block — inline va block'ning gibridi.

Brauzer bunday o'ylaydi:

"Bu element yonma-yon yurishi mumkin lekin men uni blok quti sifatida hisoblayman"

Nimalarni beradi?

Inline'dan oladi:

• yonma-yon joylashadi
• yangi qatordan boshlanmaydi

Block'dan oladi:

• width ishlaydi
• height ishlaydi
• margin-top/bottom ishlaydi
• padding to'liq ishlaydi

Eng ko'p ishlatiladigan joylar

• Buttonlar
• Badge / tag
• Icon + text
• Navbar item'lar

Misol (klassik)

<a class="btn">Button</a>
<a class="btn">Button</a>

.btn {
  display: inline-block;
  width: 120px;
  padding: 10px;
  text-align: center;
  background: black;
  color: white;
}

👉 Natija:

• yonma-yon
• width ishlaydi
• chiroyli button

Inline-block'dagi yashirin muammo ⚠️

<span class="box"></span>
<span class="box"></span>

Orada bo'sh joy chiqadi.

Sabab:

• HTML'dagi whitespace (space / enter)
• brauzer uni text deb hisoblaydi

2. display: none nima qiladi?

display: none aslida nima?

display: none degani:

"Bu element umuman yo'qdek bo'lsin"

Brauzer nuqtai nazaridan:

• u render qilinmaydi
• u layout hisobiga kirmaydi
• u ekranda joy egallamaydi

Go'yo HTML'da yo'qdek.

Juda muhim farq

Brauzer sahifani chizishda 2 bosqichdan o'tadi:

1. Layout hisoblash (qayerda turadi, qancha joy egallaydi)
2. Paint (chizish)

display: none:

• ❌ layout bosqichiga kiritilmaydi
• ❌ paint ham bo'lmaydi

Shu sababli: 👉 atrofidagi elementlar uni joyini egallab oladi

Oddiy misol

<div class="box"></div>
<div class="text">Matn</div>

.box {
  width: 100px;
  height: 100px;
  background: red;
  display: none;
}

Natija:

• qizil quti ❌ yo'q
• "Matn" yuqoriga ko'tarildi

DOM'da bormi o'zi?

👉 Ha, DOM'da bor.

Farqni tushun:

• DOM'da bor → JS topa oladi
• Layout'da yo'q → ko'rinmaydi, joy egallamaydi

document.querySelector('.box') // ishlaydi

Eng ko'p uchraydigan xato ❌

"Animatsiya qilaman, lekin ishlamayapti"

.modal {
  display: none;
  transition: 0.3s;
}

👉 Nega ishlamaydi?

Chunki:

• display animatsiya qilinmaydi
• yo'q va bor holat o'rtasida oraliq yo'q

Qachon display: none ishlatish to'g'ri?

✅ Modal yopilganda ✅ Tab content almashtirishda ✅ SEO yoki accessibility muammo bo'lmasa ✅ Layout'dan butunlay olib tashlash kerak bo'lsa

Qachon ehtiyot bo'lish kerak?

⚠️ Animatsiya kerak bo'lsa ⚠️ Joy saqlanishi kerak bo'lsa ⚠️ Screen reader masalasi bo'lsa

3. visibility: hidden — nimasi bilan boshqacha?

visibility: hidden nima qiladi?

visibility: hidden degani:

"Elementni chizma, lekin joyini saqla"

Brauzer buni shunday tushunadi:

• ✅ layout hisoblanadi
• ❌ paint (chizish) bo'lmaydi

Ya'ni: bor, lekin ko'rinmaydi

Engine darajada farq 🧠

Brauzer 2 bosqichni eslab qol:

1️⃣ Layout — joylashuv 2️⃣ Paint — chizish

display: none

• ❌ layout yo'q
• ❌ paint yo'q

visibility: hidden

• ✅ layout bor
• ❌ paint yo'q

Shu sababli joyi qoladi.

Oddiy misol

<div class="box"></div>
<p>Matn</p>

.box {
  width: 100px;
  height: 100px;
  background: red;
  visibility: hidden;
}

Natija:

• qizil quti ko'rinmaydi
• 100×100 joy bo'sh turadi
• matn yuqoriga chiqmaydi

Solishtiramiz 👀

Holat	Ko'rinadi	Joy egallaydi
display: none	❌	❌
visibility: hidden	❌	✅

Mana shu jadvalni yodlab ol.

Juda muhim nuance ⚠️

visibility: hidden bo'lsa ham:

• element DOM'da bor
• focus olinmaydi
• lekin child elementlar ham ko'rinmaydi

.parent {
  visibility: hidden;
}

👉 ichidagi hammasi ❌

Qachon visibility: hidden kerak?

✅ Layout buzilmasligi kerak bo'lsa ✅ Joy saqlanishi muhim bo'lsa ✅ Jadval / gridda o'rin saqlash kerak bo'lsa ✅ Vaqtincha yashirish

Qachon noto'g'ri tanlov?

❌ Modal yopishda ❌ Element butunlay yo'q bo'lishi kerak bo'lsa ❌ Accessibility'da interaktiv bo'lmasligi kerak bo'lsa