CSS brauzer mosligi: Baseline, caniuse va @supports bilan xavfsiz yangi CSS

Qisqacha: Yangi CSS imkoniyatini ishlatishdan oldin uning Baseline holatini (MDN yoki caniuse'da) tekshiring: "Widely available" — bemalol, "Newly available" — zaxira o'ylab, "Limited" — faqat qo'shimcha sifatida. Brauzer tushunmagan deklaratsiyani tashlab ketadi — oddiy holatda zaxirani yuqoriroq qatorga yozish yetadi. Bir necha qator birga o'zgarishi kerak bo'lsa yoki qiymatda var() bo'lsa, @supports (xususiyat: qiymat) { ... } ishlating: ichidagi qoidalar faqat brauzer shartni tushunsa qo'llanadi. Selektorni @supports selector(:has(a)) tekshiradi.

Bu darsda

• Baseline, caniuse va MDN moslik jadvalini o'qib, "buni hozir ishlata olamanmi?" savoliga javob bera olasiz.
• Zaxirani qachon oddiy kaskad bilan, qachon @supports bilan yozish kerakligini ajrata olasiz.
• @supports ning not, and, or va selector() shakllarini to'g'ri yoza olasiz.
• Vendor prefikslar nima ekanini va nega bugun ularni qo'lda yozmasligimizni bilasiz.
• Sahifani Safari va Firefox'da sinash yo'llarini bilasiz.

Oldin bilishingiz kerak: Veb standartlari va brauzer mosligi, Brauzer mosligi va progressive enhancement, DevTools'da CSS, CSS o'zgaruvchilari 2.

1. Nega bu kerak?

05-qism davomida biz "yangi — eski brauzerlarda ishlamaydi" degan gapni ko'p aytdik va o'n martacha "@supports ni keyinroq o'rganamiz" deb va'da berdik:

• Mantiqiy pseudo-klasslar — brauzer :has() ni biladimi, CSS'ning o'zida qanday tekshirish?
• Ranglar 3 — nisbiy rang eski brauzerda fonni butunlay shaffof qilib qo'yadi.
• Matn bezagi — gradient matn eski brauzerda bo'sh to'rtburchak bo'lib qoladi.
• subgrid va Layout naqshlari — "brauzer qo'llasa — yangisi, bo'lmasa — eskisi".

Brauzer mosligi va progressive enhancement darsida HTML tomonini ko'rgan edik: zaxira kontent, polyfill, "zina va lift". Bugun CSS tomoni. Va o'sha va'dalarning hammasini bajaramiz.

Vaziyat: Jasur akaning jiyani eski iPhone'da «Bahor» saytini ochdi. Sarlavha o'rnida — bo'sh rangli to'rtburchak. Siz Chrome'da tekshirgansiz, hammasi joyida edi. Bugungi dars — shunday "menda ishlayapti edi-ku" holatlarining oldini olish.

2. "Ishlata olamanmi?" — uch manba

2.1 Baseline — bitta belgi

Veb standartlari darsidan eslang: Baseline asosiy brauzerlar to'plamiga qaraydi (Chrome, Edge, Firefox, Safari — kompyuter va telefonda) va uch holat beradi:

Darslarda "Baseline ma'lumotiga ko'ra..." deb yozgan sanalarimiz shu yerdan. Masalan: :has() 2023-yil dekabrda Newly, 2026-yil iyunda Widely available bo'ldi. Native CSS nesting ham xuddi shunday — 2026-yil iyunida keng tarqalgan bo'ldi. content-visibility esa hali yangi (2025-yil sentabr).

Baseline belgisi MDN'dagi har xususiyat sahifasining tepasida turadi. "Baseline 2024" kabi yozuv — imkoniyat qaysi yili Newly available bo'lganini bildiradi.

2.2 caniuse.com — foiz va tafsilot

Veb standartlari darsida caniuse'ning yashil, qizil va sariq kataklarini ko'rgan edik. CSS uchun yana uch narsa muhim:

• Notes (izohlar) va Known issues (ma'lum xatolar) tablari. Sariq "qisman" katakning sababi shu yerda yoziladi: masalan, "faqat -webkit- prefiksi bilan".
• Flag belgisi — imkoniyat brauzerda bor, lekin sozlamalarda qo'lda yoqilmasa ishlamaydi. Oddiy foydalanuvchi uchun bu "yo'q" degani.
• Davlat bo'yicha foiz. Sozlamalarda global foiz o'rniga biror davlatni tanlash mumkin. Mijozlaringiz qaysi qurilmada ekanini bilsangiz — shu raqam muhimroq.

2.3 MDN moslik jadvali — versiyalar

MDN sahifasining pastidagi Browser compatibility jadvalida har brauzer va versiya. Belgilarni o'qish:

• Yashil katak va raqam — shu versiyadan beri ishlaydi.
• Qizil — ishlamaydi.
• Kichik belgi yoki izoh raqami — qisman: prefiks bilan, flag orqasida yoki cheklov bilan. Izohni ochib o'qing.

2.4 Interop — brauzerlar kelishuvi

Ba'zan imkoniyat hamma brauzerda "bor", lekin har birida biroz boshqacha ishlaydi. Buni tuzatish uchun Apple, Google, Microsoft, Mozilla va boshqalar har yili Interop loyihasida kelishadi: shu yil qaysi yo'nalishlarni birga tuzatamiz. Natijalar wpt.fyi/interop sahifasida — har brauzer shu yo'nalishlar bo'yicha testlarning necha foizidan o'tganini ko'rsatadi. Testlarning o'zi web-platform-tests (WPT) deb ataladi — minglab avtomatik sinovlar to'plami.

Sizga amaliy foyda: imkoniyat Interop ro'yxatida bo'lsa, u yaqin oylarda hamma brauzerda bir xil ishlashi kutiladi.

Tekshirib ko'ring: Imkoniyat caniuse'da 94% va sariq katak bilan, MDN'da "Limited availability". Asosiy ma'lumotni (masalan, narxni) shu imkoniyatga ishonib ko'rsatasizmi?

3. Eng oddiy zaxira — kaskad

3.1 Ikki qator

CSS nima darsidagi qoidani eslang: brauzer tushunmagan deklaratsiyani tashlab ketadi. Demak, zaxira shunday yoziladi:

h1 {
  color: #2f6b3a;               /* hamma brauzer */
  color: oklch(48% 0.1 145);    /* tushunsa — ustiga yozadi */
}

Yangi brauzer ikkala qatorni tushunadi, pastdagisi yutadi. Eski brauzer ikkinchisini tashlaydi, birinchisi qoladi. @supports kerak emas.

Xuddi shunday: height: 100vh; height: 100dvh; (Viewport birliklari), -webkit-text-size-adjust va text-size-adjust (Mobil qurilma tuzoqlari). Qoida: eski — tepada, yangi — pastda.

3.2 Kaskad yetmaydigan uch holat

1. Qiymatda var() bor. CSS o'zgaruvchilari 2 va Ranglar 3 darslaridagi tuzoq: var() li qiymatni eski brauzer ham "tushunadi" (o'qish paytida var() ichiga qaramaydi). Keyin hisoblashda yaroqsiz chiqadi — va yuqoridagi zaxira allaqachon yutqazgan bo'ladi.
2. Bir necha qator birga o'zgarishi kerak. Gradient matn uchun background-clip: text va color: transparent kerak. Brauzer birinchisini tushunmay, ikkinchisini tushunsa — matn yo'qoladi.
3. Butun layout almashadi. "Masonry bo'lsa — grid-lanes, bo'lmasa — columns". Bir necha xususiyat, bir necha element.

Uchala holatda ham yechim — @supports.

4. @supports sintaksisi

4.1 Asosiy shakl

@supports (display: grid) {
  .taom-karta {
    display: grid;
  }
}

@supports (feature query — imkoniyat so'rovi) — "brauzer qavs ichidagi deklaratsiyani tushunsa, blok ichidagi qoidalarni qo'lla". @media ga o'xshaydi: @media ekranni so'raydi, @supports — brauzerning o'zini. Baseline ma'lumotiga ko'ra @supports 2015-yildan hamma asosiy brauzerda bor — o'zi keng tarqalgan.

Qavs majburiy. Chrome'da tekshirdik: @supports display: grid { ... } qoidasi butunlay tashlandi — brauzer uni @supports deb ham qabul qilmadi.

4.2 not, and, or

/* Tushunmasa */
@supports not (display: grid-lanes) { ... }

/* Ikkalasini ham */
@supports (display: grid) and (gap: 1rem) { ... }

/* Kamida bittasini */
@supports (background-clip: text) or
  (-webkit-background-clip: text) { ... }

and va or ni bitta darajada aralashtirib bo'lmaydi — qo'shimcha qavs kerak. Chrome'da tekshirdik: (a) and (b) or (c) qoidasi tashlandi, ((a) and (b)) or (c) esa ishladi.

4.3 selector() — selektorni tekshirish

Mantiqiy pseudo-klasslar darsidagi savolga javob:

@supports selector(:has(a)) {
  .taom-karta:has(.yangi) {
    border-color: #b4461a;
  }
}

selector() ichiga qavssiz, to'g'ridan-to'g'ri selektor yoziladi. Baseline ma'lumotiga ko'ra @supports selector() ning o'zi 2021-yildan Baseline, keng tarqalgan.

Eslatma: Mantiqiy pseudo-klasslar darsidagi ":has() ni oddiy selektorlar bilan bitta ro'yxatga qo'shmang" qoidasi ham bir xil muammoni hal qiladi — ikkalasini birga ishlatish mumkin.

4.4 Shriftlar uchun

@supports font-tech(color-COLRv1) va font-format(woff2) — brauzer rangli shrift texnologiyasini yoki fayl formatini biladimi. Baseline ma'lumotiga ko'ra ikkalasi 2026-yil martdan keng tarqalgan. Kam kerak bo'ladi: Web shriftlar darsidagi src ro'yxati odatda o'zi yetadi.

4.5 Brauzeringiz nimalarni biladi?

<style>
  body { font-family: system-ui, sans-serif; }
  li::after {
    content: " — yo'q";
    font-weight: bold;
    color: #b4461a;
  }
  @supports (display: grid) {
    .grid::after { content: " — bor"; color: #2f6b3a; }
  }
  @supports selector(:has(a)) {
    .has::after { content: " — bor"; color: #2f6b3a; }
  }
  @supports (color: oklch(from red l c h)) {
    .nisbiy::after { content: " — bor"; color: #2f6b3a; }
  }
  @supports (animation-timeline: view()) {
    .skroll::after { content: " — bor"; color: #2f6b3a; }
  }
  @supports (display: grid-lanes) {
    .lanes::after { content: " — bor"; color: #2f6b3a; }
  }
</style>
<ul>
  <li class="grid">display: grid</li>
  <li class="has">:has()</li>
  <li class="nisbiy">nisbiy rang (oklch from)</li>
  <li class="skroll">skrollga bog'liq animatsiya</li>
  <li class="lanes">display: grid-lanes (masonry)</li>
</ul>

Nimaga qarang: har qator oxirida brauzeringizning javobi. Chrome 154 da natija: birinchi to'rttasi "bor" (yashil), grid-lanes — "yo'q" (qizg'ish). Safari yoki Firefox'da ochsangiz, javoblar boshqacha bo'lishi mumkin. Baseline ma'lumotiga ko'ra skrollga bog'liq animatsiyalar (Scroll-driven animatsiyalar) Baseline emas — Firefox'da yo'q, grid-lanes esa hozircha faqat Safari 26.4 da. Buni "Tahrirlab ko'rish" bilan o'zingiz o'zgartirib sinang: masalan, display: flex qo'shing.

Tekshirib ko'ring: @supports (display: grid) or (display: flex) and (gap: 1rem) { ... } — brauzer nima qiladi?

5. Va'dalarni bajaramiz

5.1 Nisbiy rang va var()

Ranglar 3 darsida to'xtab qolgan misol — «Bahor» tugmasi hover'da to'qroq bo'ladi:

.bron-havola:hover {
  background-color: var(--rang-asosiy-toq);
}

@supports (color: oklch(from red l c h)) {
  .bron-havola:hover {
    background-color: oklch(
      from var(--rang-asosiy) calc(l - 0.08) c h
    );
  }
}

Shartda red — oddiy, var() siz rang. Sababi: @supports (color: var(--x)) doim "ha" deydi — Chrome'da tekshirdik, (--x: foo) ham "ha". var() bor joyda brauzer qiymatni tekshirmaydi. Shuning uchun shartga imkoniyatning o'zini haqiqiy qiymat bilan yozamiz. Baseline ma'lumotiga ko'ra nisbiy rang 2024-yil sentabrdan yangi Baseline.

5.2 Gradient matn

Matn bezagi darsidagi xavf: color: transparent ishlaydi, background-clip: text esa yo'q — matn g'oyib. Ikkalasini bitta shartga bog'laymiz:

<style>
  body { font-family: system-ui, sans-serif; }
  h1 {
    color: #2f6b3a; /* zaxira: hamma brauzer */
  }
  @supports (background-clip: text) or
    (-webkit-background-clip: text) {
    h1 {
      inline-size: fit-content; /* gradient faqat matn enida */
      background: linear-gradient(90deg, #2f6b3a, #b4461a);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
</style>
<h1>Choyxona «Bahor»</h1>

Nimaga qarang: sarlavha yashildan qizg'ishga o'tuvchi gradient bilan bo'yalgan. Shartni tushunmagan brauzerda u oddiy yashil bo'ladi — bo'sh to'rtburchak emas. color: transparent endi faqat background-clip bilan birga keladi.

Baseline ma'lumotiga ko'ra background-clip: text hali Baseline emas. Shuning uchun -webkit- prefiksli varianti ham yozilgan va shartda or bor — prefiksni quyida ko'ramiz.

5.3 Masonry: yangi va eski

Layout naqshlari darsidagi va'da:

section {
  columns: 16rem; /* hamma brauzer */
}

@supports (display: grid-lanes) {
  section {
    columns: auto;
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
  }
}

section — Layout naqshlari darsidagi masonry misolidagi selektor. Safari 26.4 yangi layoutni oladi, qolganlari — columns. Blok ichidagi columns: auto yangi layoutda eski ustunlarni o'chiradi.

subgrid darsida esa shart kerak ham bo'lmadi. Subgrid bugun keng tarqalgan. Eski brauzer faqat bitta qatorni tashlaydi va karta oddiy grid bo'lib qoladi.

5.4 @supports nimani tekshirmaydi

@supports faqat "brauzer bu yozuvni tushunadimi" deb so'raydi, "to'g'ri ishlaydimi" deb emas. subgrid darsida ko'rgan edik: Chrome 154 fieldset da grid-template-columns: subgrid ni tushunadi — @supports "ha" deydi — lekin ishlamaydi. Bunday xatolar faqat sinab ko'rish bilan topiladi.

Tekshirib ko'ring: Nega nisbiy rang shartiga (color: oklch(from var(--rang-asosiy) l c h)) yozish xato?

6. Progressive enhancement va graceful degradation — CSS'da

Brauzer mosligi darsidagi ikki yo'l CSS'da shunday ko'rinadi:

• Progressive enhancement (pastdan yuqoriga): avval hamma brauzer uchun oddiy CSS, keyin @supports (yangi) ichida yaxshilash. Bizning hamma misollarimiz — shunday.
• Graceful degradation (yuqoridan pastga): avval eng yangi CSS, keyin @supports not (yangi) ichida eski brauzer uchun tuzatish.

Birinchisi ishonchliroq. Sababi — juda eski brauzer @supports ning o'zini bilmasligi mumkin: u holda not blokini ham tashlaydi va tuzatish unga yetmaydi. Progressive enhancement'da esa asosiy CSS blok tashqarisida — u doim ishlaydi.

flowchart TD
  A["Yangi imkoniyat kerak"] --> B{"Baseline Widely?"}
  B -->|Ha| C["Bemalol yozing"]
  B -->|Yo'q| D{"Eski qatorni tepaga<br/>yozish yetadimi?"}
  D -->|Ha| E["Kaskad zaxirasi"]
  D -->|"Yo'q: var(), bir necha<br/>qator, layout"| F["@supports bilan"]

Nimaga qarang: @supports — birinchi emas, oxirgi vosita. Ko'p holatda ikki qator yetadi.

7. Vendor prefikslar: qisqa tarix

7.1 Nima edi

2000-yillar oxiri va 2010-yillarda brauzerlar yangi CSS'ni prefiks bilan chiqarardi: -webkit- (Safari, keyin Chrome), -moz- (Firefox), -ms- (Internet Explorer), -o- (Opera). G'oya: "bu tajriba, standart tayyor bo'lgach prefiksni olib tashlaymiz".

.taom-karta {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

Eski kodda bunday uch-to'rt qatorlik to'plamlarni hali ko'p uchratasiz.

7.2 Nega muvaffaqiyatsiz bo'ldi

Dasturchilar prefiksli versiyani ishlab chiqarishda ishlata boshladi va ko'pincha faqat -webkit- ni yozdi. Natijada Firefox va boshqalar ham -webkit- prefiksini tushunishga majbur bo'ldi — aks holda saytlar ularda buzilardi. Tajriba abadiy standartga aylandi.

Bugun brauzerlar yangi imkoniyatni flag orqasida sinaydi (oddiy foydalanuvchida o'chiq) va tayyor bo'lgach, darhol prefikssiz chiqaradi.

7.3 Bugun nima qilamiz

• Qo'lda prefiks yozmaymiz. Kerak bo'lsa, uni Autoprefixer vositasi avtomatik qo'shadi — PostCSS va Autoprefixer darsida o'rganamiz, hozir bilish shart emas.
• Bir necha istisno hali qo'lda yoziladi, chunki standart versiya hamma joyda yo'q: -webkit-text-size-adjust (portfoliongizda bor), -webkit-background-clip: text. Har doim prefiksli qator — tepada, standart — pastda.

8. Boshqa brauzerlarda sinash

8.1 Chrome yetmaydi

Kompyuteringizda Chrome bor. Lekin foydalanuvchilaringiz orasida iPhone egalari bor — ularning deyarli hamma brauzeri (iOS'dagi Chrome ham) Safari dvigateli WebKit'da ishlaydi (Brauzer tuzilishi va dvigatellar). DevTools'ning qurilma rejimi ekran o'lchamini taqlid qiladi, lekin dvigatel baribir Chrome'niki — u Safari'ni almashtirmaydi.

8.2 Yo'llar

• Android telefonni kompyuterga ulash. Telefon sozlamalarida avval "Dasturchi rejimi" (Developer options) va undagi "USB debugging" yoqiladi. Keyin telefonni USB orqali ulab, kompyuterdagi Chrome'da chrome://inspect ni ochasiz. Endi telefondagi sahifani kompyuter DevTools'i bilan tekshira olasiz.
• Playwright — brauzerlarni dastur orqali boshqaradigan vosita. U o'zi bilan WebKit, Firefox va Chromium'ni olib keladi. Uni npm orqali o'rnatamiz va testlarni Playwright I darsida yozamiz; hozir faqat nomini bilib qo'ying.

Maslahat: Kichik loyihada tartib shunday: Chrome'da yozing → Firefox'da oching → telefon(lar)da oching → @supports va zaxiralarni tekshiring. Har imkoniyat uchun o'zingizga savol bering: "shu yo'q bo'lsa, sahifa o'qiladimi?"

9. Polyfill — CSS'da kam

Brauzer mosligi darsida polyfill'ni ko'rgan edik: yetishmayotgan imkoniyatni JavaScript bilan "yamash". CSS'da polyfill kam ishlatiladi: layout va chizishni JavaScript'da taqlid qilish og'ir va sekin. Masalan, container queries uchun polyfill bor edi — imkoniyat hamma brauzerga yetib kelgach, u keraksiz bo'ldi. CSS'da asosiy yo'l — progressive enhancement: eski brauzerga oddiyroq, lekin ishlaydigan sahifa.

10. Ko'p uchraydigan xatolar

10.1 Qavssiz shart

@supports display: grid { ... } — qoida jim tashlanadi, ichidagi CSS hech qayerda ishlamaydi. Tuzatish: @supports (display: grid).

10.2 Shartda var()

@supports (color: var(--x)) doim "ha" — shart foydasiz. Tuzatish: imkoniyatni oddiy qiymat bilan tekshiring.

10.3 Yangi imkoniyatni zaxirasiz asosiy ma'lumotga berish

Narx faqat :has() bilan ko'rinadigan qilingan — eski brauzerda narx yo'q. Tuzatish: asosiy ma'lumot yangi imkoniyatsiz ham ko'rinsin; yangisi faqat bezak qo'shsin.

10.4 "@supports ha dedi — demak ishlaydi"

Tushunish va to'g'ri ishlash — boshqa narsa («@supports nimani tekshirmaydi» bo'limi). Tuzatish: muhim joyni haqiqiy brauzerlarda sinang.

10.5 Faqat -webkit- yozish

-webkit-background-clip: text bor, standart background-clip: text yo'q. Tuzatish: prefiksli — tepada, standart — pastda; ikkalasi birga.

11. Mashqlar

1-mashq (oson): Qaror qabul qiling

Har imkoniyat uchun ayting: bemalol, kaskad zaxirasi bilan yoki @supports bilan? Holatlar Baseline ma'lumotidan (2026-yil sentabr).

1. aspect-ratio — Widely available.
2. text-wrap: pretty — Baseline emas; tushunmagan brauzer oddiy o'raydi.
3. Nisbiy rang var() bilan — Newly available.
4. display: grid-lanes — Limited, faqat Safari 26.4.

Ishora: «Eski qatorni tepaga yozish yetadimi?» diagrammasi.

2-mashq (o'rta): Xatolarni toping

@supports display: grid-lanes {
  section { display: grid-lanes; }
}
@supports (display: grid) and (gap: 1rem) or (display: flex) {
  .taom-karta { display: grid; }
}
@supports (color: oklch(from var(--rang-asosiy) l c h)) {
  .aksiya { color: oklch(from var(--rang-urgu) l c h); }
}

Uchta xatoni toping va tuzating.

Ishora: qavs, and/or aralashuvi, shartdagi var().

@supports (display: grid-lanes) {
  section { display: grid-lanes; }
}
@supports ((display: grid) and (gap: 1rem)) or (display: flex) {
  .taom-karta { display: grid; }
}
@supports (color: oklch(from red l c h)) {
  .aksiya { color: oklch(from var(--rang-urgu) l c h); }
}

3-mashq (qiyin): «Bahor» menyusining "Yangi" kartalari

Talab: yangi taomlar kartasining chegarasi #b4461a bo'lsin. HTML'da karta ichida span bilan "Yangi" yozuvi bor, lekin kartaning o'zida yangi class'i yo'q (taomlarni Jasur aka sayt boshqaruv panelidan qo'shadi, panel esa class qo'ymaydi). :has() bilan yozing. Eski brauzerda kartalar oddiy chegarada qolsin, lekin "Yangi" yozuvi baribir ko'zga tashlansin (qizg'ish, qalin).

Ishora: :has() ni selector() bilan tekshiring; "Yangi" yozuvi uchun qoida shartsiz bo'lsin. span ni qanday tanlash — Atribut selektorlari yoki kombinatorlar. Yozuvga «Bahor»dagi aksiya class'ini bering.

<article class="taom-karta">
  <h3 class="taom-nomi">Tandir go'sht</h3>
  <p><span class="aksiya">Yangi</span></p>
  <p class="narx">45 000 so'm</p>
</article>

/* Hamma brauzer: yozuvning o'zi ajralib tursin */
.taom-karta .aksiya {
  font-weight: bold;
  color: #b4461a;
}

/* :has() tushunadigan brauzer: butun karta */
@supports selector(:has(a)) {
  .taom-karta:has(.aksiya) {
    border-color: #b4461a;
  }
}

4-mashq: Portfolio qadami — moslik auditi

Yakuniy loyiha darsida portfoliongizda "Eski brauzerlar" jadvali bor edi. Endi uni o'zingiz tekshirasiz va bitta xavfli joyni tuzatasiz.

1. asosiy.css da quyidagilarning Baseline holatini MDN'da toping: color-mix(), nisbiy rang (oklch(from ...)), :has(), text-wrap: balance, scrollbar-gutter. Jadval tuzing: imkoniyat, holat, "yo'q bo'lsa nima bo'ladi".
2. Header menyusidagi hover rangi nisbiy rang bilan, var() ichida yozilgan. Eski brauzerda u nima qiladi? @supports bilan himoyalang, zaxira — oddiy var(--rang-matn).
3. Portfolio'ni Firefox'da oching (o'rnatilmagan bo'lsa — o'rnating). Chrome bilan farq bormi?

@media (hover: hover) {
  header nav a:not([aria-current="page"]):hover {
    color: var(--rang-matn); /* zaxira */
  }

  @supports (color: oklch(from red l c h)) {
    header nav a:not([aria-current="page"]):hover {
      color: oklch(from var(--rang-asosiy) calc(l - 0.1) c h);
    }
  }
}

12. Real ishda

• "Qaysi brauzerlarni qo'llaymiz?" — har loyihaning boshida yoziladigan kelishuv. Zamonaviy javob: "Baseline Widely available" yoki "har brauzerning oxirgi 2 versiyasi". U keyinroq browserslist sozlamasiga yoziladi va vositalar unga qarab prefiks qo'shadi (PostCSS, Autoprefixer va browserslist).
• Katta kompaniyalar Safari va eski Android uchun alohida sinov qurilmalari saqlaydi yoki BrowserStack kabi xizmatga pul to'laydi.
• CSS yangiliklari — har yili Interop va brauzer relizlari bilan. Ularni qanday kuzatish kerakligini Yangi paydo bo'layotgan CSS darsida ko'ramiz.
• Intervyuda so'raladi: "@supports nima?", "Progressive enhancement va graceful degradation farqi?", "Vendor prefiks nima va hozir qo'lda yozasizmi?", "Yangi CSS'ni qachon ishlatishni qanday hal qilasiz?".

Xulosa

• Uch manba: Baseline (bitta belgi), caniuse (foiz, izohlar, davlat), MDN jadvali (versiyalar, prefiks va flag).
• Oddiy zaxira — kaskad: eski qator tepada, yangisi pastda.
• @supports — var() li qiymat, birga o'zgaradigan qatorlar va layout almashuvi uchun; qavs majburiy, and/or aralashsa — qo'shimcha qavs.
• Shartda var() yozmang; selector() bilan selektorni tekshiring.
• @supports tushunishni tekshiradi, to'g'ri ishlashni emas — haqiqiy brauzerlarda sinang.
• Prefikslarni qo'lda yozmang (istisnolardan tashqari) — ularni Autoprefixer qo'yadi.

Keyingi dars: Native CSS nesting — qoidalarni Sass'siz, to'g'ridan-to'g'ri CSS'da ichma-ich yozishni va uning specificity tuzoqlarini o'rganamiz.

Manbalar

• MDN: "@supports", "Using feature queries", "Browser compatibility tables", "Vendor prefix" — developer.mozilla.org
• web.dev: "Baseline" — web.dev/baseline
• caniuse.com — caniuse.com
• Interop dashboard va web-platform-tests — wpt.fyi/interop
• web-features (Baseline ma'lumotlari): "supports", "relative-color", "background-clip-text", "grid-lanes", "scroll-driven-animations" — github.com/web-platform-dx/web-features