Mobile-first CSS: yondashuv amalda

Qisqacha: Mobile-first — avval eng tor ekran uchun media query'siz asosiy stil yozish, keyin @media (width >= 40rem) va (width >= 64rem) bilan keng ekranlarga faqat qo'shimcha berish. Teskari yo'l — desktop-first — katta ekran stilini max-width bilan telefonda "bekor qiladi" va kod ko'payadi. Mobile-first'da telefon eng oddiy, hamma joyda ishlaydigan stilni oladi, kontent tartibi esa telefonda o'ylab chiqiladi.

Bu darsda

• Mobile-first va desktop-first farqini kod misolida ko'rsatasiz.
• min-width zanjirini to'g'ri tartibda yozasiz.
• Telefon uchun kontent ustuvorligini tanlaysiz va nima uchun kontentni telefonda yashirmaslik kerakligini tushuntirasiz.
• Mobile-first qoidadan qachon chetga chiqish mumkinligini bilasiz.
• Portfoliongizning menyusi, loyihalar to'ri va tipografiyasini mobile-first qilib qayta qurasiz.

Oldin bilishingiz kerak: Media queries, Responsive dizayn tamoyillari, Kaskad, Flex'da tekislash.

1. Nega bu kerak?

O'tgan darsda media query yozishni o'rgandik. Diqqat qilgan bo'lsangiz, deyarli har natijada bir xil tartib bor edi: avval hech qanday shartsiz bitta ustun, keyin (width >= 40rem) bilan ikkita. Bu tasodif emas — bu mobile-first (avval mobil) yondashuvi.

Uyni qurishni eslang. Avval poydevor va devorlar — ularsiz uy yo'q. Keyin, pul va joy bo'lsa, ikkinchi qavat va ayvon qo'shiladi. Hech kim avval uch qavatli uy qurib, keyin ortiqchasini buzmaydi.

CSS'da ham shunday. Telefon — poydevor: eng tor joy, eng kerakli narsalar. Keng ekran — "qo'shimcha qavat". Bu darsda nega shu tartib yaxshiroq ekanini ko'ramiz va portfoliongizni aynan shu tartibda qayta quramiz.

2. Ikki yondashuv

2.1 Desktop-first: katta ekrandan boshlash

Uzoq yillar dasturchilar kompyuterda ishlab, kompyuter uchun yozardi. Telefon keyin eslanardi. «Bahor» bosh sahifasini shu uslubda yozamiz — header, "Stolni band qilish" tugmasi va taom kartalari:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bron-havola {
  display: inline-block;
}
section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
section > h2 {
  grid-column: 1 / -1;
}

@media (width < 64rem) {
  section {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width < 40rem) {
  header {
    display: block;
  }
  .bron-havola {
    display: block;
  }
  section {
    grid-template-columns: 1fr;
  }
  section > h2 {
    grid-column: auto;
  }
}

Oxirgi blokka qarang. Undagi to'rt deklaratsiyaning hammasi yangi narsa qo'shmaydi — yuqorida yozilganni bekor qiladi: display: block flex'ni o'chiradi, grid-column: auto cho'zishni qaytaradi. Telefon avval kompyuter stilini oladi, keyin uni birma-bir "tozalaydi".

2.2 Mobile-first: telefondan boshlash

Xuddi shu sahifa, teskari tartibda:

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #fffaf0;
  }
  header nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0;
    list-style: none;
  }
  header a {
    color: #2f6b3a;
  }
  .bron-havola {
    display: block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    background-color: #2f6b3a;
    color: #fffaf0;
    text-align: center;
    text-decoration: none;
  }
  section {
    display: grid;
    gap: 1rem;
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
  .narx {
    color: #b4461a;
  }
  @media (width >= 40rem) {
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .bron-havola {
      display: inline-block;
    }
    section {
      grid-template-columns: 1fr 1fr;
    }
    section > h2 {
      grid-column: 1 / -1;
    }
  }
  @media (width >= 64rem) {
    section {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>
<header>
  <p><strong>Choyxona «Bahor»</strong></p>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="./" aria-current="page">Bosh sahifa</a></li>
      <li><a href="menyu/">Menyu</a></li>
      <li><a href="aloqa/">Aloqa</a></li>
    </ul>
  </nav>
</header>
<main>
  <p><a class="bron-havola" href="bron/">Stolni band qilish</a></p>
  <section>
    <h2>Bugungi menyu</h2>
    <article class="taom-karta">
      <h3>Osh</h3>
      <p><span class="narx">35 000 so'm</span></p>
    </article>
    <article class="taom-karta">
      <h3>Lag'mon</h3>
      <p><span class="narx">28 000 so'm</span></p>
    </article>
    <article class="taom-karta">
      <h3>Manti</h3>
      <p><span class="narx">30 000 so'm</span></p>
    </article>
  </section>
</main>

Nimaga qarang:

• 360: nom tepada, menyu ostida. "Stolni band qilish" — butun en bo'ylab yashil tugma: Chrome'da o'lchadik, 344 × 45 piksel. Barmoq bilan bosish oson. Kartalar ustma-ust.
• 768: header bir qatorda, tugma o'z matnicha (169 piksel), kartalar ikki ustunda — uchinchisi pastda.
• 1280: uch karta bitta qatorda, har biri 410.7 piksel.

Media bloklarda bitta ham "bekor qiluvchi" qator yo'q. Har deklaratsiya yangi narsa qo'shadi: flex, ikkinchi ustun, uchinchi ustun.

2.3 Taqqoslash

Bekor qilish nega yomon? Birinchidan, kod ko'payadi. Ikkinchidan, xato osonlashadi: kompyuter stiliga yangi qator qo'shsangiz (masalan, section ga align-items: start), uni telefonda bekor qilishni unutasiz. Uchinchidan, "bekor qilish" uchun boshlang'ich qiymatni bilish kerak: grid-column niki — auto, display niki — elementga qarab block yoki inline. Mobile-first'da bu savol umuman tug'ilmaydi.

Tekshirib ko'ring: Desktop-first CSS'da .taom-karta { display: flex; } yozilgan, telefonda esa u ustun bo'lishi kerak. Mobile-first'ga o'girganda asosiy stilda va media blokda nima yoziladi?

3. min-width zanjiri

3.1 Tartib — kichikdan kattaga

Mobile-first CSS uch qatlamdan iborat:

flowchart LR
  A["Asos: shartsiz<br/>hamma ekran"] --> B["width >= 40rem<br/>+ qo'shimcha"]
  B --> C["width >= 64rem<br/>+ yana qo'shimcha"]

Nimaga qarang: har keyingi qatlam oldingisining ustiga qo'shiladi. 1280 piksellik ekranda uchala qatlam ham ishlaydi: asos, 40rem bloki va 64rem bloki. 768 da — ikkitasi. 360 da — faqat asos.

Shuning uchun tartib muhim. Media queries darsidagi mashqni eslang: ikki blok ham bajarilganda, bir xil selektorda pastdagisi yutadi. Katta breakpoint bloki doim pastda turadi.

3.2 Bloklarni qayerga yozish

Ikki uslub bor, ikkalasi ham to'g'ri:

1. Fayl oxirida. Hamma asosiy stillar, keyin bitta (width >= 40rem) bloki, keyin bitta (width >= 64rem) bloki. Breakpointlar bir joyda — ko'rish oson.
2. Komponent yonida. header qoidasi va darhol uning @media bloki, keyin section va uning bloki. Bitta komponentni o'zgartirganda hammasi ko'z oldida.

Kichik saytda — birinchi uslub qulay. Portfolio va «Bahor»da shunday qilamiz. Katta loyihalarda ko'pincha ikkinchisi tanlanadi. Muhimi — butun fayl bo'ylab bitta uslub.

Tekshirib ko'ring: Asosda h2 { font-size: 1.25rem; }, 40rem blokida 1.375rem, 64rem blokida 1.5rem. 900 piksellik ekranda h2 qaysi o'lchamda? 1100 pikselda-chi?

4. Progressive enhancement va kontent ustuvorligi

4.1 Asosiy stil — hamma uchun ishlaydi

Brauzer mosligi darsida progressive enhancement (bosqichma-bosqich boyitish) g'oyasini ko'rgan edik: avval hamma joyda ishlaydigan asos, keyin imkoniyati borlarga qo'shimcha. Mobile-first — aynan shu g'oyaning CSS'dagi ko'rinishi.

Asosiy stil media query'siz. Demak u media query'ni tushunmaydigan har qanday muhitda ham ishlaydi: juda eski brauzer, oddiy "tugmali" telefon brauzeri, ba'zi email dasturlari. Ular oddiy, bitta ustunli, lekin o'qiladigan sahifa ko'radi. Desktop-first'da esa ular kompyuter layoutini oladi — tor ekranda buzilgan holda.

4.2 Telefonda nima birinchi?

360 piksel — kichik joy. Telefon uchun yozish sizni tanlashga majbur qiladi: birinchi ekranda nima turadi? «Bahor» mehmoni telefonni nima uchun ochadi? Ko'pincha — menyu va narxni ko'rish, bron qilish, manzilni topish. Shuning uchun bosh sahifada birinchi — "Stolni band qilish" tugmasi va bugungi taomlar. Choyxona tarixi — pastroqda.

Bu tartib HTML'da yoziladi. HTML tartibi — telefondagi tartib. Keng ekranda CSS bilan elementlarni yonma-yon qo'yish mumkin, lekin ularni vizual "aralashtirmang": order va a11y darsida ko'rdik — ko'z bir tartibda, Tab boshqasida yurib qoladi.

4.3 Telefonda kontentni yashirmang

Desktop-first'ning keng tarqalgan "yechimi": telefonda sig'magan blokni display: none qilish. Masalan, "Choyxona haqida" bo'limi yoki yon panel. Muammo: telefondagi foydalanuvchi — ikkinchi darajali odam emas. Unga ham manzil, ish vaqti va aksiya kerak. Yashirilgan kontent ekran o'quvchiga ham yetib bormaydi (display).

To'g'ri yo'l — joylashuvni o'zgartirish: yon panel telefonda asosiy kontent ostiga tushadi, uzun ro'yxat details ichiga yig'iladi. Kontent o'sha-o'sha, faqat boshqa joyda.

Tekshirib ko'ring: Stajyor aytadi: "Telefonda aksiya paneli joy olyapti, @media (width < 40rem) { aside { display: none; } } yozdim." Nima deysiz?

5. Qachon max-width (yoki <) to'g'ri?

Mobile-first — qoida, lekin qonun emas. Ikki holatda "tor ekran" sharti o'rinli:

• Faqat telefonga tegishli tuzatish. Media queries darsidagi jadval → kartochka: jadval — HTML'ning o'z ko'rinishi, kartochka esa faqat tor ekranda kerak bo'lgan "buzish". Uni (width < 40rem) ichida yozish mantiqan to'g'ri.
• Faqat o'rta oraliq. Biror narsa faqat planshetda kerak bo'lsa: (40rem <= width < 64rem). Range syntax bu yerda ikki shartni bitta yozuvga yig'adi.

Qoida: agar < bilan yozilgan blokda "bekor qilish" ko'p bo'lsa — demak asos noto'g'ri tanlangan, uni teskari o'giring.

Tekshirib ko'ring: Jadval → kartochka o'zgarishini mobile-first uslubida, >= bilan yozsak nima bo'lardi?

6. Mobile-first ish tartibi

Mobile-first — faqat CSS tartibi emas, ish usuli ham:

1. HTML'ni tayyorlang. Semantik, to'g'ri tartibda — telefondagi o'qish tartibi.
2. DevTools'da 360 piksel qiling (Responsive dizayn tamoyillari) va media query'siz CSS yozing. Sahifa shu enda to'liq ishlashi kerak: o'qiladi, bosiladi, gorizontal skroll yo'q.
3. Chetini sekin kengaytiring. Kontent noqulay bo'lgan joyda — qator juda uzun, kartalar cho'zilib ketgan — to'xtang.
4. Breakpoint qo'shing. Kursda — 40rem yoki 64rem, kontent talab qilsa — boshqa son.
5. Takrorlang 1280 va undan kenggacha.
6. Tekshiring: 320 piksel (WCAG 1.4.10), zoom 200% va haqiqiy telefon.

Maket faqat kompyuter uchun chizilgan bo'lsa ham, shu tartib ishlaydi: avval telefonda qanday bo'lishini o'zingiz hal qilasiz, keyin kengaytirasiz.

7. Ko'p uchraydigan xatolar

7.1 Kompyuterda yozib, keyin "telefonga moslash"

Hamma CSS 1280 pikselda yozilgan, oxirida (width < 40rem) blokiga o'nlab tuzatish qo'shilgan. Tuzatish: asosiy stillarni telefon enida qayta tekshiring; keng ekranga xos qatorlarni (grid-template-columns: repeat(3, 1fr), display: flex) media blokka ko'chiring.

7.2 >= va < aralash

Bir faylda ham "kichikdan kattaga", ham "kattadan kichikka" bloklar. Qaysi qoida qayerda ishlashini kuzatish qiyinlashadi. Tuzatish: bitta yo'nalish tanlang; < faqat «Qachon max-width (yoki <) to'g'ri?» bo'limidagi istisnolar uchun.

7.3 Katta breakpoint bloki tepada

(width >= 64rem) bloki (width >= 40rem) blokidan oldin — 1280 da 40rem bloki yutadi. Tuzatish: kichikdan kattaga.

7.4 Telefonda kontent yashirilgan

display: none bilan "joy tejash". Tuzatish: joylashuvni o'zgartiring, kontentni qoldiring («Telefonda kontentni yashirmang» bo'limi).

7.5 Asosiy stilda qotgan ustunlar

Asosda grid-template-columns: 1fr 1fr — telefonda ikki tor ustun. Tuzatish: asosda bitta ustun (grid'da hech narsa yozmaslik ham bitta ustun beradi), ko'p ustun — media blokda.

8. Mashqlar

1-mashq (oson): Qaysi yondashuv?

Har parcha mobile-first'mi yoki desktop-first'mi? Nega?

1. nav ul { display: flex; } + @media (width < 40rem) { nav ul { display: block; } }
2. main { padding: 1rem; } + @media (width >= 64rem) { main { padding: 2rem; } }
3. aside { display: none; } + @media (width >= 40rem) { aside { display: block; } }

2-mashq (o'rta): Desktop-first'ni o'giring

«Bahor»ning aloqa sahifasi uchun stajyor shunday yozdi:

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}
address {
  font-size: 1.125rem;
}
@media (width < 40rem) {
  main {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  address {
    font-size: 1rem;
  }
}

Mobile-first qilib qayta yozing. Nechta deklaratsiya kamaydi?

Ishora: asosiy stilga telefon qiymatlarini yozing. 1rem — shrift uchun odatiy qiymat, uni yozish kerakmi?

main {
  display: grid;
  gap: 1rem;
}
@media (width >= 40rem) {
  main {
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
  address {
    font-size: 1.125rem;
  }
}

3-mashq (qiyin): Uch qatlamli footer

«Bahor» footer'ida uch blok bor: manzil (address), ish vaqti (p) va ijtimoiy tarmoqlar (ul). Talab:

1. Telefonda — ustma-ust, har blok orasida 1.5rem.
2. 40rem dan — ikki ustun: manzil va ish vaqti yonma-yon, tarmoqlar pastda butun qator bo'ylab.
3. 64rem dan — uchalasi bir qatorda.

Ishora: footer ga grid va gap. 40rem da tarmoqlar ro'yxati — footer ul { grid-column: 1 / -1; }. 64rem da uni qaytarish kerakmi yoki boshqa yo'l bormi?

<style>
  body {
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
  }
  footer {
    display: grid;
    gap: 1.5rem;
    padding: 1rem;
    background-color: #2f6b3a;
    color: #fffaf0;
  }
  footer > * {
    margin: 0;
  }
  footer a {
    color: #fffaf0;
  }
  @media (width >= 40rem) {
    footer {
      grid-template-columns: 1fr 1fr;
    }
    footer ul {
      grid-column: 1 / -1;
    }
  }
  @media (width >= 64rem) {
    footer {
      grid-template-columns: repeat(3, 1fr);
    }
    footer ul {
      grid-column: auto;
    }
  }
</style>
<footer>
  <address>Toshkent, Chilonzor tumani<br>
    +998 90 000 00 00</address>
  <p>Har kuni 7:00 dan 23:00 gacha</p>
  <ul>
    <li><a href="https://t.me/sizning_kanal">Telegram</a></li>
    <li><a href="https://example.com/instagram">Instagram</a></li>
  </ul>
</footer>

4-mashq: Portfolio qadami — mobile-first qayta qurish

Media queries darsida header'ga birinchi breakpointni qo'ydingiz. Endi portfoliongizning uch qismini mobile-first tartibga keltiring: menyu, loyihalar to'ri va tipografiya.

1. Menyu. Flex naqshlari darsidan beri u allaqachon mobile-first: asosda o'raladigan qator, gap: 0.25rem va havolalar padding i (bosish nishoni), media query'siz. Tekshiring — bu yerda o'zgartirish shart emas.
2. Loyihalar to'ri. loyihalar/index.html dagi .loyihalar (Grid'ga kirish darsidan): asosda bitta ustun, 1.5rem oraliq; 40rem dan ikki teng ustun. Hozir to'r media query'siz ishlayotgan bo'lsa (auto-fit) — uni vaqtincha shu tartibga o'giring, Intrinsic layout darsida ikkala yo'lni solishtiramiz.
3. Tipografiya. Asosda body shrifti odatiy (1rem), h2 — 1.375rem. 64rem dan body — 1.125rem, h2 — 1.5rem. h1 ning clamp() iga tegmang.
4. Fayldagi hamma @media bloklarini oxiriga yig'ing: avval 40rem, keyin 64rem. < yoki max-width qolmasin.
5. 320, 360, 768 va 1280 pikselda o'lchang: main eni, kartalar eni, body, h1, h2 shrifti.

Ishora: menyuda @media yo'qligini DevTools'dagi Styles panelida tekshiring. Tipografiya — font-size 64rem blokida; 70ch ustun body shrifti bilan birga kengayadi (O'lcham birliklari).

/* Menyu — Flex naqshlari darsidagi qoidalar o'zgarmaydi:
   asosi allaqachon o'raladigan qator */

/* Loyihalar — asos: bitta ustun */
.loyihalar {
  display: grid;
  gap: 1.5rem;
}

/* Keng ekran: 40rem (640px) dan */
@media (width >= 40rem) {
  header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
  }
  .loyihalar {
    grid-template-columns: 1fr 1fr;
  }
}

/* Katta ekran: 64rem (1024px) dan */
@media (width >= 64rem) {
  body {
    font-size: 1.125rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
    --rang-chegara: #c9d6cf;
  }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  header,
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  h1,
  h2 {
    color: var(--rang-asosiy);
    line-height: 1.2;
  }
  h1 {
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  }
  h2 {
    font-size: 1.375rem;
  }
  header a {
    color: var(--rang-asosiy);
  }
  nav [aria-current="page"] {
    color: var(--rang-matn);
    font-weight: bold;
  }
  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .loyihalar {
    display: grid;
    gap: 1.5rem;
  }
  .loyihalar article {
    padding: 1rem;
    border: 1px solid var(--rang-chegara);
    border-radius: 0.5rem;
  }
  .loyihalar h2 {
    margin-top: 0;
  }
  @media (width >= 40rem) {
    header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      column-gap: 1rem;
    }
    .loyihalar {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (width >= 64rem) {
    body {
      font-size: 1.125rem;
    }
    h2 {
      font-size: 1.5rem;
    }
  }
</style>
<header>
  <p><a href="../">Aziz Karimov</a></p>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="../">Bosh sahifa</a></li>
      <li><a href="../haqimda/">Men haqimda</a></li>
      <li><a href="./" aria-current="page">Loyihalar</a></li>
      <li><a href="../aloqa/">Aloqa</a></li>
    </ul>
  </nav>
</header>
<main id="asosiy">
  <h1>Loyihalar</h1>
  <p>HTML va CSS qismida qilgan ishlarim.</p>
  <div class="loyihalar">
    <article>
      <h2>Choyxona «Bahor» sayti</h2>
      <p>To'rt sahifali sayt: menyu jadvali, stol band qilish
      formasi va 404 sahifasi.</p>
    </article>
    <article>
      <h2>Semantik blog maqolasi</h2>
      <p>"Osh sirlari" maqolasi: landmarklar, sarlavhalar
      daraxti va izohli rasmlar.</p>
    </article>
  </div>
</main>

9. Real ishda

• Tailwind (kursda alohida o'rganamiz) to'liq mobile-first: grid-cols-1 md:grid-cols-2 — "asosda bitta ustun, md dan ikkita". Prefikssiz class — telefon uchun.
• Google sahifani telefon versiyasi bo'yicha baholaydi (Responsive dizayn tamoyillari) — telefon versiyasi to'liq bo'lishi shart.
• Maketlar. Figma'dagi (dizaynerlar maket chizadigan dastur) dizayn ko'pincha ikki enda (telefon va kompyuter) keladi. Mobile-first'da avval telefon maketini, keyin kompyuterni kodga o'girasiz.
• Intervyuda so'raladi: "Mobile-first nima va nega?", "min-width va max-width qaysi yondashuvga tegishli?". Bu darsdan keyin ikkalasiga javob bera olasiz.

Xulosa

• Mobile-first — asos telefon uchun, media query'siz; keng ekranlarga >= bilan faqat qo'shimcha.
• Desktop-first'da telefon kompyuter stilini oladi va uni bekor qiladi — kod ko'p, xato oson.
• min-width zanjiri kichikdan kattaga yoziladi: katta ekranda hamma qatlam ishlaydi, pastdagisi yutadi.
• Asosiy stil media query'ni tushunmaydigan muhitda ham ishlaydi — progressive enhancement.
• Telefonda kontentni yashirmang, joylashuvini o'zgartiring. HTML tartibi — telefondagi tartib.
• < — faqat telefon uchun "buzish" va o'rta oraliq kabi istisnolarda.

Keyingi dars: Fluid tipografiya — shrift va masofalarni breakpoint "sakrashi"siz, clamp() bilan silliq o'stiramiz va uning formulasini qo'lda chiqaramiz.

Manbalar

• Luke Wroblewski, "Mobile First" — A Book Apart, 2011
• MDN: "Responsive design", "Using media queries" — developer.mozilla.org
• web.dev: "Learn Design — Media queries", "Responsive web design basics" — web.dev