CSS reset va normalize: brauzer standart stillari bilan ishlash

Qisqacha: Har brauzerda ichki CSS bor — brauzer uslublari (user-agent stylesheet): body ga 8 piksel margin, h1 ga 32 piksel, tugmaga Arial 13 piksel. Reset — shu boshlang'ich qiymatlarni tekislaydigan kichik CSS bo'lagi, u faylning eng boshida turadi. Eski resetlar hamma narsani nolga tushirardi, normalize.css esa foydali qiymatlarni saqlab, faqat farqlarni tuzatardi. Zamonaviy reset — o'rtasi: box-sizing: border-box, rasmlarga display: block va max-width: 100%, forma elementlariga font: inherit va yana bir necha qator. Selektorlari :where() ichida yoziladi, shunda og'irligi nol bo'ladi.

Bu darsda

• Brauzer uslublari qayerdan kelishini va ularni DevTools'da qanday ko'rishni bilasiz.
• Uch yondashuvni solishtirasiz: "hammasini nolga" reset, normalize.css va zamonaviy reset.
• Josh Comeau, Andy Bell resetlari va Tailwind Preflight'ni o'qiy olasiz, har qatorining sababini tushuntirasiz.
• «Bahor» uchun o'z reset'ingizni yig'asiz — 05-qismda sochilib yotgan qatorlardan.
• Reset selektorlarini :where() bilan yozib, ular keyingi qoidalarga xalaqit bermasligini ta'minlaysiz.

Oldin bilishingiz kerak: box-sizing, Meros va global kalit so'zlar, Mantiqiy pseudo-klasslar: :where(), Specificity, Yangi paydo bo'layotgan CSS.

1. Nega bu kerak?

Oldingi darsda CSS'ning ertangi kunini ko'rdik. Bugun esa eng boshiga — CSS faylning birinchi qatorlariga qaytamiz.

«Bahor»ning bron formasini CSS'siz ochamiz:

<form action="https://example.com/bron">
  <p>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" value="Malika">
  </p>
  <p>
    <label for="izoh">Istak</label>
    <textarea id="izoh" name="izoh">Deraza yonida</textarea>
  </p>
  <button>Stolni band qilish</button>
</form>

Nimaga qarang: sahifa matni Times New Roman'da, tugma va maydon esa boshqa, mayda shriftda. Istak maydonida uchinchi shrift — "yozuv mashinkasi" ko'rinishidagi monospace. Biz bironta ham shrift bermadik. Bularning hammasini brauzer o'zi tanladi.

CSS nima darsida "har brauzerning ichki CSS'i bor, CSS reset darsida ularni tekislaymiz" degan edik. Bu va'da 05-qism davomida bo'lak-bo'lak bajarildi: box-sizing darsida uch qator, display darsida [hidden], Rasm va media darsida rasm qoidasi, Mobil tuzoqlar darsida text-size-adjust. Bugun ularni bitta joyga yig'amiz va tushunamiz: bu qatorlar nega aynan shu, boshqa loyihalarda nima yoziladi va nimani yozmaslik kerak.

Choyxonaga yangi oshpaz keldi, deylik. Oshxonadagi idishlar oldingi oshpaz qanday qo'ygan bo'lsa, shunday turibdi. Rustam aka ishni boshlashdan oldin hammasini o'ziga qulay qilib teradi. Reset — ana shu terib olish. U ovqat pishirmaydi, faqat ish joyini tayyorlaydi.

2. Brauzer uslublari

2.1 Ular qayerdan keladi

Brauzer uslublari (user-agent stylesheet) — brauzer har sahifaga o'zi qo'llaydigan CSS fayli. "User agent" — sizning nomingizdan internetga chiqadigan dastur, ya'ni brauzer. Bu faylni biz ko'rmaymiz, lekin u har sahifada, bizning CSS'imizdan oldin ishlaydi.

Qiymatlarning ko'pchiligini HTML standartining o'zi tavsiya qiladi — "Rendering" bo'limida h1 ning o'lchami, p ning margin'i yozilgan. Shuning uchun Chrome, Firefox va Safari bugun deyarli bir xil ko'rinadi. Yuqoridagi formani Chrome 154 da o'lchadik:

Bu jadvalning har qatorini 05-qismda uchratgansiz. body ning 8 pikseli — Viewport birliklari darsidagi oq chiziq. ul ning 40 pikseli — Box model darsida. img ning inline ekani — Rasm va media darsidagi rasm ostidagi sirli bo'shliq. Bugun ularga nom berdik: bularning hammasi — brauzer uslublari.

2.2 Brauzerlar orasidagi farq

2010-yillarda farqlar ancha katta edi. Bir brauzer h1 ga bir o'lcham, boshqasi boshqa o'lcham berardi, forma maydonlari umuman boshqacha chizilardi. Reset fayllari aynan shu davrda tug'ildi.

Bugun farqlar kichik, lekin bor. Kursda uchraganlari:

• iPhone'da matn "shishishi" — yotiq holatda shrift kattalashadi (Mobil tuzoqlar).
• Safari'da ro'yxat — list-style: none berilgan ro'yxatni ekran o'quvchi ro'yxat deb o'qimaydi (Ro'yxatlar stili).
• Forma elementlari — har tizimda o'z ko'rinishi: Windows'da bitta, macOS'da boshqa, telefonda uchinchi.

Brauzer uslublari ham o'zgaradi. Ilgari article yoki section ichidagi h1 kichikroq chizilardi. HTML standarti bu qoidani olib tashladi — Chrome 154 da tekshirdik: article ichidagi h1 ham, ikki section ichidagisi ham 32 piksel. Eski maqolalarda bu haqda o'qisangiz — endi u tarix.

2.3 DevTools'da ko'rish

Brauzer uslubini ko'rish uchun hech narsa o'rnatish shart emas. F12 → Elements → biror h1 ni tanlang → Styles paneli. Eng pastda kulrang yozuvli blok turadi: user agent stylesheet. Uning ichida display: block; font-size: 2em; margin-block-start: 0.67em; ... — brauzer bergan hamma narsa (DevTools'da CSS).

Siz yozgan qoida brauzer qoidasini bosib ketsa, brauzer qatori ustidan chiziladi. Kaskadda muallif CSS'i brauzer CSS'idan kuchli — Kaskad darsidagi manba bosqichi.

Tekshirib ko'ring: «Bahor»dagi bron tugmasi Arial shriftida, sahifa esa tizim shriftida. Siz CSS'da tugmaga shrift yozmadingiz, body ga esa font-family berdingiz. Nega tugma body shriftini meros qilib olmadi?

3. Uch falsafa

3.1 "Hammasini nolga": Meyer reset

Eng mashhur eski reset — Eric Meyer'ning "Reset CSS"i. Uning 2.0 versiyasi 2011-yilda chiqqan va bugun ham minglab eski saytlarda turibdi. G'oyasi — hamma narsani nolga tushirish:

/* Meyer reset'idan parcha (tarixiy) */
html, body, div, span, h1, h2, h3, p, ul, ol, li,
table, form, label {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

ol,
ul {
  list-style: none;
}

Natijada h1 oddiy matn o'lchamiga tushadi, ro'yxat belgisiz, paragraflar orasida bo'shliq yo'q. Brauzer nima bergani endi ahamiyatsiz — hamma narsani o'zingiz yozasiz.

Muammosi ham shunda: hamma narsani o'zingiz yozishingiz shart. Blog maqolasida yangi h3 paydo bo'lsa, u oddiy matndek ko'rinadi — unutilgan har teg "yalang'och" qoladi. Safari'da belgisiz ro'yxatlar ro'yxat sifatida o'qilmay qoladi (Ro'yxatlar stili).

3.2 "Faqat farqlarni tuzat": normalize.css

2012-yilda Nicolas Gallagher va Jonathan Neal boshqa yo'lni tanladi. Ular yaratgan normalize.css foydali qiymatlarni saqlaydi va faqat brauzerlar bir-biriga zid ishlagan joylarni tuzatadi. h1 katta qoladi, ro'yxatda belgi qoladi — lekin hamma brauzerda bir xil.

Uning eng foydali odati — izohlar. Har qator ustida "nega": qaysi brauzerdagi qaysi xato uchun. Mobil tuzoqlar darsidagi text-size-adjust qatorini aynan uning izohidan topgan edik:

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation
 *    changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

Tarjimasi: "1. Hamma brauzerda qator balandligini to'g'rilash. 2. iOS'da ekran burilgandan keyin shrift o'lchami o'zgarishining oldini olish."

modern-normalize (Sindre Sorhus) — shu g'oyaning faqat zamonaviy brauzerlar uchun qisqartirilgan varianti. Eski Internet Explorer uchun yozilgan qatorlar olib tashlangan, box-sizing: border-box qo'shilgan.

3.3 Zamonaviy reset: o'rtasi

Bugun ko'p dasturchi na to'liq nolga, na to'liq normalize'ga boradi. Ular o'z shaxsiy resetini yozadi: faqat har loyihada baribir qo'shadigan 10–15 qator. Eng ko'p iqtibos qilinadiganlari — ikkita.

Josh Comeau reseti (2021-yil, oxirgi yangilanishi 2026-yil iyun). Asosiy qatorlari:

*, *::before, *::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

To'liq variantida yana text-wrap, interpolate-size va React ilovalari uchun bitta qator bor. Qatorlarning ko'pchiligi sizga tanish — 05-qismda har birini alohida darsda o'rgangansiz.

Andy Bell reseti — "A (more) Modern CSS Reset" (2023-yil sentabr). U margin'ni butunlay emas, faqat pastkisini olib tashlaydi va ikkita qiziq qator qo'shadi:

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

Birinchisi — Safari muammosining aqlli yechimi. role="list" ni kim yozgan bo'lsa, u "bu ro'yxat belgisiz bo'lsin" degan niyatda yozgan. Belgini faqat shunday ro'yxatlardan olib tashlaydi. Ikkinchisi — class'siz havola (masalan, maqola matnidagi havola) atrofidagi matn rangini oladi.

3.4 Tailwind Preflight

Tailwind — tayyor kichik class'lar to'plami, uni Tailwind CSS 1 darsida o'rganamiz, hozir bilish shart emas. Uning o'z reseti bor — Preflight. Rasmiy hujjatga ko'ra, u modern-normalize ustiga qurilgan, lekin ancha qat'iyroq:

• hamma margin'lar nol;
• sarlavhalar oddiy matn o'lchami va qalinligida (font-size: inherit);
• ro'yxatlar belgisiz;
• border: 0 solid — border class'i qo'shilsa, darhol yaxlit chiziq chiqsin;
• rasmlar display: block, max-width: 100%, height: auto.

Ya'ni Preflight Meyer yo'liga yaqin: Tailwind'da har narsaning ko'rinishi baribir class bilan yoziladi. Tailwind uni base degan kaskad qatlamiga qo'yadi — bu nima ekanini keyingi ikki darsda tushunasiz.

Tekshirib ko'ring: Blog saytida mijoz o'zi maqola yozadi — ichida sarlavhalar, ro'yxatlar, jadvallar. Siz maqola ichidagi har tegga alohida qoida yozmoqchi emassiz. Meyer reset va normalize'dan qaysi biri qulayroq?

4. «Bahor» reseti

4.1 Kod

«Bahor» zamonaviy reset yo'lini tanlaydi: brauzerning foydali qiymatlari qoladi, faqat biz baribir tuzatadigan narsalar tuzatiladi. 05-qismdagi qatorlarni asosiy.css ning eng boshiga yig'amiz:

/* ===== Reset ===== */

/* O'lcham border'gacha hisoblansin (box-sizing darsi) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* iPhone yotiq holatda shriftni kattalashtirmasin
   (Mobil tuzoqlar darsi) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Oyna chetidagi 8 piksel (Viewport birliklari darsi) */
body {
  margin: 0;
}

/* Media ustundan chiqmasin (Rasm va media darsi) */
:where(img, picture, video, canvas, svg) {
  display: block;
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

/* Forma elementlari sayt shriftini olsin (Meros darsi) */
:where(input, button, textarea, select) {
  font: inherit;
}

/* Uzun so'z va havola ustunni yormasin (Matnni o'rash darsi) */
:where(p, h1, h2, h3, li, dd) {
  overflow-wrap: break-word;
}

/* role="list" — "belgisiz ro'yxat" niyati (Ro'yxatlar darsi) */
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding-inline-start: 0;
}

Har qatorning sababi izohda — normalize.css'dan o'rgangan odat. Bir yildan keyin kimdir (balki o'zingiz) "bu qator nega kerak?" deb so'raydi — javob shu yerda turibdi.

Ikki yangi narsa bor. Media reset'iga picture, canvas va svg ham qo'shildi — bular ham matn qatoriga "o'tirib qoladigan" elementlar. Rasm va videoga esa qo'shimcha height: auto berildi: ular width va height atributi bilan keladi (Rasm va media darsidagi nisbat saqlash).

[hidden] qatori esa :where() ga o'ralmadi va !important bilan qoldi. U ataylab kuchli: "hidden atributi bor element hech qachon ko'rinmasin" (display darsidagi asoslangan istisno).

4.2 Nega :where()

Mantiqiy pseudo-klasslar darsida "bunday qoidalarni CSS reset'da ko'p uchratasiz" degan edik. Mana sababi. Reset — eng umumiy, eng zaif qoidalar. Keyin yoziladigan har qanday qoida uni bemalol yengishi kerak.

Andy Bell'ning ro'yxat qatorini olamiz va «Bahor» footer'idagi ish vaqti ro'yxatiga o'zimiz chap bo'shliq beramiz. Reset ikki xil yozilgan — birinchisi :where() siz, ikkinchisi "yarim" :where() bilan:

<style>
  body { font-family: system-ui, sans-serif; }
  /* Reset, 1-variant */
  ul[role="list"] {
    list-style: none;
    padding-inline-start: 0;
  }
  /* Reset, 2-variant */
  :where(ol)[role="list"] {
    list-style: none;
    padding-inline-start: 0;
  }
  /* Keyinroq, footer uchun */
  footer :is(ul, ol) {
    padding-inline-start: 1.5rem;
    border-inline-start: 3px solid #2f6b3a;
  }
</style>
<footer>
  <ul role="list">
    <li>Dushanba–shanba: 7:00–23:00</li>
  </ul>
  <ol role="list">
    <li>Yakshanba: 8:00–22:00</li>
  </ol>
</footer>

Nimaga qarang: ikkala ro'yxatda ham yashil chiziq bor, lekin matn unga yopishib turibdi — biz bergan 1.5rem ishlamadi. Sabab — og'irlik (Specificity):

• ul[role="list"] — (0,1,1). footer :is(ul, ol) — (0,0,2). Reset kichkina bo'lsa ham, atribut selektori tufayli kuchliroq.
• :where(ol)[role="list"] — (0,1,0). :where() faqat qavs ichidagini nolga tushiradi. [role="list"] qavsdan tashqarida qoldi va o'z og'irligini olib keldi. Bu — eng ko'p uchraydigan tuzoq: ":where yozdim-ku" deysiz, lekin og'irlik baribir bor.

To'g'ri reset — butun selektor qavs ichida:

<style>
  body { font-family: system-ui, sans-serif; }
  /* Reset: butun selektor :where() ichida — (0,0,0) */
  :where(ul[role="list"], ol[role="list"]) {
    list-style: none;
    padding-inline-start: 0;
  }
  footer :is(ul, ol) {
    padding-inline-start: 1.5rem;
    border-inline-start: 3px solid #2f6b3a;
  }
</style>
<footer>
  <ul role="list">
    <li>Dushanba–shanba: 7:00–23:00</li>
  </ul>
  <ol role="list">
    <li>Yakshanba: 8:00–22:00</li>
  </ol>
</footer>

Nimaga qarang: endi ikkala matn ham chiziqdan 1.5rem uzoqda, belgilar esa yo'q — reset o'z ishini qildi, footer qoidasi ham ishladi. Chrome'da o'lchadik: padding-inline-start — 24 piksel.

Qoida: reset'dagi har selektor to'liq :where(...) ichida bo'lsin. Istisno — * (uning og'irligi o'zi nol) va [hidden] (u ataylab kuchli).

Tekshirib ko'ring: :where(p, li) a selektorining og'irligi qancha? U footer a (0,0,2) ni yengadimi?

4.3 Nimani ataylab qo'shmadik

Reset'ga qator qo'shish oson, olib tashlash qiyin — kimdir unga tayanib qolgan bo'ladi. Shuning uchun «Bahor» bir necha mashhur qatorni olmadi:

• * { margin: 0 } (Josh Comeau'da *:not(dialog)). «Bahor» sahifalari — asosan matn: menyu, ish vaqti, bron qoidalari. Brauzerning 1em lik paragraf oralig'i bizga yoqadi. Hamma margin'ni olib tashlasak, har matn blokiga qaytadan yozishga to'g'ri keladi.
• -webkit-font-smoothing: antialiased. MDN'ga ko'ra bu xususiyat standart emas va faqat macOS'da ishlaydi. Windows va Android'dagi o'quvchilarimizga hech narsa bermaydi.
• interpolate-size: allow-keywords. height: auto gacha animatsiya qilish uchun — Kirish va chiqish animatsiyalari darsida ko'rgansiz. Baseline ma'lumotiga ko'ra u hozircha faqat Chrome va Edge'da bor (Baseline emas). Kerak bo'lsa — reset'da emas, o'sha komponent yonida.
• line-height: 1.5 va text-wrap — bular «Bahor» tipografiyasining qarori (Qator balandligi, Matnni o'rash). Reset brauzer farqini tekislaydi, dizayn qarorlari esa asosiy stillarda turadi. Keyingi darsda ular alohida faylga ko'chadi.
• text-size-adjust: none (Andy Bell'da). Ikkalasi ham shishishni o'chiradi. «Bahor» Mobil tuzoqlar darsidagi 100% da qoladi: normalize.css ham shu qiymatni ishlatadi.

Maslahat: Birovning reset'ini ko'r-ko'rona nusxalamang. Har qatorga "bu bizning saytda nimani tuzatadi?" deb so'rang. Javob topilmasa — qator kerak emas.

4.4 Oldin va keyin

Darsning boshidagi forma — bu safar «Bahor» reset'i va body shrifti bilan:

<style>
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    padding: 1rem;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
  }
  :where(input, button, textarea, select) {
    font: inherit;
  }
  label {
    display: block;
  }
  input,
  textarea {
    width: 100%;
    padding: 0.5em;
  }
</style>
<form action="https://example.com/bron">
  <p>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" value="Malika">
  </p>
  <p>
    <label for="izoh">Istak</label>
    <textarea id="izoh" name="izoh">Deraza yonida</textarea>
  </p>
  <button>Stolni band qilish</button>
</form>

Nimaga qarang: butun formada bitta shrift — tizim shrifti, bitta o'lchamda. Istak maydonidagi monospace yo'qoldi. Ikkala maydon width: 100% bilan ham chetdan chiqmaydi: box-sizing padding'ni ichkariga oldi (box-sizing). label va width qoidalari reset emas — bu forma dizayni, u komponentlar bo'limiga tegishli.

5. Reset qayerda yashaydi

Reset — faylning eng boshida. Ikki sabab:

1. Kaskad. Og'irliklar teng bo'lsa, keyingi qoida yutadi (Kaskad). Reset birinchi bo'lsa, keyingi har qoida uni yengadi.
2. O'qish. Faylni ochgan odam birinchi bo'lib "bu loyihada qanday asos bor" degan savolga javob oladi.

«Bahor»ning asosiy.css i hozir shunday boshlanadi: palitra (:root), @font-face, keyin reset. CSS metodologiyalari darsida bu fayl bo'laklarga bo'linadi va reset o'zining reset.css fayliga ko'chadi. Kaskadni boshqarish darsida esa u reset degan kaskad qatlamiga kiradi. Shunda "reset doim eng kuchsiz" degan qoida fayl tartibiga ham, og'irlikka ham bog'liq bo'lmay qoladi.

flowchart LR
  A["Brauzer uslublari"] --> B["Reset"]
  B --> C["Asosiy stillar<br/>body, sarlavha, havola"]
  C --> D["Layout va komponentlar"]

Nimaga qarang: har qadam oldingisining ustiga quriladi. Reset brauzer bergan "xom" holatni bir xil boshlang'ich nuqtaga keltiradi, qolgan hamma narsa undan boshlanadi.

Tekshirib ko'ring: Stajyor reset'ni asosiy.css ning oxiriga ko'chirdi. Reset'dagi selektorlar :where() ichida. Sahifa ko'rinishi o'zgaradimi?

6. Ko'p uchraydigan xatolar

6.1 * { margin: 0; padding: 0; }

Eski darsliklardagi "eng qisqa reset". Ro'yxatlar chap bo'shlig'ini yo'qotadi — belgi sahifa chetidan tashqariga chiqib ketadi. Paragraf va sarlavhalar bir-biriga yopishadi. Tuzatish: faqat kerakli teglarga, aniq xususiyat bilan: body { margin: 0; }, belgisiz ro'yxat uchun — role="list" va reset'dagi qoida.

6.2 * { font-family: inherit; }

Meros darsida ko'rgan edik: code va pre ham oddiy shriftga o'tadi, kod o'qilishi qiyinlashadi. Tuzatish: meros faqat forma elementlariga — :where(input, button, textarea, select) { font: inherit; }.

6.3 Fokus halqasini reset'da o'chirish

Eski resetlarda :focus { outline: 0; } qatorini uchratasiz — "keyin o'zingiz bezaysiz" degan niyatda. Ko'pincha "keyin" kelmaydi va klaviatura bilan yuradigan Bobur qayerda turganini ko'rmay qoladi (Chegara, outline va soyalar). Tuzatish: reset'da fokusga tegmang. Halqa ko'rinishini asosiy stillarda :focus-visible bilan bering.

6.4 Ikki reset ustma-ust

Loyihada normalize.css ulangan, ustiga freymvork (masalan, Bootstrap — CSS freymvorklar darsida) o'z reset'i bilan, ustiga o'z reset'ingiz. Bir xususiyat uch joyda uch xil yozilgan — qaysi biri ishlayotganini DevTools'siz topib bo'lmaydi. Tuzatish: loyihada bitta reset. Freymvork o'z reset'ini olib kelsa — o'zingiznikidan faqat yetishmagan qatorlarni qoldiring.

6.5 :where() ning yarmi

:where(ul, ol)[role="list"] — og'irligi (0,1,0), nol emas. Yuqoridagi natijada ko'rdik. Tuzatish: butun selektorni ichiga oling.

7. Mashqlar

1-mashq (oson): brauzer bergan qiymatlar

«Bahor» bron sahifasini CSS'siz oching (link ni vaqtincha izohga oling). DevTools'da quyidagilarni toping va yozib qo'ying: button ning shrift oilasi va o'lchami, textarea ning shrift oilasi, body ning margin'i. Keyin link ni qaytaring va xuddi shu uch qiymat reset'dan keyin qanday bo'lganini yozing.

Ishora: Elements → Styles eng pastidagi user agent stylesheet bloki; aniq son uchun — Computed tabi (DevTools'da CSS).

2-mashq (o'rta): "eng qisqa reset"ni tuzating

Stajyor «Bahor»ning ish vaqti sahifasiga reset o'rniga shuni yozdi:

* {
  margin: 0;
  padding: 0;
}

Sahifada sarlavha, ikki paragraf va belgili ro'yxat (ul, role siz) bor.

1. Nima o'zgaradi? Kamida uchta narsani ayting.
2. Shu qoidani «Bahor» reset'idagi qator bilan almashtiring — ro'yxat belgilari va paragraf oralig'i saqlansin, faqat oyna chetidagi oq chiziq yo'qolsin.

Ishora: "Brauzer uslublari" bo'limidagi jadvalning body, p, ul qatorlari.

body {
  margin: 0;
}

3-mashq (qiyin): begona reset qatori

Jamoadoshingiz Andy Bell reset'idan bitta qatorni «Bahor»ga qo'shmoqchi:

a:not([class]) {
  color: currentColor;
}

«Bahor» footer'ida esa allaqachon shunday qoida bor:

footer a {
  color: #2f6b3a;
}

1. Footer'dagi class siz havola qaysi rangda bo'ladi va nega?
2. Qatorni reset'ga qanday yozsa, footer qoidasi ishlaydi?
3. «Bahor»ga bu qator umuman kerakmi?

Ishora: :not() o'z argumentining og'irligini oladi (Mantiqiy pseudo-klasslar).

:where(a:not([class])) {
  color: currentColor;
}

4-mashq: Portfolio qadami — reset bo'limini tartibga keltirish

Portfolio asosiy.css ida Yakuniy loyiha darsidan "1. Reset" bo'limi bor. Lekin reset'ga tegishli ikki qator boshqa bo'limlarda qolib ketgan. Bugun bo'limni zamonaviy reset'ga aylantiramiz:

1. "3. Umumiy" dagi html ning text-size-adjust qatorlarini va "4. Layout" dagi body { margin: 0 } ni reset'ga ko'chiring.
2. Reset'dagi teg selektorlarini to'liq :where() ga o'rang (* va [hidden] dan tashqari).
3. Media reset'iga picture va svg, forma reset'iga select qo'shing.
4. Belgisiz ro'yxat qoidasini reset'ga qo'shing va .loyihalar ul dan takrorlangan qatorlarni olib tashlang.
5. Har sahifani 360 va 1280 pikselda oching: hech narsa o'zgarmasligi kerak. Reset'ni tartibga keltirish — ko'rinishni o'zgartirish emas.

Ishora: loyiha kartalaridagi ul larda Yakuniy loyiha darsidan beri role="list" bor. 06-qismning oldingi darslarida reset'ga yana narsa qo'shgan bo'lsangiz — ularni ham shu tartibda tekshiring.

/* ===== 1. Reset ===== */

/* O'lcham border'gacha hisoblansin (box-sizing darsi) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* iPhone shriftni kattalashtirmasin (Mobil tuzoqlar darsi) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* Media ustundan chiqmasin (Rasm va media darsi) */
:where(img, picture, video, svg) {
  display: block;
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

/* Forma elementlari sayt shriftini olsin (Meros darsi) */
:where(button, input, textarea, select) {
  font: inherit;
}

:where(figure) {
  margin: 0;
}

/* Izoh raqami qatorni kengaytirmasin (Qator balandligi darsi) */
:where(sup) {
  line-height: 0;
}

/* role="list" — belgisiz ro'yxat (Ro'yxatlar stili darsi) */
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding-inline-start: 0;
}

.loyihalar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

8. Real ishda

• Har yangi loyiha reset bilan boshlanadi. Ko'p jamoalarda u alohida faylda turadi va loyihadan loyihaga ko'chadi — xuddi «Bahor» reseti keyingi darsda reset.css ga ko'chgani kabi.
• Freymvorklar o'z reset'i bilan keladi: Tailwind — Preflight, Bootstrap — Reboot. Freymvorkli loyihada "nega mening h2 im oddiy matnga o'xshaydi?" degan savolning javobi — ko'pincha shu.
• Kutubxonalar ham :where() ni sevadi. Tayyor komponent kutubxonalari boshlang'ich stillarini nol og'irlikda yozadi — siz ularni bitta class bilan o'zgartira olasiz.
• Intervyuda so'raladi: "CSS reset va normalize.css farqi nima?", "Reset'ingizda nima bor va nega?", "box-sizing ni nega *::before ga ham yozasiz?" Endi uchalasiga o'z reset'ingiz bilan javob berasiz.

Xulosa

• Brauzer uslublari — har sahifaga brauzer beradigan boshlang'ich CSS; DevTools'da user agent stylesheet bloki.
• Meyer reset hammasini nolga tushiradi, normalize.css foydalisini saqlab farqni tuzatadi, zamonaviy reset — o'rtasi.
• «Bahor» reseti 05-qismdagi qatorlardan yig'ildi: box-sizing, [hidden], text-size-adjust, body margin, media, font: inherit, overflow-wrap, belgisiz ro'yxat.
• Reset selektorlari to'liq :where() ichida — og'irligi nol, keyingi har qoida uni yengadi.
• Reset'ga faqat saytingizda aniq nimanidir tuzatadigan qator kiradi; dizayn qarorlari — asosiy stillarda.

Keyingi dars: CSS metodologiyalari: BEM, ITCSS, CUBE va fayl tuzilishi — katta CSS'ni nomlash qoidalari va fayllarga bo'lishni o'rganamiz; «Bahor»ning asosiy.css i birinchi marta bir necha faylga ajraladi.

Manbalar

• HTML Living Standard: "Rendering" bo'limi (brauzer uslublari tavsiyasi) — html.spec.whatwg.org
• normalize.css — github.com/necolas/normalize.css; modern-normalize — github.com/sindresorhus/modern-normalize
• Josh W. Comeau: "A Modern CSS Reset" — joshwcomeau.com/css/custom-css-reset
• Andy Bell: "A (more) Modern CSS Reset" — piccalil.li/blog/a-more-modern-css-reset
• Tailwind CSS: "Preflight" — tailwindcss.com/docs/preflight
• MDN: ":where()", "text-size-adjust", "font-smooth" — developer.mozilla.org