DevTools'da CSS bilan ishlash: Styles, Computed, :hov va Changes

Qisqacha: Chrome DevTools'ning Elements → Styles yorlig'i elementga tushgan hamma qoidalarni kaskad tartibida ko'rsatadi. Ustidan chizilgan deklaratsiya — kaskadda yutqazgan, sariq ogohlantirish bilan chizilgani — xato yozilgan, xira va ⓘ belgilisi — to'g'ri, lekin ta'sirsiz (inactive). Computed yorlig'i yakuniy qiymatni va uni qaysi qoida berganini ko'rsatadi. :hov holatlarni majburlaydi, .cls class'larni yoqib-o'chiradi, Changes paneli esa DevTools'dagi tajribangizni faylga ko'chirishga yordam beradi.

Bu darsda

• "Nega CSS'im ishlamayapti?" savoliga DevTools bilan to'rt qadamda javob topasiz.
• Styles'dagi belgilarni — chizilgan, ogohlantirishli, xira va ⓘ li — farqlaysiz.
• Qiymatlarni jonli o'zgartirasiz, holatlarni majburlaysiz va class'larni yoqib-o'chirasiz.
• Computed va rang tanlagich bilan yakuniy qiymat, haqiqiy shrift va kontrastni tekshirasiz.
• Changes panelidan o'zgarishlarni faylga ko'chirasiz va Firefox Inspector qachon qulayligini bilasiz.

Oldin bilishingiz kerak: Chrome DevTools I, Kaskad, Specificity, Meros.

1. Nega bu kerak?

Avtoservisga borsangiz, usta mashinani "ko'z bilan" taxmin qilmaydi. U diagnostika kompyuterini ulaydi va xato kodini o'qiydi. CSS'da ham shunday. "Qoida ishlamayapti" deb faylni qayta-qayta o'zgartirish — taxmin. DevTools esa sababni aniq ko'rsatadi.

Chrome DevTools I darsida Styles, Computed va box model bilan tanishgan edingiz. O'shanda "qaysi qoida nega yutishini CSS qismida o'rganamiz" degan edik. Endi kaskad, og'irlik va merosni bilasiz — DevTools'dagi har belgining ma'nosini tushunasiz.

Qoida ishlamasa, sabab deyarli doim to'rttadan biri:

flowchart TD
  A["Qoida ishlamadi"] --> B{"Styles'da<br/>qoida bormi?"}
  B -->|"yo'q"| C["Selektor mos emas<br/>yoki fayl ulanmagan"]
  B -->|"ha"| D{"Qanday<br/>ko'rinadi?"}
  D -->|"chizilgan"| E["Kaskadda yutqazgan"]
  D -->|"chizilgan +<br/>ogohlantirish"| F["Xato yozilgan"]
  D -->|"xira + ⓘ"| G["To'g'ri, lekin<br/>ta'sirsiz"]
  D -->|"oddiy"| H["Ishlayapti — boshqa<br/>elementni tekshiring"]

Nimaga qarang: birinchi savol — qoida umuman Styles'da bormi. Bor bo'lsa, uning ko'rinishi sababni aytadi.

Hamma nom va belgilarni Chrome 154 da tekshirdik. DevTools tez-tez yangilanadi — boshqa versiyada ba'zi nomlar biroz farq qilishi mumkin.

2. Styles: belgilarni o'qish

2.1 Qoida umuman yo'q

Elementni tanladingiz, lekin Styles'da qoidangiz ko'rinmayapti. Demak, brauzer uni bu elementga tegishli deb hisoblamagan:

• Selektor mos emas. .Narx va class="narx" — katta harf farqi (Asosiy selektorlar). Selektorni Elements'da Ctrl + F bilan sinang: "0 of 0" chiqsa — selektor hech narsani topmaydi.
• Fayl ulanmagan. Network panelida asosiy.css qatori qizil 404 bo'lsa, yo'l noto'g'ri (CSS nima).
• Fayl eskisi. Brauzer keshdagi eski faylni ko'rsatyapti. Ctrl + Shift + R — keshsiz qayta yuklash.

Yana bir foydali belgi: vergul bilan guruhlangan qoidada (h1, .narx, .aksiya) elementga mos bo'lgan selektor oddiy matnda, mos bo'lmaganlari xira matnda yoziladi. Qaysi bo'lak ishlaganini darhol ko'rasiz.

2.2 To'rt xil ko'rinish

Namuna — «Bahor» menyusidagi narx. asosiy.css da unga shunday qoida yozilgan ( — ataylab xato):

.narx {
  color: #b4461a;
  width: 120px;
  colr: red;
  font-size: 28;
}

Narxni tanlasangiz, Styles'da shunday manzara chiqadi:

Endi har birini batafsil ko'ramiz.

2.3 Ogohlantirish belgisi — xato yozilgan

CSS nima darsida "xato deklaratsiya DevTools'da ustidan chizilgan holda ko'rinadi" degan edik. Mana u. Chrome ikki holatni farqlaydi:

• colr: red — butun deklaratsiya chizilgan. Ogohlantirish belgisi ustiga sichqonchani olib borsangiz: "Unknown property name" — "noma'lum xususiyat nomi".
• font-size: 28 — nomi oddiy, faqat qiymati chizilgan. Belgida: "Invalid property value" — "noto'g'ri qiymat". Xususiyat to'g'ri, qiymatda birlik yo'q.

Bu farq yordam beradi: nima tuzatilishini — nomnimi yoki qiymatnimi — darhol bilasiz.

2.4 Chizilgan, belgisiz — kaskadda yutqazgan

Bu deklaratsiya to'g'ri yozilgan, lekin bir xil xususiyat uchun boshqa qoida yutdi. G'olib doim tepada turadi — Styles qoidalarni kaskad tartibida ko'rsatadi — buni Kaskad darsidagi DevTools bo'limida ko'rgan edik.

Nega yutgani noaniq bo'lsa, ikkala selektor ustiga sichqonchani olib boring. Chiqqan oynachada "Specificity: (0,1,1)" kabi og'irlik yoziladi (Specificity). Qoida yonidagi asosiy.css:12 havolasini bossangiz, fayl Sources panelida aynan o'sha qatorda ochiladi.

2.5 Xira va ⓘ — to'g'ri, lekin ta'sirsiz

Bu eng qiziq holat. Deklaratsiya xatosiz, hech kimga yutqazmagan, lekin baribir hech narsa qilmaydi. Chrome buni ta'sirsiz CSS (inactive CSS) deb belgilaydi: matn xira, yonida ⓘ belgisi.

width: 120px shunday. ⓘ ustiga sichqonchani olib bordik, Chrome shunday yozdi:

The display: inline property prevents width from having an effect.
Try setting display to something other than inline.

Tarjimasi: display: inline xususiyati width ning ta'sir qilishiga to'sqinlik qiladi, display ga inline dan boshqa qiymat berib ko'ring.

Bizdagi span — satr ichidagi element, unga kenglik berib bo'lmaydi. Meros darsidagi display: initial misolini eslang — o'shanda ham div satr ichiga tushgan edi. Satr ichidagi elementlarning o'lchami qanday ishlashini display va O'lchamlar darslarida o'rganamiz.

Bunday maslahatlar ko'p holatda chiqadi. Masalan, flex yoki grid'ga tegishli xususiyatni oddiy blokka yozsangiz, Chrome "display: grid yoki display: flex qo'shib ko'ring" deb maslahat beradi. Flex va grid — elementlarni qator yoki to'r shaklida joylashtirish usullari. Ularni shu qismda keyinroq o'rganamiz, hozir bilish shart emas.

2.6 "Inherited from" ichidagi xira matn

Styles pastida "Inherited from body" kabi bo'limlar bor — otalardan kelgan qoidalar. Ularning ichida meros bo'ladigan xususiyatlar oddiy matnda, meros bo'lmaydiganlari xira matnda yoziladi. Masalan, body dagi font-family oddiy, background-color esa xira. Bu xato emas — DevTools shunchaki "bu sizga yetib kelmaydi" deb eslatyapti (Meros).

Bu yerda ⓘ belgisi yo'q. Yuqoridagi ta'sirsiz CSS'dan farqi shu.

Tekshirib ko'ring: Styles'da color: #2f6b3a; ustidan chizilgan, yonida hech qanday belgi yo'q. Bu nimani bildiradi va g'olibni qayerdan qidirasiz?

3. Jonli tahrir

3.1 Qiymat va deklaratsiyalar

Chrome DevTools I darsida qiymat ustiga bosib o'zgartirishni ko'rgan edik. Bir necha tezlashtiruvchi:

• Strelkalar. Son qiymat tanlanganda ↑ va ↓ uni 1 ga, Shift bilan 10 ga, Alt bilan 0.1 ga o'zgartiradi (macOS'da Option). Chrome'da tekshirdik: 4px → ↑ → 5px → Shift + ↑ → 15px. Masofani ko'z bilan tanlashning eng tez yo'li.
• Yangi deklaratsiya. Qoidaning jingalak qavslari orasidagi bo'sh joyga bosing — yangi qator ochiladi. Yozayotganda DevTools xususiyat va qiymatlarni taklif qiladi.
• Yoqish-o'chirish. Deklaratsiya yonidagi katakchani olib tashlasangiz, u vaqtincha o'chadi. "Bu qator kerakmi?" degan savolga eng tez javob.
• Nusxalash. Deklaratsiya ustida o'ng tugma: "Copy declaration" (bitta qator), "Copy rule" (butun qoida), "Copy all declarations" (qoida ichidagi hamma qator).
• Box model. Chizmadagi margin yoki padding soniga ikki marta bossangiz, uni o'sha yerda o'zgartirasiz.

Diqqat: element.style bo'limi — elementning style atributi. U yerga yozilgan tajribani faylga ko'chirsangiz, inline stil hosil bo'ladi — Kaskad darsidagi "yopishqoq" style atributi. Tajribani mavjud qoida ichida yoki yangi qoidada qiling.

3.2 Styles asboblar paneli

Styles'ning tepasida bir qator tugmalar bor. Ularning nomi sichqoncha ustiga kelganda chiqadi:

.cls ni bossangiz, "Add new class" maydoni va elementdagi har class uchun katakcha chiqadi. Masalan, taom-karta ga HTML'ni o'zgartirmasdan mashhur class'ini qo'shib, mashhur karta qanday ko'rinishini sinaysiz. Katakchani olib tashlasangiz — class vaqtincha o'chadi.

+ tugmasi selektorni o'zi yozib beradi. Chrome'da narx uchun span.narx chiqdi — uni kerakli selektorga o'zgartiring. Bu qoida sizning faylingizga emas, inspector-stylesheet degan vaqtinchalik varaqqa tushadi. Sichqonchani tugmada bosib ushlab tursangiz, qoidani qaysi faylga qo'shishni tanlash mumkin.

4. :hov — holatlarni majburlash

:hover uslubini tekshirmoqchisiz. Lekin sichqonchani DevTools'ga olib borishingiz bilan element "hover" holatidan chiqadi. :hov tugmasi shu muammoni hal qiladi. Uni bossangiz, katakchalar ro'yxati ochiladi:

[ ] Emulate a focused page
Force element state
[ ] :active          [ ] :hover
[ ] :focus           [ ] :focus-within
[ ] :focus-visible   [ ] :target
▸ Force specific element state

• :hover ni belgilang — element sichqoncha ustida turgandek bo'ladi va Styles'da a:hover qoidalari paydo bo'ladi.
• :focus-visible — klaviatura fokusini sinash uchun. Holat pseudo-klasslari darsida yozgan fokus uslubini Tab ni qayta-qayta bosmasdan ko'rasiz.
• "Emulate a focused page" — DevTools'ga bosganingizda ham sahifa fokusni yo'qotmasin. Fokus uslublarini tahrirlaganda qulay.
• "Force specific element state" — faqat shu elementga xos holatlar, masalan, forma maydonlari uchun.

Elements daraxtida holati majburlangan element yonida kichik rangli nuqta paydo bo'ladi. Ishingiz tugagach, katakchani olib tashlashni unutmang.

5. Computed: yakuniy javob

5.1 Qiymat va uning manbasi

Computed yorlig'i elementning yakuniy qiymatlarini ko'rsatadi (Meros darsidagi hisoblangan va ishlatilgan qiymatlar). Styles "kim nima dedi"ni ko'rsatsa, Computed "oxirida nima bo'ldi"ni ko'rsatadi.

Xususiyat yonidagi ▸ strelkani bossangiz, uning tarixi ochiladi. Narxning color i uchun Chrome'da shunday chiqdi:

▾ color               rgb(180, 70, 26)
    #b4461a  .narx    asosiy.css:12
    #1f2a24  body     asosiy.css:1

Birinchi qator — g'olib, ikkinchisi — yutqazgan (bu yerda meros bo'lib kelishi mumkin bo'lgan body rangi). Fayl havolasini bossangiz, o'sha qatorga o'tasiz. "Nega matnim bu rangda?" degan savolga bu eng tez javob.

Tepadagi ikki katakcha:

• Show all — hamma xususiyatlarni, jumladan hech kim yozmagan, boshlang'ich qiymatdagilarini ham ko'rsatadi.
• Group — xususiyatlarni turkumlarga ajratadi: matn, joylashuv, ko'rinish va boshqalar.

5.2 Rendered fonts — haqiqiy shrift

Computed'ning eng pastida Rendered fonts bo'limi bor. U brauzer aslida qaysi shriftda chizganini aytadi. Bu muhim, chunki font-family: system-ui, sans-serif — faqat ro'yxat. Qaysi shrift ishlatilgani qurilmaga bog'liq. Windows'dagi Chrome'da tekshirdik: system-ui uchun "Family name: Segoe UI". Telefonda boshqasi bo'ladi. Shrift steklarini (vergul bilan yozilgan zaxira shriftlar ro'yxatini) Shrift asoslari darsida o'rganamiz — bu bo'lim o'shanda ham kerak bo'ladi.

Tekshirib ko'ring: Styles'da narx uchun uchta color ko'rinyapti, ikkitasi chizilgan. Computed yorlig'ida esa color qatorida nechta qiymat yozilgan bo'ladi?

6. Rang tanlagich va kontrast

Styles'dagi har rang oldida kichik kvadrat bor. Ustiga sichqonchani olib borsangiz, Chrome yozadi: "Open color picker. Shift + Click to change color format." — "Rang tanlagichni ochish. Formatni o'zgartirish uchun Shift bilan bosing."

Rang tanlagichda:

• Pipetka (eyedropper) — sahifadagi istalgan nuqtaning rangini oladi. Dizayndagi rangni "o'g'irlash" uchun qulay.
• Formatlar — bir rangni hex, rgb(), hsl() va boshqa ko'rinishlarda ko'rasiz. Ularni Ranglar 1 darsida o'rganamiz.
• Kontrast (Contrast ratio) — matn rangi uchun uning fonga nisbatan kontrasti ko'rsatiladi. Accessibility darsidagi 4.5:1 talabini shu yerda tekshirasiz.
• Palitralar — sahifada ishlatilgan ranglar ro'yxati ham bor. Yangi rang tanlaganda saytdagi mavjud ranglardan birini olish oson.

7. Changes: tajribadan faylga

DevTools'dagi hamma o'zgarish sahifa yangilanguncha yashaydi (Chrome DevTools I). Yarim soat masofa tanladingiz — F5 bosildi — hammasi yo'qoldi. Buning oldini Changes paneli oladi: u DevTools'da qilgan o'zgarishlaringizni fayllar bo'yicha yig'ib boradi.

Ochish: Ctrl + Shift + P (macOS'da Cmd + Shift + P) — buyruqlar qatori. changes deb yozing va "Show Changes" ni tanlang. Panel pastda ochiladi. Yoki: DevTools'ning ⋮ menyusi (Customize and control DevTools) → More tools → Changes.

Chrome'da details ning padding ini strelka bilan 4px dan 15px ga o'zgartirdik. Changes'da shunday chiqdi:

*asosiy.css
  20  details[name="savollar"] {
  21 -  padding: 4px 12px;
  21 +  padding: 15px 12px;
  22  }

Nimaga qarang: qizil - — eski qator, yashil + — yangisi. Fayl nomi oldidagi * — "o'zgargan, lekin diskka saqlanmagan". O'ng tepadagi nusxalash tugmasi faylning o'zgargan matnini olib beradi.

Ish tartibi:

1. Live Server'da sahifani oching.
2. DevTools'da qiymatlarni yoqqunicha o'zgartiring.
3. Changes'da nima o'zgarganini ko'ring.
4. Kerakli qatorlarni VS Code'dagi asosiy.css ga ko'chiring va Ctrl + S bosing.
5. Live Server sahifani yangilaydi — DevTools'dagi o'zgarishlar yo'qoladi, lekin endi ular faylda.

DevTools'ni loyiha papkasiga ulab, o'zgarishni to'g'ridan-to'g'ri faylga saqlash ham mumkin (Workspaces). Boshida qo'lda ko'chirish xavfsizroq: nima o'zgarganini o'zingiz ko'rib turasiz.

Tekshirib ko'ring: DevTools'da menyu havolalariga yangi rang tanladingiz, keyin sahifani F5 bilan yangiladingiz. Tanlagan rangingiz qoldimi?

8. Flex va grid overlay'lar — birinchi tanishuv

Keyingi darslarda sahifani flex va grid bilan joylashtirasiz. DevTools ular uchun maxsus vositalar beradi. Bu bo'limni yodlash shart emas — hozir faqat qayerdaligini biling:

• Elements daraxtida display: flex li element yonida flex belgisi, grid element yonida grid belgisi chiqadi. Belgini bossangiz, sahifada joylashuv chiziqlari (overlay) chiziladi.
• Styles'da display: flex yonidagi kichik ikonka — "Open flexbox editor". U asosiy flex xususiyatlarini tugmalar bilan o'zgartiradi.
• Layout yorlig'ida sahifadagi hamma grid va flex konteynerlar ro'yxati bor. Grid uchun "Show line numbers", "Show track sizes", "Show area names" kabi sozlamalar ham shu yerda.

Ularni Flexbox'ga kirish va Grid'ga kirish darslarida ishlatasiz.

Styles panelidagi "Toggle common rendering emulations" tugmasi (mo'yqalam ikonkasi) sahifani qorong'i yoki yorug' rejimda ko'rsatadi — Foydalanuvchi afzalliklari darsida kerak bo'ladi.

9. Firefox Inspector: qachon foydali

Chrome — eng ko'p ishlatiladigan brauzer va bu kursda asosiy. Lekin Firefox boshqa dvigatelda (Gecko) ishlaydi (Brauzer tuzilishi va dvigatellar). Saytingizni unda ham ochib ko'rish — yaxshi odat. Uning Inspector'i ham kuchli, ba'zi ishlarda qulayroq:

• Kaskad filtri. Ustidan chizilgan deklaratsiya yonida voronka belgisi bor. Uni bossangiz, faqat shu xususiyatni bergan qoidalar qoladi — butun "kurash" bir ko'rishda.
• Moslik ogohlantirishlari. Ba'zi brauzerlarda ishlamaydigan xususiyat yonida belgi chiqadi, alohida Compatibility bo'limi ham bor (Baseline bilan bir g'oya).
• Fonts bo'limi. Sahifada ishlatilgan shriftlar va ularning sozlamalari.
• Ta'sirsiz CSS ham bor: kulrang deklaratsiya va ⓘ belgisi, Chrome'dagi kabi.
• Tayyor tugmalar. Rules bo'limi tepasida chop etish va yorug'/qorong'i rejimni sinash tugmalari.

Bitta farq: Firefox brauzer uslublarini standart holatda ko'rsatmaydi. Ularni ko'rish uchun DevTools sozlamalarida "Show Browser Styles" ni yoqing.

iPhone'dagi ko'rinishni tekshirish uchun esa WebKit dvigatelidagi Safari Web Inspector kerak bo'ladi.

10. Ko'p uchraydigan xatolar

10.1 F5 va yo'qolgan ish

DevTools'da hamma narsa tayyor edi, sahifa yangilandi — hammasi ketdi. Tuzatish: har yoqqan o'zgarishdan keyin Changes'ga qarang va faylga ko'chiring.

10.2 element.style dan inline stil

Tajriba element.style da qilindi va faylga style="..." bo'lib tushdi. Tuzatish: o'zgarishni mavjud qoidaga yozing yoki + bilan yangi qoida yarating.

10.3 Unutilgan :hov

"Nega havola doim hover rangida?" — :hover katakchasi belgilanganicha qolgan. Tuzatish: Elements'dagi rangli nuqtani qidiring va holatni o'chiring.

10.4 Brauzer qoidasini tahrirlash

"user agent stylesheet" qoidalari qiya harfda va tahrirlanmaydi. Tuzatish: o'z faylingizda xuddi shu xususiyatni yozing — u brauzer qoidasidan baribir yutadi.

10.5 Noto'g'ri element

Rang o'zgartirilyapti, lekin sahifada hech narsa o'zgarmayapti — tashqi o'ram tanlangan. Tuzatish: Ctrl + Shift + C bilan aynan kerakli matnni tanlang (Chrome DevTools I).

11. Mashqlar

1-mashq (oson): Belgini o'qing

Styles'da to'rt xil holatni ko'rdingiz. Har biri nimani bildiradi?

1. font-size: 18 px; — chizilgan, sariq ogohlantirish, "Invalid property value".
2. color: #2f6b3a; — chizilgan, belgisiz; tepada boshqa qoidada color: #b4461a; oddiy matnda.
3. width: 200px; — xira, ⓘ belgisi bilan; element — a.
4. "Inherited from main" ichida padding: 16px; — xira, belgisiz.

2-mashq (o'rta): Hover rangini DevTools'da tanlang

«Bahor» menyusining havolalariga sichqoncha ustiga kelgandagi rangni tanlaymiz — faylga bir marta ham tegmasdan.

1. Live Server'da menyu sahifasini oching va menyudagi havolani tanlang.
2. :hov → :hover ni belgilang.
3. + tugmasi bilan yangi qoida yarating va selektorini nav a:hover qiling.
4. color qo'shing va rang tanlagichda to'q yashil rang tanlang. Kontrast qatori 4.5 dan yuqori bo'lsin.
5. Changes'dan qoidani asosiy.css ga ko'chiring va :hover katakchasini o'chiring.

Ishora: «Bahor»ning to'q yashili #1a5d1a — fokus halqasining rangi (Klaviatura va fokus). :hover ni Holat pseudo-klasslari darsida o'rgangansiz.

nav a:hover {
  color: #1a5d1a;
}

<style>
  body {
    background-color: #fffaf0;
  }
  nav a {
    color: #2f6b3a;
  }
  nav a:hover {
    color: #1a5d1a;
  }
</style>
<nav aria-label="Asosiy menyu">
  <ul>
    <li><a href="menyu/">Menyu</a></li>
    <li><a href="bron/">Stol band qilish</a></li>
  </ul>
</nav>

3-mashq (qiyin): "Nega ishlamayapti?" tergovi

Stajyor menyu kartasi uchun CSS yozdi. Uning maqsadi: karta nomi yashil, narx qalin va qizg'ish, aksiya matni qizg'ish, narx 120 piksel kenglikda. Narxning rangidan boshqa hech biri ishlamadi. Natija blokini "Tahrirlab ko'rish" bilan oching yoki o'zingizning faylingizga ko'chiring. So'ng DevTools bilan har xatoning sababini toping: natija ustida o'ng tugma → Inspect.

<style>
  #asosiy p {
    color: #1f2a24;
  }
  .taom-karta h3 {
    colr: #2f6b3a;
  }
  .Narx {
    font-weight: bold;
  }
  .narx {
    color: #b4461a;
    width: 120px;
  }
  .aksiya {
    color: #b4461a;
  }
</style>
<main id="asosiy">
  <article class="taom-karta">
    <h3>Osh</h3>
    <p>Narxi: <span class="narx">35 000 so'm</span></p>
    <p class="aksiya">Bugun choy bepul!</p>
  </article>
</main>

Har xato uchun ayting: DevTools'da qanday ko'rinadi va qanday tuzatiladi?

Ishora: to'rtta xato — to'rt xil belgi. Dars boshidagi sxemadan boring. Bittasida qoida Styles'da umuman ko'rinmaydi.

<style>
  main p {
    color: #1f2a24;
  }
  .taom-karta h3 {
    color: #2f6b3a;
  }
  .narx {
    color: #b4461a;
    font-weight: bold;
  }
  .aksiya {
    color: #b4461a;
  }
</style>
<main id="asosiy">
  <article class="taom-karta">
    <h3>Osh</h3>
    <p>Narxi: <span class="narx">35 000 so'm</span></p>
    <p class="aksiya">Bugun choy bepul!</p>
  </article>
</main>

4-mashq: Portfolio qadami — DevTools auditi

Portfoliongizni Live Server'da oching va DevTools bilan tekshiring. Faylga faqat 5-bandda o'zgarish kiritiladi.

1. Har sahifada bir necha elementni tanlang. Styles'da sariq ogohlantirishli deklaratsiya bormi? Bo'lsa — tuzating.
2. Bosh sahifada body ichidagi paragrafni tanlang. Computed → Rendered fonts: kompyuteringizda system-ui qaysi shrift bo'lib chiqdi?
3. Aloqa sahifasida "Yuborish" tugmasini tanlang. Computed'da font-family — o'tgan darsdagi font: inherit ishlayaptimi? color ning tarixini oching: qiymat qayerdan kelgan?
4. Menyudagi havolani tanlang va :hov → :focus-visible ni belgilang. Fokus halqasi ko'rinadimi? Uni qaysi qoida chizyapti?
5. Aloqa sahifasida savol-javob blokini tanlang. padding ni strelkalar bilan o'zgartirib, sizga yoqqan qiymatni toping. Changes'dan faylga ko'chiring.
6. Rang tanlagichda footer matni rangining (#5b6660) kontrastini tekshiring.

details[name="savollar"] {
  border: 1px solid #c9d6cf;
  padding: 8px 16px;
}

12. Real ishda

• Har kunlik ish. Frontend dasturchi CSS'ning katta qismini avval DevTools'da "chizadi", keyin faylga ko'chiradi. Changes paneli shu ishni tartibli qiladi.
• Xato hisoboti. Jamoada "CSS ishlamayapti" o'rniga ".aksiya dagi color chizilgan, g'olib — #asosiy p" deb yoziladi. Bunday xabar muammoni daqiqalarda hal qiladi.
• CodePen va natija bloklari. Kichik g'oyani CodePen'da yoki darsdagi "Tahrirlab ko'rish" bilan sinaysiz. Ular ichida ham DevTools ishlaydi: natija ustida o'ng tugma → Inspect. Haqiqiy saytingizni esa Live Server va DevTools'da tekshirasiz.
• Brauzerlararo tekshiruv — Brauzer mosligi darsida tizimli o'rganamiz.
• Intervyuda so'raladi: "Element noto'g'ri ko'rinyapti — qanday tekshirasiz?" Kutilgan javob: Inspect → Styles'dagi belgilar → Computed'dagi manba → box model.

Xulosa

• Qoida ishlamasa: avval Styles'da bormi, keyin qanday ko'rinishini qarang.
• Chizilgan — yutqazgan; chizilgan va ogohlantirishli — xato yozilgan; xira va ⓘ — ta'sirsiz; "Inherited from" dagi xira — meros bo'lmaydigan xususiyat.
• Strelkalar, :hov, .cls va + — tez tajriba vositalari. element.style dagi tajribani faylga inline qilib ko'chirmang.
• Computed yakuniy qiymatni, uning manbasini va haqiqiy shriftni ko'rsatadi. Rang tanlagich kontrastni ko'rsatadi.
• Changes — DevTools'dagi tajribani yo'qotmaslik uchun: ko'ring, nusxalang, faylga yozing.
• Firefox Inspector — kaskad filtri va moslik ogohlantirishlari bilan foydali ikkinchi fikr.

Keyingi dars: O'lcham birliklari: px, %, em, rem, ch, lh — har birlik nimaga nisbatan hisoblanishini va shrift uchun nega rem tanlanishini o'rganamiz.

Manbalar

• Chrome DevTools: "CSS features reference", "Find invalid, overridden, inactive, and other CSS", "Changes", "Color Picker" — developer.chrome.com/docs/devtools
• Firefox DevTools: "Examine and edit CSS", "Page Inspector" — firefox-source-docs.mozilla.org/devtools-user
• MDN: "Tools and testing: Debugging CSS" — developer.mozilla.org