CSS media features: qorong'i rejim, kamroq harakat, kontrast, sensorli ekran va chop etish

Qisqacha: @media faqat ekran enini emas, foydalanuvchi va qurilmani ham so'ray oladi. Masalan, prefers-color-scheme: dark — tizimda qorong'i rejim yoqilgan. Xuddi shunday prefers-reduced-motion: reduce — harakat kamroq bo'lsin, prefers-contrast: more — kontrast kuchliroq bo'lsin. Windows ranglarni majburan almashtirsa — forced-colors: active. Sichqoncha yoki barmoqni hover: hover va pointer: coarse farqlaydi. Sahifani qog'ozga @media print va @page moslaydi. Hammasini Chrome DevTools'dagi Rendering panelida sinab ko'rasiz.

Bu darsda

• Foydalanuvchi sozlamalari CSS'ga qanday yetib kelishini tushuntirasiz.
• «Bahor»ning qorong'i rejimini tizimga ergashtirasiz va light-dark() yetmaydigan joylarni prefers-color-scheme bilan to'ldirasiz.
• Kamroq harakat, yuqori kontrast va majburiy ranglar rejimini hurmat qiladigan CSS yozasiz.
• Sichqoncha va barmoqni hover va pointer bilan farqlaysiz.
• «Bahor» menyusi uchun chop etish stilini yozasiz va hammasini DevTools'da sinaysiz.

Oldin bilishingiz kerak: Media queries, Ranglar 3: light-dark(), Holat pseudo-klasslari, Chegara, outline va soyalar, DevTools'da CSS.

1. Nega bu kerak?

Kechki soat o'n bir. Jasur aka choyxonani yopib, uyga ketyapti. Telefoni qorong'i rejimda — ko'zni qamashtirmasin deb. U «Bahor» saytini ochadi va... sahifa oppoq chiroqdek yonib ketadi.

Yana uch mehmon:

• Dilnoza opaning ko'zi zaif. U Windows'da kontrast mavzusini yoqqan: hamma oynalar qora fonda sariq va oq matn bilan.
• Sardorda bosh aylanishi bor. Sahifada nimadir sakrasa yoki sirg'alsa, uning boshi og'riydi. U telefonda "harakatni kamaytirish" sozlamasini yoqqan.
• Rustam aka menyuni qog'ozga chiqarib, oshxona devoriga ilmoqchi. Printerdan esa menyu havolalari, tugmalar va yarim qora sahifa chiqadi.

To'rttala holatda foydalanuvchi o'z xohishini allaqachon aytgan — telefon yoki kompyuter sozlamasida. CSS shu xohishni o'qiy oladi. Buning vositasi — media feature (media xususiyati): @media qavsi ichida so'raladigan savol. Media queries darsida width ni so'ragan edik. Endi boshqa savollar:

flowchart LR
  A["Tizim sozlamasi"] --> B["Brauzer"]
  B --> C["prefers-color-scheme"]
  B --> D["prefers-reduced-motion"]
  B --> E["forced-colors"]
  B --> F["hover, pointer"]
  C --> G["Sizning CSS"]
  D --> G
  E --> G
  F --> G

Nimaga qarang: foydalanuvchi sozlamani saytga emas, telefon yoki kompyuterga beradi. Brauzer uni media xususiyatlariga aylantiradi, sizning CSS esa shularni so'raydi. Foydalanuvchi hech qanday tugma bosmaydi — sayt o'zi moslashadi.

2. prefers-color-scheme: qorong'i rejim

2.1 Sintaksis

@media (prefers-color-scheme: dark) {
  /* tizimda qorong'i rejim yoqilgan */
}

Ikki qiymat: light va dark. Baseline ma'lumotiga ko'ra u 2020-yildan beri hamma asosiy brauzerda bor — Baseline, keng tarqalgan.

2.2 «Bahor» allaqachon tizimga ergashadi

Ranglar 3 darsida «Bahor» palitrasini light-dark() bilan yozgan edik va :root ga color-scheme: light dark qo'ygan edik. O'sha darsda natija oynasida faqat qorong'i footer'ni ko'rsatgandik. Endi butun sahifani tekshiramiz.

Chrome DevTools'da F12 → Styles panelidagi mo'yqalam belgisi ("Toggle common rendering emulations") → prefers-color-scheme: dark. DevTools'da CSS darsida shu tugmani "keyin kerak bo'ladi" degan edik. Chrome'da tekshirdik: «Bahor»ning butun sahifasi — fon, matn, havolalar, narxlar, tugma — qorong'i palitraga o'tdi. Bitta ham @media yozmadik. light-dark() ichkarida xuddi shu savolni so'raydi: "color-scheme ruxsat bergan bo'lsa, tizim qaysi rejimda?"

Demak Favicon va web manifest darsidagi va'da ("qorong'i rejim ranglarini ham o'zingiz berishingiz kerak bo'ladi") bajarildi: ranglarni biz berdik, ularni tanlashni esa tizim qiladi.

2.3 light-dark() yetmaydigan joylar

light-dark() faqat rang qaytaradi. Qorong'i rejimda boshqa narsalar ham o'zgarishi kerak bo'ladi:

• Suratlar. Yorqin surat qorong'i sahifada ko'zni qamashtiradi. Biroz xiralashtirish yaxshi: filter: brightness(0.85).
• Fon rasmi va naqshlar. Oq fon uchun chizilgan naqsh qorong'ida ko'rinmaydi — boshqa fayl kerak.
• Soyalar. Qorong'i fonda qora soya deyarli ko'rinmaydi. Ko'pincha soya o'rniga ingichka chegara qo'yiladi.

Bular @media (prefers-color-scheme: dark) ishi:

<style>
  :root {
    color-scheme: light dark;
    --rang-fon: light-dark(
      oklch(98.6% 0.014 84.6), oklch(28.2% 0.05 148.6));
    --rang-matn: light-dark(
      oklch(27.2% 0.019 161), oklch(98.6% 0.014 84.6));
    --rang-urgu: light-dark(
      oklch(53.7% 0.153 39.8), oklch(75% 0.13 39.8));
  }
  body {
    background-color: var(--rang-fon);
    color: var(--rang-matn);
    font-family: system-ui, sans-serif;
  }
  .taom-karta {
    max-width: 16rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
  }
  .taom-karta img {
    display: block;
    width: 100%;
    height: auto;
  }
  .narx {
    color: var(--rang-urgu);
    font-weight: bold;
  }
  @media (prefers-color-scheme: dark) {
    .taom-karta {
      box-shadow: none;
      border: 1px solid oklch(98.6% 0.014 84.6 / 30%);
    }
    .taom-karta img {
      filter: brightness(0.85);
    }
  }
</style>
<article class="taom-karta">
  <img alt="Bir tarelka Toshkent oshi" width="300" height="200"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    viewBox='0 0 300 200'><rect width='300' height='200'
    fill='%23fde2c4'/><circle cx='150' cy='100' r='70'
    fill='%232f6b3a'/></svg>">
  <h3>Osh</h3>
  <p><span class="narx">35 000 so'm</span></p>
</article>

Nimaga qarang: yorug' rejimda karta ostida yumshoq soya bor, surat yorqin. Telefon yoki kompyuteringizda qorong'i rejimni yoqib, sahifani qayta oching: fon to'q yashil, soya o'rnida och ingichka chegara, surat biroz xiraroq. Chrome'da tekshirdik: natija oynasi ham tizim rejimiga ergashadi.

2.4 Faqat @media bilan yozilgan qorong'i rejim

light-dark() 2024-yildan beri bor. Undan oldin palitra shunday almashtirilardi — buni eski loyihalarda ko'p uchratasiz:

:root {
  color-scheme: light dark;
  --rang-fon: oklch(98.6% 0.014 84.6);
  --rang-matn: oklch(27.2% 0.019 161);
}

@media (prefers-color-scheme: dark) {
  :root {
    --rang-fon: oklch(28.2% 0.05 148.6);
    --rang-matn: oklch(98.6% 0.014 84.6);
  }
}

«Bahor»da ikkalasi birga: ranglar — light-dark(), rangdan boshqa narsa — @media. Ranglar 3 darsidagi @supports zaxirasi o'rniga eski brauzer uchun yuqoridagi @media blokini ham yozish mumkin — ikkalasi ham to'g'ri. To'liq qorong'i rejim — foydalanuvchi o'zi tanlaydigan tugma va tanlovni eslab qolish — Qorong'i rejim va temalash darsida.

Tekshirib ko'ring: «Bahor»da light-dark() palitrasi bor, lekin color-scheme yozilmagan va meta teg ham yo'q. Tizim qorong'i rejimda. @media (prefers-color-scheme: dark) ichidagi qoidalar ishlaydimi? light-dark() qaysi rangni beradi?

3. prefers-reduced-motion: kamroq harakat

3.1 Nega muhim

Ba'zi odamlarda ekrandagi harakat — sirg'alish, kattalashish, aylanish — bosh aylanishi, ko'ngil aynishi yoki migren qo'zg'atadi. Ular tizimda "harakatni kamaytirish" sozlamasini yoqadi (iPhone'da — Accessibility → Motion, Windows'da — "Animation effects" o'chirilgan). CSS buni shunday so'raydi:

@media (prefers-reduced-motion: reduce) {
  /* harakatni kamaytiring */
}

Qiymatlar: reduce va no-preference. Baseline ma'lumotiga ko'ra 2020-yildan Baseline, keng tarqalgan. WCAG'da bu mezon — 2.3.3 "Animation from Interactions" (AAA daraja): foydalanuvchi harakati sabab paydo bo'ladigan animatsiyani o'chirish imkoni bo'lsin.

3.2 Tamoyil: harakat — faqat ruxsat bo'lsa

Animatsiyalarni 06-qismda o'rganamiz (Transition, Harakat etikasi). Hozir faqat tamoyil va bitta kichik misol. Karta ustiga sichqoncha kelganda u biroz yuqoriga "ko'tariladi":

<style>
  body {
    font-family: system-ui, sans-serif;
  }
  .taom-karta {
    max-width: 16rem;
    padding: 0.5rem 1rem;
    border: 2px solid #2f6b3a;
  }
  .taom-karta:hover {
    border-color: #b4461a;
  }
  @media (prefers-reduced-motion: no-preference) {
    .taom-karta {
      transition: transform 0.2s;
    }
    .taom-karta:hover {
      transform: translateY(-4px);
    }
  }
</style>
<article class="taom-karta">
  <h3>Manti</h3>
  <p>30 000 so'm</p>
</article>

Nimaga qarang: sichqonchani kartaga olib boring — chegara qizg'ish bo'ladi va karta 4 piksel silliq ko'tariladi. Tizimda harakatni kamaytirishni yoqsangiz, faqat chegara rangi o'zgaradi. transform — elementni siljitish (2D transformlar), transition — o'zgarishni silliq qilish. Ikkalasini 06-qismda to'liq o'rganamiz, hozir bilish shart emas.

Ikki narsaga e'tibor bering:

• Harakat no-preference ichida. Ya'ni "foydalanuvchi qarshi bo'lmasa — harakat qo'sh". Bu no-motion-first yondashuvi: odatiy holat — harakatsiz, harakat esa qo'shimcha. Harakatni avval yozib, keyin reduce da o'chirishdan ishonchliroq: yangi harakat qo'shganda o'chirishni unutib qo'yish xavfi yo'q.
• Javob yo'qolmadi. Harakatsiz rejimda ham karta sichqonchaga javob beradi — rangi o'zgaradi. reduce — "hech narsa bo'lmasin" emas, "sirg'alish va sakrash bo'lmasin" degani.

4. Kontrast va majburiy ranglar

4.1 prefers-contrast

Ba'zi foydalanuvchilar tizimda "kontrastni oshirish" sozlamasini yoqadi (macOS va iOS'da "Increase contrast"). CSS so'raydi:

@media (prefers-contrast: more) {
  :root {
    --rang-ikkinchi: var(--rang-matn);
  }
  .taom-karta {
    border-width: 2px;
  }
}

«Bahor»ning ikkinchi darajali kulrang matni (--rang-ikkinchi, 5.7:1) talabga javob beradi, lekin kontrast so'ragan odam uchun asosiy matn rangiga o'tadi. Ingichka chegaralar qalinlashadi. Qiymatlar: more, less, custom va no-preference. Baseline ma'lumotiga ko'ra Baseline, 2024-yil noyabridan keng tarqalgan.

prefers-contrast — "iltimos". Brauzer ranglaringizni o'zgartirmaydi, qaror sizda.

4.2 forced-colors: brauzer ranglarni o'zi almashtiradi

Chegara va soyalar darsida majburiy ranglar rejimi (forced colors) haqida gapirgan edik: Windows'dagi kontrast mavzulari — Dilnoza opa yoqqan rejim. Bu yerda brauzer "iltimos" qilmaydi — majburan almashtiradi. Sizning ranglaringiz o'rniga foydalanuvchi mavzusining bir necha rangi ishlatiladi.

Chrome DevTools'da shu rejimni yoqib (Rendering → "Emulate CSS media feature forced-colors: active"), «Bahor» parchasini tekshirdik:

• .bron-havola ning yashil foni yo'qoldi — tugma oddiy sariq havolaga aylandi, tugma ekanini bilib bo'lmaydi.
• Taom kartasining soyasi yo'qoldi (box-shadow: none hisoblandi) — karta chegarasi ham, karta ham ko'rinmay qoldi.
• Narxning qizg'ish rangi oddiy matn rangiga aylandi.
• Lekin border: 2px solid transparent berilgan ikkinchi tugmaning shaffof chegarasi sariq bo'lib ko'rindi — tugma yana tugmaga o'xshadi.

Xulosa — bitta qoida: ko'rinish muhim bo'lgan joyda rangni fon va soyaga emas, chegaraga ham bog'lang. Oddiy rejimda shaffof chegara ko'rinmaydi, majburiy ranglarda esa u "tiriladi":

.bron-havola,
.taom-karta {
  border: 2px solid transparent;
}

Chegara va soyalar darsidagi outline: 3px solid transparent fokus halqasi ham aynan shu tamoyil.

Baseline ma'lumotiga ko'ra forced-colors — Baseline, 2025-yil martdan keng tarqalgan.

4.3 Tizim ranglari: @media (forced-colors: active)

Kamdan-kam hollarda shu rejim uchun alohida qoida kerak bo'ladi. Unda tizim ranglari (system colors) ishlatiladi — foydalanuvchi mavzusidan olinadigan ranglar nomi: CanvasText (matn), Canvas (fon), LinkText (havola), ButtonText va ButtonFace (tugma), Highlight (tanlangan):

@media (forced-colors: active) {
  .narx {
    text-decoration: underline;
  }
  .bron-havola:focus-visible {
    outline-color: Highlight;
  }
}

Narx endi rangi bilan ajralmaydi — tagiga chiziq qo'ydik. Faqat rangga tayangan ma'lumot bu rejimda yo'qoladi (CSS'da accessibility darsida to'liq). Yana bir xususiyat bor — forced-color-adjust: none elementni majburiy ranglardan ozod qiladi. U faqat rangning o'zi ma'lumot bo'lgan joyda kerak, masalan, rang tanlash namunalarida. Uni boshqa joyda ishlatmang: foydalanuvchi aynan shu rangdan qochgan.

4.4 prefers-reduced-transparency

Yarim shaffof, orqasi xira ko'rinadigan panellar ba'zilarga matnni o'qishni qiyinlashtiradi. @media (prefers-reduced-transparency: reduce) bilan ularni to'liq rangli qilish mumkin. Lekin Baseline ma'lumotiga ko'ra u Baseline emas: faqat Chrome va Edge'da (119 dan) bor, Firefox va Safari'da yo'q. Ishlatsangiz — faqat qo'shimcha yaxshilanish sifatida.

Tekshirib ko'ring: Stajyor tugmani faqat fon bilan yasadi: background-color: #2f6b3a; color: #fffaf0; border: none;. Dilnoza opa majburiy ranglar rejimida nimani ko'radi va qanday tuzatiladi?

5. Qurilma: sichqonchami yoki barmoqmi?

5.1 hover va pointer

Holat pseudo-klasslari darsida "Sensorli qurilmani CSS'da aniqlashni keyin o'rganamiz" degan edik. Ikki media xususiyati:

Chrome'da tekshirdik: kompyuterda hover: hover va pointer: fine. DevTools qurilma rejimida telefon tanlanganda (u sensorli ekranni ham emulyatsiya qiladi) — hover: none va pointer: coarse.

<style>
  body {
    font-family: system-ui, sans-serif;
  }
  nav a {
    color: #2f6b3a;
  }
  @media (hover: hover) {
    nav a:hover {
      background-color: #d8ecd9;
    }
  }
  @media (pointer: coarse) {
    nav a {
      display: inline-block;
      box-sizing: border-box;
      min-height: 44px;
      padding: 0.75rem 0.5rem;
    }
  }
  p::after {
    content: " Sizda: sichqoncha.";
  }
  @media (pointer: coarse) {
    p::after {
      content: " Sizda: barmoq.";
    }
  }
</style>
<p>Qurilma turi.</p>
<nav aria-label="Asosiy menyu">
  <a href="menyu/">Menyu</a>
  <a href="bron/">Bron</a>
  <a href="aloqa/">Aloqa</a>
</nav>

Nimaga qarang: kompyuterda yozuv "Sizda: sichqoncha", havolalar oddiy va ustiga kelganda och yashil fon chiqadi. Telefonda — "Sizda: barmoq", havolalar esa kattalashgan: har biri kamida 44 piksel baland. Bu O'lchamlar darsidagi 44×44 maqsadi — faqat barmoq uchun. ::after bilan yozuv — Pseudo-elementlar darsidan. Kompyuterda "Telefon" tugmasini bosing: oyna torayadi, lekin yozuv "sichqoncha" bo'lib qoladi — pointer ekran eniga emas, qurilmaga qaraydi.

@media (hover: hover) ichidagi hover — telefonda "yopishib qoladigan" hover muammosining yechimi. Buni keyingi darsda batafsil ko'ramiz.

5.2 any-hover va any-pointer

hover va pointer faqat asosiy qurilmani so'raydi. Sensorli ekranli noutbukda asosiy — sichqoncha (sensorli panel), lekin barmoq ham bor. Buning uchun any- variantlari:

• (any-pointer: coarse) — qurilmalardan birortasi noaniq (barmoq bor).
• (any-hover: hover) — birortasi hover qila oladi.

Qoida: pointer: coarse ni "bu — telefon" deb o'qimang. Planshet, sensorli noutbuk, televizor ham bo'lishi mumkin. Ekran enini width, qurilma turini pointer so'raydi — ular alohida savol. Baseline ma'lumotiga ko'ra to'rttalasi ham 2018-yildan Baseline, keng tarqalgan.

Tekshirib ko'ring: Karta tavsifi faqat .taom-karta:hover .tavsif { display: block; } bilan ko'rinadi. Telefonda nima bo'ladi va qanday tuzatiladi?

6. Chop etish: @media print va @page

6.1 Muammo

Rustam aka menyu sahifasida Ctrl + P bosdi. Qog'ozga nima chiqadi? Asosiy menyu havolalari, "Stolni band qilish" tugmasi — qog'ozda ular bosilmaydi. Havola matni bor, lekin manzili yo'q: "Telegram" deb yozilgan, qaysi kanal — noma'lum.

6.2 «Bahor» menyusining chop etish stili

asosiy.css oxiriga:

@media print {
  /* Qog'ozda keraksiz narsalar */
  header nav,
  .bron-havola,
  .otish {
    display: none;
  }

  /* Oq qog'oz, qora siyoh */
  body {
    color: black;
    background: white;
    font-size: 12pt;
  }
  a,
  .narx {
    color: inherit;
  }

  /* Skroll o'rami qog'ozda qirqmasin */
  .jadval-orami {
    overflow: visible;
  }

  /* Qator va kartani sahifalar orasida bo'lmaslik */
  tr,
  .taom-karta {
    break-inside: avoid;
  }
  h2 {
    break-after: avoid;
  }

  /* Tashqi havolaning manzilini ko'rsatish */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}

@page {
  size: A4;
  margin: 15mm;
}

Qatorma-qator:

• display: none — navigatsiya, tugma va skip link qog'ozda kerak emas.
• Rang. Rangli matn oq-qora printerda kulrang va xira chiqadi. 12pt — bosma matnning odatiy o'lchami: pt — O'lcham birliklari darsidagi mutlaq birlik, qog'ozda aynan uning joyi.
• .jadval-orami — Overflow darsidagi skroll o'rami. Skroll konteyner qog'ozda ham "oyna" bo'lib qoladi. Chrome'da tekshirdik: bo'yi cheklangan (max-height) skroll o'ram chop etilganda, 50 ta taomdan faqat ko'rinib turgan 3 tasi qog'ozga tushdi. overflow: visible bilan — hammasi.
• break-inside: avoid — "shu elementni ikki sahifaga bo'lma". break-after: avoid — "sarlavhadan keyin sahifa uzilmasin", sarlavha sahifa oxirida yolg'iz qolmaydi. Eski kodda page-break-inside ni ko'rasiz — eski nomi. Baseline ma'lumotiga ko'ra break-inside: avoid — Baseline, break-after: avoid esa Baseline emas: faqat Chrome va Edge'da ishlaydi. Firefox va Safari uni tashlab ketadi — sarlavha ba'zan sahifa oxirida qoladi, boshqa zarari yo'q.
• a[href^="http"]::after — Atribut selektorlari (^= — "shu bilan boshlanadi") va Pseudo-elementlar darsidagi attr(). Faqat http bilan boshlanganlar: ../aloqa/ kabi nisbiy yo'l qog'ozda baribir foydasiz.
• @page — qog'oz sahifasining o'zi: o'lchami (A4, letter, landscape) va chetlari. Bu yerda selektor yo'q — u elementga emas, varaqqa tegishli.

6.3 Chrome'da chop etdik

Menyuni 50 ta taom bilan PDF'ga chop etdik:

• 3 sahifa chiqdi. Jadval sarlavhasi ("Taom — Narx") har sahifa tepasida o'zi takrorlandi — brauzer thead ni shunday chop etadi. Jadvallar darsidagi to'g'ri jadval tuzilmasi qog'ozda ham foyda berdi.
• Navigatsiya va tugma yo'q, havolalar qora.
• "Telegram" yonida — (https://t.me/sizning_kanal), "Aloqa" yonida esa hech narsa (nisbiy yo'l).
• Qiziq fakt: tizim qorong'i rejimda bo'lganda ham Chrome PDF'ga yorug' ranglar bilan chop etdi. Lekin boshqa brauzer yoki printer boshqacha qilishi mumkin — color: black qatori zaxira.

6.4 Ikki qo'shimcha

• Fon ranglari. Brauzer odatda fon ranglari va fon rasmlarini chop etmaydi — siyoh tejaladi. Rangli belgi (masalan, achchiq taom yonidagi qizil yorliq) albatta chiqishi kerak bo'lsa: print-color-adjust: exact. Baseline ma'lumotiga ko'ra u — yangi Baseline (2025-yil maydan hamma asosiy brauzerda), eski brauzerda ishlamaydi. Foydalanuvchi chop etish oynasida "Background graphics" ni o'zi ham yoqishi mumkin.
• @page va brauzerlar. Baseline ma'lumotiga ko'ra @page va uning size qismi — yangi Baseline: Safari uni faqat 2024-yil dekabridan qo'llaydi. Eski Safari'da o'lcham va chetlar e'tiborga olinmaydi — sahifa brauzer standartida chiqadi, lekin @media print qoidalari baribir ishlaydi.

CSS'ni alohida faylga ham ajratish mumkin: <link rel="stylesheet" href="assets/css/chop.css" media="print">. Brauzer uni sahifa chizilishini to'xtatmasdan, past navbatda yuklaydi. «Bahor»da bitta asosiy.css va uning ichida @media print — soddaroq.

Tekshirib ko'ring: a::after { content: " (" attr(href) ")"; } yozildi — a[href^="http"] emas. Menyu qog'ozida "Bosh sahifa" havolasi yonida nima chiqadi?

7. DevTools'da hammasini sinash

Har bir sozlamani tizimda o'zgartirib yurish shart emas. Chrome'da Ctrl + Shift + P → "Show Rendering" — Rendering paneli ochiladi. Unda "Emulate CSS media type" (print) va "Emulate CSS media feature" ro'yxatlari bor: prefers-color-scheme, prefers-reduced-motion, prefers-contrast, forced-colors, prefers-reduced-transparency va boshqalar. Tanlaysiz — sahifa darhol shunga moslashadi. Tez yo'l — qorong'i rejim bo'limida ishlatgan mo'yqalam tugmasi (Styles paneli).

hover va pointer esa qurilma rejimi (Ctrl + Shift + M) bilan: telefon tanlansa, Chrome sensorli ekranni emulyatsiya qiladi.

8. Ko'p uchraydigan xatolar

8.1 color-scheme siz qorong'i rejim

@media (prefers-color-scheme: dark) da ranglar yozildi, lekin color-scheme yo'q. Sahifa qorong'i, forma maydonlari va skrollbar esa oppoq. Tuzatish: :root { color-scheme: light dark; } (Ranglar 3).

8.2 Harakatni o'chirib, javobni ham o'chirish

prefers-reduced-motion: reduce da hover umuman bekor qilindi — foydalanuvchi bosganini sezmaydi. Tuzatish: harakatni rang yoki chegara o'zgarishi bilan almashtiring.

8.3 Tugma faqat fondan iborat

Majburiy ranglar rejimida fon yo'qoladi — tugma ko'rinmaydi. Tuzatish: border: 2px solid transparent.

8.4 pointer: coarse = telefon

Sensorli noutbuk yoki planshet ham coarse bo'lishi mumkin, telefon esa qalam bilan fine. Tuzatish: qurilma turini emas, imkoniyatni so'rang: "barmoq bilan bosiladimi?", "hover bormi?".

8.5 Chop etishda skroll o'ram

Jadval qog'ozda qirqildi. Tuzatish: @media print { .jadval-orami { overflow: visible; } }.

8.6 Hamma havola manzili bilan

a::after { content: attr(href) } — nisbiy yo'llar va mailto: ham chiqadi. Tuzatish: a[href^="http"]::after.

9. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Qaysi media xususiyati?

1. Sahifa telefonda qorong'i rejimda qorong'i bo'lsin.
2. Karta faqat sichqoncha bilan ishlaganda ustiga kelganda ko'tarilsin.
3. Kichik havolalar barmoq uchun kattalashsin.
4. Menyu qog'ozga chiqqanda navigatsiya yashirinsin.
5. Windows kontrast mavzusida tugma chegarasi ko'rinsin.

2-mashq (o'rta): Bron sahifasi qog'ozda

«Bahor»ning bron sahifasini chop etsa, forma kerak emas — mehmon qog'ozda faqat manzil va telefonni ko'rishi kerak. @media print yozing:

1. form va asosiy menyu yashirinsin.
2. Sahifa oxiridagi <p>Manzil: <a href="https://example.com/xarita">xaritada ko'rish</a>. Telefon: <a href="tel:+998900000000">+998 90 000 00 00</a></p> qog'ozda to'liq tushunarli bo'lsin.
3. Chetlar — 2 sm, varaq — A4.

Ishora: telefon raqami matnda bor — uning href ini takrorlash kerak emas. Xarita esa faqat havola matnida.

@media print {
  header nav,
  form {
    display: none;
  }
  body {
    color: black;
    background: white;
  }
  a {
    color: inherit;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}

@page {
  size: A4;
  margin: 2cm;
}

3-mashq (qiyin): Uch rejimga chidamli tugma

.bron-havola uchun CSS yozing:

1. Oddiy rejimda — yashil fon, qaymoq matn, yumaloq burchaklar, chegara ko'rinmaydi.
2. Majburiy ranglar rejimida tugma shakli saqlansin.
3. Sichqoncha bilan — hover'da fon to'qlashsin; harakatga ruxsat bo'lsa, tugma 2 piksel ko'tarilsin.
4. Fokus halqasi majburiy ranglarda Highlight rangida bo'lsin.

Ishora: majburiy ranglar (forced-colors) bo'limi va «Tamoyil: harakat — faqat ruxsat bo'lsa» bo'limi. Ranglar — Ranglar 3 darsidagi --rang-asosiy, --rang-fon; to'qroq hover — --rang-asosiy-toq.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-asosiy-toq: #1a5d1a;
    --rang-fon: #fffaf0;
  }
  body {
    font-family: system-ui, sans-serif;
  }
  .bron-havola {
    display: inline-block;
    padding: 0.75rem 1rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
    text-decoration: none;
  }
  .bron-havola:focus-visible {
    outline: 3px solid var(--rang-asosiy-toq);
    outline-offset: 2px;
  }
  @media (hover: hover) {
    .bron-havola:hover {
      background-color: var(--rang-asosiy-toq);
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .bron-havola {
      transition: transform 0.2s;
    }
    .bron-havola:hover {
      transform: translateY(-2px);
    }
  }
  @media (forced-colors: active) {
    .bron-havola:focus-visible {
      outline-color: Highlight;
    }
  }
</style>
<p><a class="bron-havola" href="bron/">Stolni band qilish</a></p>

4-mashq: Portfolio qadami — "Men haqimda" qog'ozda rezyume bo'lsin

Ish beruvchi portfoliongizning "Men haqimda" sahifasini chop etib, rezyume sifatida o'qishi mumkin. Sahifani qog'ozga moslang:

1. Asosiy menyu va skip link qog'ozda yashirinsin.
2. Matn qora, fon oq, havolalar ajralib tursin, lekin rangsiz.
3. Tashqi havolalar (https://...) yonida manzili chiqsin. Footer'dagi email matni allaqachon manzil — mailto: ni takrorlamang.
4. Bilimlar ro'yxati (dl) va o'qish rejasi jadvali sahifalar orasida bo'linmasin.
5. Varaq — A4, chetlari 15 mm.
6. DevTools Rendering panelida print ni emulyatsiya qiling, keyin Ctrl + P bilan PDF'ga saqlab ko'ring.

Ishora: portfolio'da class juda kam — header nav, section, table teg selektorlari yetadi. Skip link — body ning birinchi a si: body > a:first-child (Tuzilma pseudo-klasslari).

/* Chop etish: "Men haqimda" — rezyume */
@media print {
  header nav,
  body > a:first-child {
    display: none;
  }
  body {
    color: black;
    background: white;
    font-size: 11pt;
  }
  a {
    color: inherit;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
  section,
  table {
    break-inside: avoid;
  }
  h2 {
    break-after: avoid;
  }
}

@page {
  size: A4;
  margin: 15mm;
}

10. Real ishda

• Qorong'i rejim — bugun deyarli har ilovada bor: Telegram, Instagram, bank ilovalari. Foydalanuvchi uni kutadi, sayt yorqin oq bo'lib ochilsa — noqulay.
• Accessibility auditlarida (davlat saytlari, banklar) sahifa kontrast rejimida va harakat kamaytirilganda ham tekshiriladi. Yevropa Ittifoqida bu qonun talabi: EN 301 549 standarti WCAG'ga tayanadi.
• Chop etish — chek, bilet, buyurtma, rezyume, retsept sahifalarida kerak. Onlayn do'konlarda "Buyurtmani chop etish" tugmasi aynan @media print ga tayanadi.
• Intervyuda so'raladi: "Qorong'i rejimni qanday qilasiz?", "prefers-reduced-motion nima uchun?", "hover: none qachon kerak?", "Chop etish stilini qanday yozasiz?".

Xulosa

• @media foydalanuvchi va qurilmani ham so'raydi: sozlamani foydalanuvchi tizimda beradi, CSS o'qiydi.
• light-dark() + color-scheme — ranglar; prefers-color-scheme — rangdan boshqa narsalar (surat, soya, fon rasmi).
• Harakat — faqat prefers-reduced-motion: no-preference ichida; kamaytirish — javobni emas, sirg'alishni olib tashlaydi.
• Majburiy ranglarda fon va soya yo'qoladi — ko'rinish muhim joyda shaffof chegara qoldiring.
• hover/pointer qurilma imkoniyatini so'raydi, turini emas.
• @media print + @page: keraksizni yashirish, qora matn, break-inside, tashqi havola manzili.

Keyingi dars: Mobil qurilma tuzoqlari — iPhone "burni", ekran klaviaturasi, yopishib qoladigan hover va iOS'dagi forma zoom'i: haqiqiy telefonlarda chiqadigan muammolar va ularning CSS yechimlari.

Manbalar

• MDN: "prefers-color-scheme", "prefers-reduced-motion", "prefers-contrast", "forced-colors", "prefers-reduced-transparency", "hover", "pointer", "any-pointer", "@page", "break-inside", "print-color-adjust", "Printing" — developer.mozilla.org
• W3C: "Media Queries Level 5" (foydalanuvchi afzalliklari), "CSS Paged Media Module Level 3" — w3.org/TR/mediaqueries-5, w3.org/TR/css-page-3
• W3C: WCAG 2.2, 2.3.3 "Animation from Interactions" — w3.org/TR/WCAG22
• Chrome DevTools: "Emulate CSS media features" (Rendering paneli) — developer.chrome.com/docs/devtools
• web-features (Baseline ma'lumotlari): "prefers-color-scheme", "prefers-reduced-motion", "prefers-contrast", "forced-colors", "prefers-reduced-transparency", "interaction", "page-setup", "page-breaks", "print-color-adjust" — github.com/web-platform-dx/web-features