Yangi CSS imkoniyatlari: nima kelyapti va uni qanday kuzatish

Qisqacha: CSS har yili yangi imkoniyatlar oladi: shartli qiymat if(), atributdan son oladigan attr(), elementning tartib raqami sibling-index(), o'z funksiyangiz @function, "squircle" burchak corner-shape, JS'siz karusel uchun ::scroll-button. Ularning ko'pi hozircha faqat Chrome'da. Yangilikni qayerdan bilish — Chrome Status, WebKit va Firefox reliz yozuvlari, Interop va Baseline. Qachon ishlatish — qoida oddiy: ma'lumot va ish yo'qolmasa, zaxira bilan; bitta brauzerdagi imkoniyatga sayt tayanib qolmasin.

Bu darsda

• Yangi CSS imkoniyati g'oyadan "hamma joyda ishlaydi" bosqichigacha qanday yo'l bosishini tushuntira olasiz.
• "Flag orqasida", "Newly available" va "Widely available" nima ekanini farqlaysiz.
• 2026-yilda paydo bo'layotgan sakkizta imkoniyatni tanib, ularning holatini tekshira olasiz.
• Yangiliklarni kuzatish uchun o'z manbalar ro'yxatingizni tuzasiz.
• Yangi imkoniyatni ishlab chiqarishga (production) qachon olib kirish mumkinligini asoslab bera olasiz.

Oldin bilishingiz kerak: Brauzer mosligi: Baseline, caniuse va @supports, Veb standartlari va brauzer mosligi, Anchor positioning, clip-path, shape() va maskalar.

1. Nega bu kerak?

Shu qismning oxirgi to'rt darsiga qarang. Anchor positioning — 2026-yil yanvarida Baseline bo'ldi. field-sizing — iyunda. shape() — fevralda. Stillanadigan select esa hali Firefox'da yo'q. 2023-yilda chiqqan kitob yoki video kursda bularning birortasi ham bo'lmagan.

CSS bugun "bir marta o'rganib, tamom" bo'ladigan til emas. Har yili brauzerlarga o'nlab yangi xususiyat qo'shiladi. Dasturchi uchun ikki xavf bor:

• Kech qolish. Yigirma qator JavaScript yozasiz — holbuki buni bitta CSS qatori allaqachon qiladi. Masalan, tooltip joylashuvi uchun kutubxona ulaysiz, anchor positioning esa bor.
• Shoshilish. O'z Chrome'ingizda ishlagan yangilikni ishlatasiz. Safari'dagi mijozlar esa buzilgan sahifani ko'radi.

Bu dars — "baliq berish" emas, "baliq tutishni o'rgatish". Yangi imkoniyatlar bilan tanishamiz, lekin asosiysi — ularni o'zingiz topish va baholash usuli. Shahardagi yangi metro bekatini tasavvur qiling: chizmada bor, qurilyapti, sinov poyezdi yuryapti, rasman ochildi. Faqat oxirgi bosqichda uni kundalik yo'lingizga qo'shasiz.

2. Yangi CSS qanday tug'iladi

2.1 Hayot sikli

flowchart TD
  A["G'oya, qoralama<br/>(CSSWG)"] --> B["Flag orqasida"]
  B --> C["Bitta brauzerda<br/>(Limited)"]
  C --> D["Hamma asosiy brauzerda<br/>(Baseline: yangi)"]
  D --> E["30 oydan keyin<br/>(Baseline: keng tarqalgan)"]

Nimaga qarang: har bosqichda imkoniyatni ishlatadigan odamlar doirasi kengayadi — avval faqat spetsifikatsiya yozuvchilar, oxirida hamma.

1. G'oya va qoralama. CSS'ni CSS Working Group (CSSWG) — W3C qoshidagi, brauzer ishlab chiqaruvchilar va mutaxassislardan iborat guruh — ishlab chiqadi. Hujjat avval "qoralama" (Working Draft). Muhokama GitHub'da, ochiq.
2. Flag orqasida. Brauzer imkoniyatni yozdi, lekin sukut bo'yicha o'chiq. Yoqish uchun maxsus sozlama — flag — kerak.
3. Bitta brauzerda. Imkoniyat bitta dvigatelda hamma uchun yoqildi. MDN'dagi Baseline belgisi buni "Limited availability" (cheklangan) deydi.
4. Baseline: yangi (Newly available). Chrome, Edge, Firefox va Safari'ning oxirgi versiyalarida bor. Veb standartlari darsidagi atama.
5. Baseline: keng tarqalgan (Widely available). Yangi bo'lganidan 30 oy o'tdi — ko'p odamning brauzeri allaqachon yangilangan.

2.2 "Flag orqasida" nima

Flag — brauzerning yashirin sozlamasi: tajribadagi imkoniyatni faqat o'zingizning brauzeringizda yoqadi.

• Chrome: manzil qatoriga chrome://flags yozasiz, "Experimental Web Platform features" ni yoqasiz.
• Firefox: about:config — alohida kalitlar, masalan layout.css.<nom>.enabled.
• Safari: alohida brauzer — Safari Technology Preview; Chrome'ning oldindan ko'rish versiyasi esa Chrome Canary.

Muhim fakt: foydalanuvchilarning brauzerida flag yoqilmagan. "Flag bilan ishlaydi" — "saytda ishlamaydi" degani. Flag — faqat sinab ko'rish, fikr bildirish va tayyorlanish uchun.

Tekshirib ko'ring: Blogda "Firefox'da reading-flow ishlaydi — faqat about:config da yoqing" deb yozilgan. Saytingizga uni qo'shsangiz, Firefox foydalanuvchilari uni ko'radimi?

3. 2026-yilda kelayotgan imkoniyatlar

Quyidagi holatlar — Baseline ma'lumotidan (2026-yil sentabr oxiri). Chrome'dagi misollar Chrome 154 da tekshirildi. Bu bo'lim bir yildan keyin eskiradi — shuning uchun har imkoniyat yonida uni o'zingiz qanday tekshirishni ham ko'rsatamiz.

3.1 sibling-index() va sibling-count(): tartib raqami

Micro-interaktsiyalar darsida ro'yxat elementlari birin-ketin paydo bo'lishi uchun har biriga --i raqamini qo'lda berdik — CSP inline style ni to'sgani uchun HTML'da emas, li:nth-child(2) { --i: 1; } kabi alohida qoidalar bilan. Element qo'shilsa, qoida ham qo'shilishi kerak edi. sibling-index() — elementning ota ichidagi tartib raqami (1 dan boshlab), sibling-count() — qo'shnilar soni. Endi raqamni qo'lda yozish shart emas:

<style>
  body { font-family: system-ui, sans-serif; }
  ul { list-style: none; padding: 0; }
  li {
    margin-block: 4px;
    padding: 6px 10px;
    color: #fffaf0;
    background: #2f6b3a;
    width: calc(sibling-index() * 60px + 80px);
  }
</style>
<ul>
  <li>Osh</li>
  <li>Lag'mon</li>
  <li>Manti</li>
  <li>Ko'k choy</li>
</ul>

Nimaga qarang: to'rtta yashil qator zinapoya kabi — har biri oldingisidan 60 piksel uzun. Bitta qoida — na HTML'da, na :nth-child() larda qo'lda raqam yo'q. Animatsiyada xuddi shu usul: animation-delay: calc(sibling-index() * 80ms);.

Holat: 2026-yil 18-avgustdan Baseline ("yangi") — Chrome 138, Firefox 154, Safari 26.2. Bu ro'yxatdagi eng "tayyor" imkoniyat. Eski brauzerda calc() noto'g'ri bo'ladi va butun deklaratsiya tashlanadi — zaxira qiymatni oldinroq yozing.

3.2 if(): shartli qiymat

if() — qiymatni shartga qarab tanlaydi. CSS o'zgaruvchilari 2 dagi "o'zgaruvchi — kalit" usulining qisqa yozuvi:

.taom-karta {
  --holat: bor;
  background: if(
    style(--holat: tugadi): #e8e2d6;
    else: #fffaf0
  );
}

.taom-karta.tugadi {
  --holat: tugadi;
}

Chrome'da tekshirdik: --holat: tugadi bo'lgan kartaning foni kulrang-qum rangga o'tdi. Ichida style() dan tashqari media() va supports() shartlari ham bo'la oladi.

Holat: faqat Chrome (137 dan). Safari va Firefox'da yo'q. Hozir ishlatsangiz: avval oddiy qiymat, keyin if() li qator — eski brauzer ikkinchisini tashlaydi.

3.3 Turlangan attr(): atributdan son va rang

Pseudo-elementlar darsida content: attr(href) ni ko'rgansiz — u faqat matn qaytaradi va faqat content da ishlaydi. Yangi attr() istalgan xususiyatda va istalgan tur bilan ishlaydi:

/* HTML: <div class="reyting" data-foiz="80"></div> */
.reyting {
  width: attr(data-foiz type(<percentage>), 0%);
}

Chrome'da tekshirdik: data-en="120px" va attr(data-en type(<length>), 10px) — element eni 120 piksel bo'ldi. Vergul ortidagi qiymat — atribut bo'lmasa yoki noto'g'ri bo'lsa ishlatiladigan zaxira.

Holat: Chrome 133 va Firefox 155 da bor, Safari'da yo'q — Baseline emas. Interop 2026 yo'nalishlari ro'yxatida bor (pastda).

3.4 @function: o'z funksiyangiz

@function — CSS'da takrorlanadigan hisobni nom bilan saqlash. Sass 2 darsida buni Sass'da ko'rasiz — endi toza CSS'da:

@function --ikki-barobar(--x) {
  result: calc(var(--x) * 2);
}

.aksiya {
  padding: --ikki-barobar(0.5rem);
}

Chrome'da tekshirdik: width: --ikki-barobar(50px) — 100 piksel. Holat: faqat Chrome (139 dan). Sass kabi vositalar bu ishni hali uzoq vaqt qiladi.

3.5 corner-shape: "squircle" burchak

border-radius burchakni doira yoyi bilan yumaloqlaydi. corner-shape yoy shaklini o'zgartiradi: squircle (kvadrat va doira orasidagi yumshoq shakl — telefon ilova belgilaridagi kabi), bevel (qiya kesik), scoop (ichkariga o'yilgan), notch (tishli).

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; flex-wrap: wrap; gap: 16px; }
  .b {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    color: #fffaf0;
    font-size: 13px;
    background: #2f6b3a;
    border-radius: 30px;
  }
  .s { corner-shape: squircle; }
  .v { corner-shape: bevel; }
  .o { corner-shape: scoop; }
</style>
<div class="qator">
  <div class="b">round</div>
  <div class="b s">squircle</div>
  <div class="b v">bevel</div>
  <div class="b o">scoop</div>
</div>

Nimaga qarang: to'rtta bir xil border-radius: 30px li kvadrat. Birinchisi — oddiy yumaloq burchak. Ikkinchisi yumshoqroq "squircle", uchinchisi burchaklari qiya kesilgan, to'rtinchisi burchaklari ichkariga o'yilgan. Chrome bo'lmagan brauzerda to'rttasi ham oddiy yumaloq — zaxira o'z-o'zidan.

Holat: faqat Chrome (139 dan). border-radius doim yoniga yoziladi — u zaxira ham, corner-shape uchun o'lcham ham.

3.6 zoom: eski xususiyat — yangi standart

zoom elementni kattalashtiradi va, transform: scale() dan farqli, layout'ni ham o'zgartiradi. U ko'p yillar nostandart edi (Firefox'da yo'q edi). Firefox 126 qo'shgach, Baseline ma'lumotiga ko'ra 2024-yil 14-maydan Baseline, spetsifikatsiyasi esa endi yozilmoqda. Interop 2026 da brauzerlar uning xulqini tekislaydi.

Ogohlantirish: zoom bilan responsive dizayn qilmang — matn o'lchamini rem va clamp() boshqaradi (Fluid tipografiya). zoom — eski kodda uchraydi, va ba'zan ichki vositalarda (masalan, rasm "lupa"si) foydali.

3.7 ::scroll-button va ::scroll-marker: JS'siz karusel

Skroll xulqi va scroll-snap darsida gorizontal lentani scroll-snap bilan "magnitli" qilgan edik. Oldinga-orqaga tugmalari va pastdagi nuqtalar uchun esa JavaScript kerak edi. Endi ularni CSS yaratadi. Kodda uchta yangi narsa bor:

• ::scroll-marker — har element uchun bitta nuqta; scroll-marker-group: after nuqtalarni lentadan keyin bir guruhga teradi.
• :target-current — hozir ko'rinib turgan elementning nuqtasi.
• ::scroll-button(left) va (right) — orqaga va oldinga tugmalari.

<style>
  body { font-family: system-ui, sans-serif; }
  .lenta {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-marker-group: after;
    max-width: 320px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lenta li {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 32px 0;
    text-align: center;
    color: #fffaf0;
    background: #2f6b3a;
  }
  .lenta li::scroll-marker {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c9d6cf;
  }
  .lenta li::scroll-marker:target-current {
    background: #2f6b3a;
  }
  .lenta::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 320px;
    padding-top: 8px;
  }
  .lenta::scroll-button(right) {
    content: "▶" / "Keyingi taom";
  }
  .lenta::scroll-button(left) {
    content: "◀" / "Oldingi taom";
  }
</style>
<ul class="lenta">
  <li>Osh — 35 000 so'm</li>
  <li>Lag'mon — 28 000 so'm</li>
  <li>Manti — 30 000 so'm</li>
</ul>

Nimaga qarang (Chrome'da): yashil lentada "Osh", ostida "◀" va "▶" tugmalari va uchta nuqta — birinchisi to'q yashil. "◀" xira: orqaga yo'l yo'q, brauzer uni o'zi o'chirib qo'ydi. "▶" tugmasi bosilsa, lenta keyingi taomga suriladi va to'q nuqta ham ko'chadi. Tugmalar haqiqiy tugma: Tab bilan keladi, ekran o'quvchi "Keyingi taom" deb o'qiydi (content dagi / dan keyingi matn — Pseudo-elementlar). Chrome'dan boshqa brauzerda — oddiy gorizontal aylanadigan lenta, tugma va nuqtasiz: ma'lumot yo'qolmaydi.

Holat: faqat Chrome (135 dan). To'liq karuselni Karusel va gorizontal skroll lentasi darsida quramiz.

3.8 reading-flow va @container scroll-state()

Ikkita qisqa, lekin amaliy imkoniyat:

• reading-flow — align-self va order darsidagi muammoning yechimi. order yoki grid joylashuvi ko'rinish tartibini o'zgartirsa, Tab baribir HTML tartibida yurardi. reading-flow: flex-visual (yoki grid-rows) — Tab ekrandagi tartibga ergashadi. Holat: faqat Chrome (137 dan).
• @container scroll-state() — konteynerning skroll holatiga qarab stil. Masalan, sticky header "yopishganda" soya chiqsin: container-type: scroll-state va @container scroll-state(stuck: top) { ... }. Ilgari buning uchun JavaScript kuzatuvchisi kerak edi. Holat: faqat Chrome (133 dan).

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  header > nav {
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
  }
}

Chrome'da tekshirdik: container-type: scroll-state qo'llab-quvvatlanadi. Header yopishganda nav ostida soya paydo bo'ladi, sahifa tepasida esa soya yo'q.

Tekshirib ko'ring: Yuqoridagi sakkiz imkoniyatdan qaysi birini bugun hech qanday zaxirasiz, bemalol ishlatish mumkin?

4. Qayerdan kuzatish

4.1 Brauzerlar o'zi nima deydi

Chrome Status'da har imkoniyatning sahifasi bor: qaysi versiyada yoqildi, spetsifikatsiya havolasi, boshqa brauzerlarning pozitsiyasi: Safari va Firefox jamoalari imkoniyatga ijobiy, neytral yoki salbiy qarashi. Bu belgi imkoniyatning kelajagini oldindan aytadi: ikki boshqa dvigatel "qarshi" bo'lsa, u uzoq vaqt Chrome'ning o'zida qolishi mumkin.

4.2 Hammasini birlashtiradiganlar

• web-features va Baseline. web-features — brauzer ishlab chiqaruvchilar birga yuritadigan ochiq ma'lumotlar to'plami: har imkoniyat qaysi brauzerda, qachondan bor. MDN'dagi har xususiyat sahifasi tepasidagi "Baseline" belgisi shu ma'lumotdan. Uni jadval ko'rinishida "Web Features Explorer" va webstatus.dev saytlarida ko'rasiz. Darslarimizdagi Baseline sanalari ham shu ma'lumotdan olingan.
• caniuse.com — imkoniyatni qidirib, har brauzer versiyasi bo'yicha jadvalni ko'rasiz. Foydalanuvchilarning necha foizi uni qo'llab-quvvatlashini ham ko'rsatadi (Brauzer mosligi).
• Interop — Apple, Google, Microsoft, Mozilla va Igalia har yili birgalikda tanlaydigan yo'nalishlar: shu yil brauzerlar ularni bir xil ishlashiga harakat qiladi. Interop 2026 2026-yil 12-fevralda e'lon qilindi, 20 ta yo'nalishi bor. CSS'ga oidlari: anchor positioning, container style queries, dialog va popover qo'shimchalari, scroll-driven animatsiyalar, view transitions, attr(), contrast-color(), custom highlights, scroll snap, shape(), zoom. Natijalarni wpt.fyi/interop-2026 sahifasida kuzatasiz. Interop'ga kirgan imkoniyat — yaqin kelajakda hamma brauzerga keladigan imkoniyat.
• State of CSS (stateofcss.com) — dasturchilar orasida har yili o'tadigan so'rovnoma. 2025-yilgi so'rovnomada 5 506 kishi qatnashgan. Undan ikki narsani bilasiz: qaysi imkoniyatni ko'pchilik allaqachon ishlatyapti va qaysilarini eng ko'p kutyapti. Brauzerlar ham undan ustuvorlik tanlashda foydalanadi.

4.3 O'z tizimingiz

Hammasini har kuni o'qish shart emas. Oddiy, lekin ishlaydigan tartib:

1. Oyiga bir marta — "New in Chrome" va WebKit blogi sarlavhalari (10 daqiqa).
2. Yangi narsa ko'rsangiz — MDN'dagi Baseline belgisi va Chrome Status'dagi boshqa brauzerlar pozitsiyasi.
3. Loyihada ishlatishdan oldin — caniuse'da auditoriyangiz foizi va @supports zaxirasi.
4. Yiliga bir marta — Interop yo'nalishlari va State of CSS natijalari: "keyingi yil nimani o'rganay?"

Inglizcha manbalar qo'rqitmasin: sarlavhalarni brauzerning tarjima funksiyasi bilan o'qish ham yetadi, kod misollari esa tarjimasiz tushunarli.

Tekshirib ko'ring: Chrome Status'da yangi imkoniyat sahifasini ochdingiz. Safari va Firefox jamoalari unga "negative" (salbiy) pozitsiyada. Bu imkoniyatni loyihangizning asosiy qismiga qo'yasizmi?

5. Qachon ishlatish kerak

5.1 Qaror jadvali

Uchinchi qatorning ma'nosi — progressive enhancement (Brauzer mosligi): asos hamma joyda ishlaydi, yangilik — ustidagi qo'shimcha. Bu qismdagi misollarni eslang:

• corner-shape yo'q — oddiy yumaloq burchak. Hech narsa yo'qolmadi — mumkin.
• ::scroll-button yo'q — lentani barmoq bilan aylantirish mumkin. Mumkin.
• if() bilan tugagan taomning narxini yashirish — if() yo'q brauzerda mijoz tugagan taomni buyurtma qiladi. Mumkin emas — ma'lumot yoki ish yo'qolyapti.

5.2 @supports bilan ajratish

Yangilikni @supports ichiga olish uni boshqa qoidalardan ajratadi va niyatni aniq ko'rsatadi:

.taom-karta {
  border-radius: 1rem;
}

@supports (corner-shape: squircle) {
  .taom-karta {
    border-radius: 1.5rem;
    corner-shape: squircle;
  }
}

"Squircle" bir xil border-radius da oddiy burchakdan "kichikroq" ko'rinadi — shuning uchun uni biladigan brauzerda radiusni biroz oshirdik. @supports bo'lmasa, eski brauzer 1.5rem li oddiy, ancha dumaloq burchakni olardi.

5.3 Auditoriyangizni biling

"Eski brauzer" — kim? Sayt analitikasi (masalan, Google Analytics, Plausible — kursda keyinroq ko'ramiz) mijozlaringiz qaysi brauzerda ekanini ko'rsatadi. Toshkentdagi choyxona saytining mehmonlari asosan Android'dagi Chrome'da bo'lishi mumkin. Bank saytida esa korporativ kompyuterlardagi eski brauzerlar ko'p bo'ladi. PostCSS va browserslist darsida bu ro'yxatni vositalarga qanday aytishni o'rganamiz.

Tekshirib ko'ring: Jamoadoshingiz: "field-sizing Baseline bo'ldi, rows atributini hamma joydan o'chiramiz" dedi. Nima deysiz?

6. Ko'p uchraydigan xatolar

6.1 "Menda ishlayapti"

Dasturchi Chrome'da ishlaydi va Chrome'ga xos imkoniyat saytni "buzadi" — Safari'da tugma yo'q, forma ishlamaydi. Tuzatish: har yangi imkoniyatni MDN'dagi Baseline bilan tekshiring va uni bilmaydigan brauzerda sinang (yoki uni @supports not bilan o'chirib ko'ring).

6.2 Eskirgan maqola

2022-yilgi maqola ":has() hech qayerda ishlamaydi" deydi — bugun u Baseline "keng tarqalgan". Aksincha ham bo'ladi: maqoladagi "tez orada keladi" imkoniyat bekor qilingan bo'lishi mumkin. Tuzatish: maqola sanasiga qarang, holatni MDN va Chrome Status'dan qayta tekshiring.

6.3 Nomlar o'zgaradi

Yangi imkoniyat standartlashguncha nomi o'zgarishi mumkin. Anchor positioning'da shunday bo'lgan: dastlabki inset-area keyin position-area ga, position-try-options esa position-try-fallbacks ga aylandi. Eski maqoladagi kod ishlamasa — nom o'zgarmaganmi, tekshiring. Tuzatish: kodni MDN'dagi joriy sintaksis bilan solishtiring.

6.4 Tekshiruv vositasi "xato" deydi

VS Code yoki Stylelint (CSS kodini tekshiradigan vosita — Stylelint va Prettier darsida) yangi sintaksisni tanimasligi mumkin (if(), @function). Bu kodingiz noto'g'ri degani emas — vositaning lug'ati orqada. Tuzatish: brauzerda tekshiring; vositada o'sha qatorni istisno qiling va sababini izohda yozing.

7. Mashqlar

Mashqlarni kurs/mashqlar/06/ papkasida bajaring.

1-mashq (oson): Holatni aniqlang

MDN va web-features'ga qarab (Web Features Explorer yoki MDN'dagi Baseline belgisi), uchta imkoniyatning holatini jadvalga yozing: text-wrap: balance, field-sizing, interestfor atributi. Har biriga: "keng tarqalgan", "yangi" yoki "Baseline emas" va sana (bo'lsa).

Ishora: interestfor — HTML atributi, Popover API darsida tilga olingan tooltip usuli; web-features'da u "Interest invokers" nomi bilan.

2-mashq (o'rta): Zinapoya menyu — zaxira bilan

«Bahor» menyusidagi har li ga animation-delay kerak: birinchisi 0, keyingilari 80 millisekunddan kechiksin. sibling-index() ni ishlating, lekin uni bilmaydigan brauzerda barcha elementlar kechikishsiz, bir vaqtda paydo bo'lsin.

Ishora: birinchi qatorda oddiy qiymat, ikkinchisida sibling-index() — «Kechirimli o'qish»; birinchi element uchun sibling-index() 1 ga teng.

@media (prefers-reduced-motion: no-preference) {
  .menyu li {
    animation: paydo 300ms ease-out both;
    animation-delay: 0ms;
    animation-delay: calc((sibling-index() - 1) * 80ms);
  }
}

@keyframes paydo {
  from {
    opacity: 0;
    translate: 0 0.5rem;
  }
}

3-mashq (qiyin): Stajyorning "zamonaviy" kartasi

Stajyor Chrome'da ishlaydigan karta yozdi va "hammasi ishlayapti" dedi:

.taom-karta {
  corner-shape: squircle;
  border-radius: 1.5rem;
  display: if(style(--holat: tugadi): none; else: block);
}

.taom-karta .narx {
  width: attr(data-foiz type(<percentage>));
}

Safari'dagi mehmon: (1) tugagan taomlar ham ko'rinadi va buyurtma qilinadi; (2) narx chizig'i yo'q; (3) burchaklar juda dumaloq. Har muammoni izohlang va qaysi imkoniyatni progressive enhancement sifatida qoldirish, qaysinisini almashtirish kerakligini hal qiling.

Ishora: «Qaror jadvali» — "ish yo'qolyaptimi?" savoli. hidden atributi — display.

.taom-karta {
  border-radius: 1rem;
}

@supports (corner-shape: squircle) {
  .taom-karta {
    border-radius: 1.5rem;
    corner-shape: squircle;
  }
}

.taom-karta .narx {
  width: 50%;
  width: attr(data-foiz type(<percentage>), 50%);
}

4-mashq: Portfolio qadami — kuzatuv ro'yxati va bitta "bezak"

Ikki qism:

1. Kuzatuv ro'yxati. Portfolio papkangizda docs/css-kuzatuv.md faylini oching (Markdown darsidagi yozuv). Unga to'rtta manba havolasini va bu darsdagi uchta imkoniyatni yozing: holati, sana, "qachon qayta tekshiraman". Uch oydan keyin faylni ochib, holatni yangilang.
2. Bitta bezak. .loyihalar kartalariga (.loyihalar > article) corner-shape: squircle ni progressive enhancement sifatida qo'shing. Chrome'da ko'ring, keyin DevTools'da @supports ni vaqtincha o'chirib, zaxira holatni tekshiring.

Ishora: kartalar chegarasi Yakuniy loyiha da border-radius: 0.5rem. "Squircle" bir xil radiusda kichikroq ko'rinadi.

# CSS kuzatuv ro'yxati

Manbalar: chromestatus.com, webkit.org/blog,
developer.mozilla.org (Firefox for developers), wpt.fyi/interop-2026

| Imkoniyat | Holat | Sana | Qayta tekshirish |
|---|---|---|---|
| corner-shape | faqat Chrome 139+ | 2026-09 | 2026-12 |
| sibling-index() | Baseline: yangi | 2026-08-18 | 2027-02 |
| shape() | Baseline: yangi | 2026-02-24 | 2026-12 |

/* Squircle burchak — faqat brauzer bilsa (Yangi paydo bo'layotgan
   CSS darsi) */
@supports (corner-shape: squircle) {
  .loyihalar > article {
    border-radius: 1rem;
    corner-shape: squircle;
  }
}

8. Real ishda

• Frontend jamoalarida kimdir "texnik radar" yuritadi: yangi imkoniyatlar, holati va jamoa qarori ("sinaymiz", "kutamiz", "ishlatamiz"). Siz tuzgan kuzatuv ro'yxati — uning kichik nusxasi.
• Kutubxonalar kichrayadi. Har yangi CSS imkoniyati bitta JavaScript kutubxonasini keraksiz qiladi: anchor positioning — Floating UI'ni, field-sizing — "autosize" skriptlarini, karusel pseudo-elementlari — slayder kutubxonalarini. Bu sahifani tezlashtiradi.
• Intervyuda so'raladi: "Baseline nima?", "Yangi CSS imkoniyatini loyihaga qachon olib kirasiz?", "Yaqinda qaysi yangi CSS imkoniyati sizni qiziqtirdi?". Oxirgi savolga endi aniq javobingiz bor.

Xulosa

• Yangi CSS yo'li: qoralama → flag → bitta brauzer → Baseline "yangi" → 30 oydan keyin "keng tarqalgan".
• Flag orqasidagi imkoniyat foydalanuvchilarda ishlamaydi — faqat tajriba uchun.
• 2026-yil: sibling-index() — Baseline; if(), @function, corner-shape, reading-flow, karusel pseudo-elementlari — hozircha faqat Chrome; turlangan attr() — Chrome va Firefox.
• Manbalar: Chrome Status, "New in Chrome", WebKit blogi, MDN Firefox yozuvlari, web-features/Baseline, caniuse, Interop, State of CSS.
• Qoida: ish yoki ma'lumot yo'qolmasa — @supports va zaxira bilan ishlating; yo'qolsa — kuting.

Keyingi dars: CSS reset va normalize — brauzerlarning o'z stillarini tekislab, loyiha uchun toza boshlang'ich nuqta yasaymiz.

Manbalar

• web-features va Baseline — web-platform-dx.github.io/web-features-explorer, webstatus.dev
• Chrome Platform Status — chromestatus.com; "New in Chrome" — developer.chrome.com/blog
• WebKit blog — webkit.org/blog; MDN "Firefox releases for developers" — developer.mozilla.org
• "Interop 2026" — web.dev/blog/interop-2026; dashboard — wpt.fyi/interop-2026
• State of CSS 2025 — 2025.stateofcss.com
• MDN: "if()", "attr()", "sibling-index()", "@function", "corner-shape", "::scroll-button()", "reading-flow" — developer.mozilla.org