CSS display: block, inline va elementni yashirish yo'llari

Qisqacha: display element sahifada qanday turishini belgilaydi. block — yangi qatordan boshlanadi va butun enni oladi; inline — matn ichida turadi, unga width, height va vertikal margin ishlamaydi; inline-block — matn ichida turib, o'lcham oladi. Yashirish yo'llari turlicha: display: none va hidden elementni butunlay olib tashlaydi, visibility: hidden joyini qoldiradi, opacity: 0 faqat ko'zdan yashiradi (element bosiladi va o'qiladi), inert esa ko'rinib turgan qismni faolsizlantiradi.

Bu darsda

• block, inline va inline-block farqini box model orqali tushuntirasiz.
• Ikki qiymatli display yozuvini o'qiysiz va eski bitta so'zli qiymatlarni unga o'girasiz.
• flow-root, contents va none nima qilishini, contents ning accessibility xavfini bilasiz.
• Yashirishning besh yo'lini solishtirasiz va hidden atributi tuzog'ini tuzatasiz.
• pointer-events, cursor va user-select ni o'z o'rnida ishlatasiz.

Oldin bilishingiz kerak: Box model, Margin sirlari, div va span, Kontent modeli, Global atributlar.

1. Nega bu kerak?

Oxirgi darslarda bir xil savol to'rt marta chiqdi:

• DevTools'da CSS darsida narx span iga width: 120px berdik. DevTools uni xira qilib, "The display: inline property prevents width from having an effect" deb yozdi.
• Box model darsida span ga margin-top berdik — hech narsa o'zgarmadi. Havolaning tepa-past padding'i esa qo'shni qatorlarni surmadi.
• Margin sirlari darsida margin-inline: auto span ni markazlamadi.
• O'sha darsda display: flow-root ni "keyingi darsda" deb qoldirgan edik.

Hammasining ildizi bitta — display xususiyati. div va span darsida "block" va "inline" elementlarni ko'rib, "buni CSS'dagi display boshqaradi" degan edik. Endi uni ochamiz.

Ikkinchi mavzu — yashirish. Global atributlar darsida bir intervyu savolini keyinga qoldirgan edik — hidden, display: none va visibility: hidden ning farqi. Bu dars oxirida unga to'liq javob berasiz va yana ikkita usulni qo'shasiz.

2. Tashqi tur: block va inline

2.1 Ikki xil qo'shni

display — element qutisi qanday turini belgilaydigan xususiyat. Uning eng eski ikki qiymati:

• block — yangi qatordan boshlanadi, otasining butun enini oladi, keyingi element ham yangi qatordan boshlanadi. div, p, h1, article, section — brauzer uslublarida block.
• inline — matn ichida, so'zlar qatorida turadi. Qator tugasa, keyingi qatorga "oqib" o'tadi. span, a, strong, em — inline.

Choyxona dasturxonini tasavvur qiling. Lagan — block: u dasturxonda o'z joyini egallaydi, yoniga boshqa lagan qo'yilmaydi. Non bo'laklari — inline: ular qator bo'lib teriladi, qator to'lsa, keyingisiga o'tadi.

2.2 Box model satr ichida qanday ishlaydi

Endi DevTools darsidagi sirni ochamiz. span ga box model'ning hamma qatlamini beramiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  p {
    width: 22rem;
  }
  .narx {
    width: 120px;
    height: 60px;
    padding: 8px 12px;
    margin: 30px 16px;
    border: 2px solid var(--rang-asosiy);
    background-color: #d8ecd9;
  }
</style>
<p>Rustam aka bugun ham katta qozonda osh damladi. Bir lagan
osh <span class="narx">35 000 so'm</span> turadi. Marhamat,
choyxonamizda sizni kutamiz: har kuni 7:00 dan 23:00 gacha.</p>

Nimaga qarang:

• width va height ishlamadi. Narx 120 piksel emas, o'z matni enida. Satr ichidagi element o'lchamini mazmunidan oladi.
• Chap va o'ngdagi padding, border va margin ishladi. Narx atrofidagi so'zlar chetga surildi.
• Tepa va pastki padding bilan border chizildi, lekin qatorlarni surmadi. Yashil ramka yuqoridagi va pastdagi so'zlar ustiga chiqib turibdi. Chrome'da o'lchadik: paragraf bo'yi span ni bezashdan oldin ham, keyin ham 72 piksel — to'rt qator, har biri 18. Narxning eni esa 120 emas, taxminan 106 piksel: matn, padding va border yig'indisi.
• Tepa va pastki margin umuman ta'sir qilmadi.

Satr ichidagi element — matnning bir bo'lagi. Qatorlar orasidagi masofani brauzer shrift va qator balandligiga qarab o'zi hisoblaydi (Qator balandligi darsida). Element o'zining vertikal o'lchami bilan unga aralasha olmaydi. Uzun span esa qatordan qatorga bo'linib ham ketishi mumkin — unda "bitta to'rtburchak" ham qolmaydi.

img ham satr ichidagi element, lekin istisno: unga width va height ishlaydi. Rasm "almashtiriladigan" element — uning mazmuni tashqi fayldan keladi. Rasm tagidagi kichik bo'shliq kabi tuzoqlarini Rasm va media darsida ko'ramiz.

2.3 display: block — satr ichidagini blokka aylantirish

Narxga display: block bersak, u yangi qatordan boshlanadi va width: 120px ishlaydi — DevTools'dagi ogohlantirish yo'qoladi. Vertikal margin va padding ham to'liq ishlaydi.

Bitta muhim chegara: display faqat ko'rinishni o'zgartiradi. Kontent modeli darsidagi qoida o'z joyida: display: block berilgan span ichiga ham div qo'yib bo'lmaydi. HTML ma'nosi va ichma-ichlik qoidalari CSS'ga bo'ysunmaydi.

2.4 inline-block — ikki dunyoning yaxshisi

Ba'zan element matn qatorida qolishi kerak, lekin o'lcham va vertikal padding bilan. Masalan, «Bahor»ning "Stolni band qilish" havolasi — bron-havola. Box model darsida uning tepa-past padding'i qatorlarni surmasligini ko'rgan edik:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  p {
    width: 22rem;
  }
  .bron-havola {
    padding: 0.5em 1em;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
  }
  p + p .bron-havola {
    display: inline-block;
  }
</style>
<p>Oilaviy bazm uchun joy kerakmi? Oldindan
<a class="bron-havola" href="bron/">Stolni band qilish</a>
tugmasini bosing — biz qo'ng'iroq qilamiz.</p>
<p>Oilaviy bazm uchun joy kerakmi? Oldindan
<a class="bron-havola" href="bron/">Stolni band qilish</a>
tugmasini bosing — biz qo'ng'iroq qilamiz.</p>

Nimaga qarang: birinchi paragrafda yashil fon qo'shni qatorlar ustiga chiqib turibdi, havola esa ikki qatorga bo'linib ketgan. Ikkinchisida havola inline-block — atrofidagi qatorlar surilib, unga joy berdi. Havola hamon matn ichida, lekin endi u yaxlit to'rtburchak: qatorga bo'linmaydi, width va vertikal margin ham unga ishlaydi.

Bitta xususiyat: HTML'dagi yangi qator yoki bo'sh joy inline-block lar orasida ham bitta bo'sh joy bo'lib ko'rinadi — ular harf kabi yoziladi. Bir necha inline-block ni yonma-yon terganda bu kutilmagan 4 piksellik bo'shliq beradi. Yonma-yon joylashtirishning to'g'ri vositasi — Flexbox.

Tekshirib ko'ring: Menyudagi har narx span 6rem enida bo'lsin, lekin taom nomi bilan bir qatorda qolsin. Qaysi display qiymati kerak?

3. Ikki qiymatli yozuv: tashqi va ichki tur

3.1 Har quti ikki savolga javob beradi

Ko'chadagi avtobusni tasavvur qiling. U boshqa mashinalar orasida yo'l qoidasi bo'yicha yuradi — bu uning tashqi xulqi. Ichida esa o'rindiqlar o'z tartibida terilgan — bu ichki tuzilishi. Ikkalasi bir-biriga bog'liq emas: bir xil avtobus ichida o'rindiqlar har xil terilishi mumkin.

CSS qutisi ham ikki savolga javob beradi:

• Tashqi tur (outer) — qo'shnilar orasida qanday turaman? block yoki inline.
• Ichki tur (inner) — bolalarimni qanday teraman? flow (oddiy oqim), flow-root, flex, grid, table.

Bugun ikkalasini bitta display da yozish mumkin:

Endi inline-block nomining ma'nosi ochildi: tashqaridan inline, ichkaridan — o'z qoidalari bilan yashaydigan "blok". flex va grid — bolalarni terishning boshqa usullari. Ularni Flexbox'ga kirish va Grid'ga kirish darslarida o'rganamiz, hozir bilish shart emas.

flowchart LR
  D["display: inline flow-root"] --> T["Tashqi tur: inline<br/>qo'shnilar orasida<br/>matn kabi turadi"]
  D --> I["Ichki tur: flow-root<br/>bolalarini alohida<br/>xonada teradi"]

Nimaga qarang: bitta display ikki savolga javob beradi. Birinchi so'z — tashqarisi, ikkinchisi — ichi.

Baseline ma'lumotlariga ko'ra, ikki qiymatli yozuv 2023-yil iyulidan beri to'rt asosiy brauzerning hammasida ishlaydi, 2026-yil yanvaridan esa "keng tarqalgan" (Widely available). Lekin kodlarda ko'proq eski bitta so'zli yozuvni uchratasiz, kursda ham ko'proq u. Ikki qiymatli yozuv display qanday o'ylanganini tushunish uchun kerak.

3.2 flow-root — margin'larni ichida ushlaydigan blok

Margin sirlari darsidagi muammo: kartaning birinchi bolasining margin'i kartadan tashqariga chiqib ketardi. Yechimlardan biri — kartaga display: flow-root:

<style>
  :root {
    --rang-fon: #fffaf0;
  }
  body {
    background-color: #fde2c4;
  }
  .taom-karta {
    background-color: var(--rang-fon);
    margin-bottom: 1rem;
  }
  .taom-karta h3 {
    margin-top: 32px;
  }
  .taom-karta + .taom-karta {
    display: flow-root;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh — oddiy blok</h3>
</article>
<article class="taom-karta">
  <h3 class="taom-nomi">Manti — flow-root</h3>
</article>

Nimaga qarang: birinchi kartada qaymoq fon sarlavhaning tepasidan boshlanadi — margin tashqariga chiqqan. Ikkinchisida sarlavha ustida 32 piksellik qaymoq joy bor — margin karta ichida qoldi. Padding ham, border ham qo'shilmadi.

flow-root — "tashqaridan oddiy blok, ichkaridan alohida xona". Bunday "xona" ichidagi margin'lar tashqariga chiqmaydi. Rasmni matn o'rab turadigan eski float ni ham u o'z ichida ushlaydi. "Xona"ning rasmiy nomi — block formatting context. Uni Normal oqim va formatting context darsida chuqur o'rganamiz.

4. display: contents — o'rovchini olib tashlash

4.1 Nima qiladi

display: contents elementning o'z qutisini yo'q qiladi, bolalari esa qoladi. Go'yo o'rovchi teg HTML'da yo'qdek: bolalar to'g'ridan-to'g'ri bobosining bolasi bo'lib ko'rinadi. Elementning o'z padding'i, border'i va foni ham yo'qoladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  section {
    border: 2px solid var(--rang-asosiy);
    padding: 0.5em;
    margin-bottom: 1rem;
  }
  div {
    border: 2px dashed var(--rang-urgu);
    padding: 0.5em;
  }
  section + section div {
    display: contents;
  }
</style>
<section>
  <div><p>Osh</p><p>Manti</p></div>
</section>
<section>
  <div><p>Osh</p><p>Manti</p></div>
</section>

Nimaga qarang: ikkinchi section da qizg'ish punktir ramka yo'q — div ning qutisi yo'qoldi. Paragraflar esa joyida. Amalda bu grid va flex'da kerak bo'ladi: ichma-ich o'rovchi div bolalarni layout'dan "yashiradi", contents esa ularni qaytaradi.

4.2 Accessibility xavfi

Brauzer har element uchun accessibility daraxtini quradi (Accessibility daraxti). MDN hozir ham ogohlantiradi: ba'zi brauzerlarda display: contents berilgan element shu daraxtdan yo'qoladi. Ekran o'quvchi uning rolini — "ro'yxat", "tugma", "jadval" — aytmay qo'yadi. Bu brauzer xatosi, lekin u hali bor.

Chrome'da tekshirdik: ul, sarlavha va havola display: contents bilan ham rolini saqlab qoldi. Lekin tugma boshqa muammo ko'rsatdi: Tab uni butunlay chetlab o'tdi. Faqat klaviatura bilan ishlaydigan Bobur bunday tugmani bosa olmaydi.

Qoida oddiy: display: contents ni faqat ma'nosiz o'rovchiga — div yoki span ga — bering. Tugma, havola, ro'yxat, jadval, sarlavha va landmark'larga (nav, main) — hech qachon.

5. Yashirishning besh yo'li

5.1 display: none — butunlay yo'q

display: none elementni sahifadan olib tashlaydi: u joy egallamaydi, ko'rinmaydi, Tab bilan unga borib bo'lmaydi, ekran o'quvchi uni o'qimaydi. HTML'da u bor, lekin brauzer uni chizmaydi.

Ikki muhim xususiyat:

• Bolalar ham birga yo'qoladi. Bolaga display: block bersangiz ham, u ko'rinmaydi — Chrome'da tekshirdik. Yopiq qutidagi narsani ochiq qilib bo'lmaydi.
• Siz uni allaqachon ishlatgansiz. SVG va ikonkalar darsidagi style="display: none" sprite'ni aynan shunday yashirgan edi. symbol lar ko'rinmaydi, lekin use ularni baribir chaqira oladi.

5.2 hidden atributi va uning tuzog'i

hidden atributi (Global atributlar) ichkarida xuddi shu display: none bilan ishlaydi — uni brauzer uslublari beradi. Mana shu yerda tuzoq bor. Brauzer uslubi eng kuchsiz manba. Sizning har qanday display qoidangiz uni yengadi (Kaskad):

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .taom-karta {
    display: block;
    border: 2px solid var(--rang-asosiy);
    padding: 0 1em;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
</article>
<article class="taom-karta" hidden>
  <h3 class="taom-nomi">Manti — bugun tugadi</h3>
</article>

Nimaga qarang: "Manti — bugun tugadi" kartasi ko'rinib turibdi, garchi HTML'da hidden bo'lsa ham. .taom-karta { display: block; } brauzerning display: none qoidasini yengdi. Global atributlar darsida "hidden ishlamayotgandek tuyulsa — CSS'ni tekshiring" degan edik. Mana sababi.

Tuzatish — butun loyiha uchun bitta qoida:

/* hidden atributi har doim yutsin */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

Kaskad darsida !important dan qochishni aytgan edik. Bu — kamdan-kam to'g'ri istisnolardan biri. hidden ning ma'nosi "hozir bu yo'q", u hech qanday bezakdan yutqazmasligi kerak.

:not([hidden="until-found"]) qismi nega kerak? hidden="until-found" boshqacha ishlaydi. Chrome'da tekshirdik: bunday elementning display i none emas, u yopiq, lekin Ctrl + F topganda ochiladi. Bizning qoidamiz unga ham none bersa, qidiruv uni hech qachon ocha olmasdi.

5.3 visibility: hidden — joy qoladi

visibility: hidden elementni ko'rinmas qiladi, lekin uning joyi qoladi. Bo'sh joy xuddi element turgandek. U bosilmaydi, Tab uni chetlab o'tadi, ekran o'quvchi o'qimaydi.

display: none dan yana bir farqi — bola o'zini "ochib" qo'yishi mumkin. Otaga visibility: hidden, bolaga visibility: visible bersangiz, bola ko'rinadi. Chrome'da tekshirdik.

5.4 opacity: 0 — ko'rinmas, lekin bor

Ranglar 1 darsida opacity: 0 elementni ko'rinmas qilishini, lekin joyida qoldirishini ko'rgan edik. Endi aniqroq:

• joy qoladi;
• element bosiladi — Chrome'da tekshirdik: ko'rinmas tugma o'z joyidagi bosishlarni ushlab qoldi;
• Tab unga boradi — fokus ko'rinmas tugmaga tushadi;
• ekran o'quvchi uni o'qiydi.

Ya'ni opacity: 0 — yashirish emas, "shaffof qilish". U animatsiyada qulay: element sekin paydo bo'ladi (Transition). Lekin animatsiyadan keyin ham opacity: 0 da qolgan tugma — sahifadagi ko'rinmas tuzoq.

5.5 inert — ko'rinadi, lekin tegib bo'lmaydi

inert atributini Global atributlar darsida ko'rgan edik. Element ko'rinib turadi, lekin uni bosib ham, Tab bilan unga borib ham bo'lmaydi, ekran o'quvchi o'qimaydi. O'shanda "inert qism ko'rinishidan ham faol emasligini bildirsin: masalan, xiraroq bo'lsin — buni CSS bilan qilamiz" degan edik:

<style>
  :root {
    --rang-ikkinchi: #5b6660;
  }
  [inert] {
    opacity: 0.5;
  }
  [role="status"] {
    color: var(--rang-ikkinchi);
  }
</style>
<form action="https://example.com/bron" method="post" inert>
  <p>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text" value="Malika">
  </p>
  <button type="submit">Stolni band qilish</button>
</form>
<p role="status">Yuborilmoqda, biroz kuting…</p>

Nimaga qarang: forma xiralashgan — mehmon uning hozir ishlamasligini ko'radi. Maydonni bosib yoki Tab ni bosib ko'ring: fokus formaga tushmaydi. Ostidagi xabar sababini aytadi. Faol bo'lmagan qism uchun WCAG kontrast talab qilmaydi (Ranglar 1), lekin sabab matni — to'liq kontrastda. Uni role="status" atributi (Jonli hududlar) orqali tanladik.

5.6 Hammasi bitta jadvalda

Uchtasini bitta natijada ko'ring:

<style>
  li:nth-child(2) {
    visibility: hidden;
  }
  li:nth-child(3) {
    display: none;
  }
  li:nth-child(4) {
    opacity: 0;
  }
</style>
<ol>
  <li>Osh — ko'rinadi</li>
  <li>Lag'mon — visibility: hidden</li>
  <li>Manti — display: none</li>
  <li>Ko'k choy — opacity: 0</li>
  <li>Non — ko'rinadi</li>
</ol>

Nimaga qarang: "Osh" va "Non" orasida ikki bo'sh qator bor — visibility va opacity joyni saqlab qoldi. "Manti" esa izsiz yo'qoldi. Raqamlarga qarang: "Non" — 4-o'rinda. Ko'rinmas "Lag'mon" va "Ko'k choy" sanaldi, joyi ham yo'q "Manti" — yo'q.

Yana bir yo'l bor: elementni ko'zdan yashirish, lekin ekran o'quvchiga qoldirish — masalan, "Batafsil" havolasining "Batafsil: osh" degan to'liq nomi. Buning uchun beshala usul ham to'g'ri kelmaydi. Maxsus korinmas texnikasi kerak — uni position darsida yozamiz.

5.7 Qaysi birini qachon

• Holat ("hozir bu yo'q": tugagan taom, yopiq panel) — hidden atributi. Keyinroq JavaScript uni qo'yadi va olib tashlaydi.
• Ekran eniga qarab yashirish (telefonda boshqa menyu) — CSS'da display: none (Media queries).
• Joy saqlansin, element ko'rinmasin — visibility: hidden.
• Silliq paydo bo'lish — opacity, lekin oxirida yashirish kerak bo'lsa, visibility yoki hidden bilan birga.
• "Band" yoki "kuting" holati — inert va xiralashtirish.

Tekshirib ko'ring: Telefonda "Aksiya" banneri opacity: 0 bilan yashirildi. Bobur Tab ni bosib yurib, ko'rinmas havolaga tushib qoldi va nima bo'layotganini tushunmadi. Qaysi usul to'g'ri edi va nega?

6. Foydalanuvchi bilan "muloqot": pointer-events, cursor, user-select

6.1 pointer-events: none — bosishni o'tkazib yuborish

pointer-events: none element ustidagi sichqoncha va barmoq bosishlarini uning ostidagiga o'tkazadi. Element go'yo shisha bo'lib qoladi. Bu bezak qatlami uchun kerak: masalan, karta ustiga ::before bilan chizilgan soya bosishlarni to'smasin (Pseudo-elementlar).

Diqqat: pointer-events: none havola yoki tugmani o'chirmaydi. Chrome'da tekshirdik: bunday havolani sichqoncha bilan bosib bo'lmadi, lekin Tab unga bordi va Enter uni ochadi. Tugmani o'chirish kerak bo'lsa — disabled atributi, butun qismni — inert.

6.2 cursor — sichqoncha ko'rsatkichi

cursor sichqoncha element ustida qanday ko'rinishini belgilaydi. Eng ko'p ishlatiladiganlari:

• pointer — qo'l belgisi; havolalarda brauzer uni o'zi qo'yadi;
• text — matn tanlash belgisi;
• not-allowed — "mumkin emas" belgisi;
• default — oddiy strelka.

button:disabled {
  cursor: not-allowed;
}

Faol bo'lmagan tugma ustida sichqoncha "taqiq" belgisini ko'rsatadi — foydalanuvchi nega bosilmayotganini tushunadi.

Baseline ma'lumotlari not-allowed kabi qiymatlarni "Baseline emas" deb belgilaydi. Sababi: telefondagi Safari'da sichqoncha kursori yo'q. Kompyuterdagi to'rt asosiy brauzerning hammasida ular ishlaydi, telefonda esa qator shunchaki e'tiborsiz qoladi — zaxira kerak emas. Xulosa: cursor faqat qo'shimcha ishora bo'lsin. Telefondagi mehmon uni hech qachon ko'rmaydi.

6.3 user-select — matnni belgilash

user-select: none matnni sichqoncha bilan belgilashni taqiqlaydi. Ehtiyot bo'ling: mehmon narxni, manzilni yoki telefon raqamini nusxalamoqchi bo'ladi. Matnni belgilashni taqiqlash — uni jazolash. Faqat interfeys bo'laklarida kerak: masalan, tez-tez bosiladigan tugma yozuvi belgilanib ketmasin.

Baseline ma'lumotlariga ko'ra user-select — Baseline emas: Safari faqat -webkit- old qo'shimchali nomini tushunadi. Shuning uchun ikkala qator yoziladi:

button {
  -webkit-user-select: none;
  user-select: none;
}

Birinchi qator — Safari uchun zaxira. Boshqa brauzerlar tushunmagan qatorni tashlab ketadi (CSS nima darsidagi qoida), keyin standart nomni o'qiydi. Bunday old qo'shimchalarni avtomatik qo'shadigan vositani PostCSS va Autoprefixer darsida ko'rasiz.

7. Ko'p uchraydigan xatolar

7.1 span ga width yoki margin-top

Hech narsa o'zgarmaydi, DevTools deklaratsiyani xira qiladi. Tuzatish: display: inline-block yoki display: block.

7.2 hidden ishlamayapti

Elementda hidden bor, u baribir ko'rinadi. Sabab — muallif CSS'idagi display qoidasi. Tuzatish: [hidden]:not([hidden="until-found"]) { display: none !important; }.

7.3 Ko'rinmas tugma bosishlarni "yeydi"

opacity: 0 bilan yashirilgan element joyida qoladi va ostidagi tugmani to'sadi. Tuzatish: visibility: hidden yoki hidden.

7.4 pointer-events: none bilan "o'chirish"

Sichqoncha ishlamaydi, klaviatura — ishlaydi. Tuzatish: disabled yoki inert.

7.5 Ma'noli elementga display: contents

Ro'yxat, tugma yoki jadval rolini yo'qotishi yoki fokusdan chiqib qolishi mumkin. Tuzatish: o'rniga ichki ma'nosiz div ga bering yoki layout'ni boshqacha quring.

7.6 display: none bilan "faqat ekran o'quvchi uchun" matn

display: none ekran o'quvchidan ham yashiradi. Tuzatish: korinmas texnikasi (position).

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Qaysi usul?

Har vaziyat uchun usul tanlang: display: none, hidden, visibility: hidden, opacity: 0, inert.

1. Taom tugadi — kartasi sahifadan butunlay yo'qolsin (holat) —
2. Forma yuborilayotganda uni bosib bo'lmasin, lekin ko'rinib tursin —
3. Jadval kataklaridagi ikonka yo'q qatorda o'rni bo'sh tursin, ustunlar siljimasin —
4. Telefonda katta ekran uchun mo'ljallangan rasm ko'rinmasin (CSS'da) —

Ishora: "Qaysi birini qachon" ro'yxati.

2-mashq (o'rta): Bron formasining yorliqlari

«Bahor» bron formasida har maydon o'z div ida: label, keyin yordam matni (span, id si -yordam bilan tugaydi), keyin maydon:

<div>
  <label for="telefon">Telefon raqamingiz</label>
  <span id="telefon-yordam">Masalan: +998 90 000 00 00.</span>
  <input id="telefon" name="telefon" type="tel"
         autocomplete="tel" required
         aria-describedby="telefon-yordam">
</div>

asosiy.css ga yozing:

1. Yorliq — o'z qatorida, qalin.
2. Yordam matni — o'z qatorida, kichikroq (0.875rem) va ikkinchi darajali rangda.
3. Har maydon guruhi (div) keyingisidan 1rem uzoqda — oraliqni layout beradi.

Ishora: 1–2-bandlar — display: block. Yordam matnini tanlash — Atribut selektorlari darsidagi "shu bilan tugaydi" ($=). 3-band — Margin sirlari dagi * + *.

<style>
  :root {
    --rang-ikkinchi: #5b6660;
  }
  form label {
    display: block;
    font-weight: bold;
  }
  span[id$="-yordam"] {
    display: block;
    font-size: 0.875rem;
    color: var(--rang-ikkinchi);
  }
  form > * + * {
    margin-top: 1rem;
  }
</style>
<form action="https://example.com/bron" method="post">
  <div>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text" autocomplete="name">
  </div>
  <div>
    <label for="telefon">Telefon raqamingiz</label>
    <span id="telefon-yordam">Masalan: +998 90 000 00 00.</span>
    <input id="telefon" name="telefon" type="tel"
           autocomplete="tel" required
           aria-describedby="telefon-yordam">
  </div>
</form>

3-mashq (qiyin): Uch sir

Stajyorning sahifasida uch muammo:

.aksiya {
  display: block;
}
nav ul {
  display: contents;
}
/* bron bugun yopiq */
.bron-havola {
  pointer-events: none;
}

<p class="aksiya" hidden>Aksiya tugadi</p>
<nav aria-label="Asosiy menyu">
  <ul>
    <li><a href="menyu/">Menyu</a></li>
    <li><a href="bron/">Bron</a></li>
  </ul>
</nav>
<a class="bron-havola" href="bron/">Stolni band qilish</a>

1. Tugagan aksiya ko'rinib turibdi. Nega? Tuzating.
2. nav ul dagi qoida qanday xavf tug'diradi?
3. Bron bugun yopiq. Havola sichqoncha bilan bosilmaydi, lekin Bobur baribir bron sahifasiga o'tib ketdi. Qanday? To'g'ri yechim qanday bo'ladi?

Ishora: "hidden atributi va uning tuzog'i", "Accessibility xavfi" va "pointer-events: none" bo'limlari. 3-band uchun o'ylang: havola bosilmaydigan bo'lishi kerakmi yoki umuman yo'q bo'lishi kerakmi?

[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

4-mashq: Portfolio qadami — aloqa formasi tartibga keladi

box-sizing darsida maydonlar butun enni oldi va yorliqlar tasodifan ularning ustiga tushdi. Endi buni ataylab qilamiz:

1. Matn maydonlarining yorliqlari — o'z qatorida. Radio tugmalarining yorliqlari esa tugma yonida qolsin.
2. Email ostidagi yordam matni (email-yordam) — o'z qatorida, 0.875rem va ikkinchi darajali rangda.
3. Loyihaga [hidden] himoya qoidasini qo'shing — hozir portfolio'da hidden yo'q, lekin 09-qismda JavaScript uni ishlatadi.
4. DevTools'da yorliqni tanlang va Computed'da display qiymatini tekshiring.

Ishora: portfolio formasida har maydon p ichida. Matn maydonida label — p ning birinchi bolasi, radio'da esa birinchi bola — input. :first-child (Tuzilma pseudo-klasslari).

/* hidden atributi har doim yutsin */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* Aloqa formasi: matn maydoni yorlig'i o'z qatorida */
p > label:first-child {
  display: block;
}

/* Maydon ostidagi yordam matni */
span[id$="-yordam"] {
  display: block;
  font-size: 0.875rem;
  color: var(--rang-ikkinchi);
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-ikkinchi: #5b6660;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  button,
  input,
  textarea {
    font: inherit;
  }
  input:not([type="radio"]),
  textarea {
    width: 100%;
    padding: 0.5em;
  }
  p > label:first-child {
    display: block;
  }
  span[id$="-yordam"] {
    display: block;
    font-size: 0.875rem;
    color: var(--rang-ikkinchi);
  }
</style>
<form action="https://example.com/aloqa" method="post">
  <p>
    <label for="email">Email</label>
    <input id="email" name="email" type="email"
           autocomplete="email" required
           aria-describedby="email-yordam">
    <span id="email-yordam">Javobni shu manzilga yozaman.</span>
  </p>
  <fieldset>
    <legend>Qaysi mavzuda?</legend>
    <p>
      <input id="mavzu-ish" name="mavzu" type="radio"
             value="ish" required>
      <label for="mavzu-ish">Ish taklifi</label>
    </p>
  </fieldset>
  <button type="submit">Yuborish</button>
</form>

9. Real ishda

• display — layout'ning eshigi. Flex va grid ham display qiymatlari. Keyingi o'nlab darslar aslida display ning ichki turlarini o'rganadi.
• Komponent kutubxonalari hidden va display: none ni holat uchun keng ishlatadi. Ko'p loyihalarning reset'ida [hidden] himoya qoidasi bor — endi uning sababini bilasiz.
• Accessibility auditi "ko'rinmas, lekin fokus oladigan" elementlarni alohida qidiradi — ko'pincha ular opacity: 0 bilan yashirilgan bo'ladi.
• Intervyuda so'raladi: "display: none, visibility: hidden va opacity: 0 farqi?", "inline va inline-block farqi?", "display: contents nima va uning qanday xavfi bor?".

Xulosa

• block — yangi qator, butun en; inline — matn ichida, width, height va vertikal margin ishlamaydi; inline-block — matn ichida, o'lcham oladi.
• display = tashqi tur + ichki tur: inline-block — inline flow-root, inline-flex — inline flex.
• flow-root margin'larni ichida ushlaydi; contents o'rovchini yo'q qiladi — faqat ma'nosiz div ga.
• display: none va hidden — joy ham, o'qish ham yo'q; visibility: hidden — joy qoladi; opacity: 0 — bosiladi va o'qiladi; inert — ko'rinadi, tegib bo'lmaydi.
• [hidden] ni muallif display i yengadi — himoya qoidasini qo'shing.
• pointer-events: none klaviaturani to'xtatmaydi; user-select: none — faqat interfeys bo'laklarida, -webkit- bilan.

Keyingi dars: O'lchamlar — width va height, min- va max- chegaralar, min-content, fit-content, aspect-ratio va barmoq bilan bosiladigan joyning eng kichik o'lchami.

Manbalar

• MDN: "display", "Using the multi-keyword syntax with CSS display", "visibility", "pointer-events", "user-select", "inert" — developer.mozilla.org
• W3C: "CSS Display Module Level 3" — w3.org/TR/css-display-3
• web-features (Baseline ma'lumotlari): "two-value-display", "display-contents", "user-select" — github.com/web-platform-dx/web-features