Veb standartlari va brauzer mosligi: WHATWG, W3C, TC39, caniuse va Baseline

Qisqacha: Veb qoidalarini (standartlarni) xalqaro guruhlar yozadi: HTML'ni — WHATWG, CSS'ni — W3C, JavaScript'ni — TC39. Brauzerlar shu qoidalarni o'z dvigatellarida amalga oshiradi, lekin har xil tezlikda. Yangi imkoniyatni ishlatishdan oldin MDN'dagi Baseline belgisi yoki caniuse.com orqali u qaysi brauzerlarda ishlashini tekshirasiz. "Widely available" belgisi bo'lsa — bemalol ishlatish mumkin.

Bu darsda

• WHATWG, W3C, TC39 va IETF qaysi qoidalarni yozishini ayta olasiz.
• Yangi imkoniyat standartdan brauzergacha qanday yo'l bosishini tushuntirasiz.
• MDN va caniuse.com'da imkoniyatning brauzer mosligini tekshira olasiz.
• Baseline'ning "Newly available" va "Widely available" holatlarini farqlaysiz.
• Progressive enhancement va feature detection g'oyasini tushuntira olasiz.

Oldin bilishingiz kerak: Brauzer tuzilishi va dvigatellar.

1. Nega bu kerak?

1990-yillarning oxirida "brauzerlar urushi" bo'lgan. Netscape va Microsoft Internet Explorer bir-biri bilan raqobatlashib, har biri faqat o'zida ishlaydigan teglar o'ylab topgan. Saytlarda "Bu sahifa Internet Explorer'da yaxshi ko'rinadi" degan yozuvlar paydo bo'lgan. Dasturchilar bitta sayt uchun ikki xil kod yozishga majbur edi.

Bugun Chrome, Firefox va Safari bir xil qoidalarga amal qiladi. Buni standartlar ta'minlaydi.

Lekin muammo to'liq yo'qolmagan. Siz internetda chiroyli yangi CSS imkoniyatini ko'rdingiz. Uni saytingizda ishlatsangiz, eski iPhone'dagi foydalanuvchida sahifa buzilmaydimi? Bu darsda shu savolga qanday javob topishni o'rganamiz.

2. Standart nima va uni kim yozadi?

2.1 Rozetka o'xshatishi

Do'kondan choynak olasiz — u uyingizdagi rozetkaga mos keladi. Qo'shningiznikiga ham, Samarqanddagi mehmonxonaga ham mos. Nega? Chunki rozetka va vilka standart bo'yicha yasalgan: shakli, kuchlanishi hammaga bir xil.

Veb standarti — brauzer HTML, CSS va JavaScript'ni qanday tushunishi kerakligini batafsil yozib qo'ygan hujjat. Bunday hujjatni spetsifikatsiya (specification, qisqasi spec) deyishadi. Brauzerlar spetsifikatsiyaga amal qilsa, bitta sayt hamma brauzerda bir xil ishlaydi.

2.2 To'rtta asosiy tashkilot

Internet hech bir kompaniyaga tegishli emas. Qoidalarni xalqaro guruhlar yozadi:

WHATWG — Apple, Google, Microsoft va Mozilla muhandislari boshqaradigan guruh. Ular HTML'ni "5-versiya", "6-versiya" deb chiqarmaydi. HTML — Living Standard (tirik standart): doimo yangilanib boradigan bitta hujjat.

W3C (World Wide Web Consortium) — vebning ixtirochisi Tim Berners-Li 1994-yilda asos solgan tashkilot. CSS qoidalari va WCAG shu yerda yoziladi. WCAG — nogironligi bor odamlar (masalan, ko'zi ojizlar) ham saytdan foydalana olishi uchun qoidalar.

TC39 — JavaScript tilining qo'mitasi. JavaScript'ning rasmiy standart nomi — ECMAScript. Har yili yangi versiyasi chiqadi: ES2025, ES2026.

IETF — HTTP, TLS va DNS kabi tarmoq qoidalarini yozadi. Ularni shu qismda allaqachon o'rgandingiz.

Tekshirib ko'ring: HTML'ga yangi teg qo'shish taklifi qaysi tashkilotga yuboriladi? CSS'ga yangi xususiyat-chi?

3. G'oyadan brauzergacha

3.1 Yangi imkoniyat qanday tug'iladi

Yangi imkoniyat bir kunda paydo bo'lmaydi. U bir necha bosqichdan o'tadi:

flowchart TD
  A["Dasturchilar ehtiyoji"] --> B["Taklif: WHATWG, W3C yoki TC39"]
  B --> C["Spetsifikatsiya yoziladi"]
  C --> D["Dvigatellar qo'shadi: Blink, Gecko, WebKit"]
  D --> E["Baseline: Newly available"]
  E --> F["30 oydan keyin: Widely available"]

Eng muhim nuqta — dvigatellar qo'shishi. Oldingi darslardan bilasiz: uchta asosiy dvigatel bor. Chrome yangi imkoniyatni bugun qo'shishi, Safari esa bir yildan keyin qo'shishi mumkin. Shu oraliqda imkoniyat "hamma joyda" ishlamaydi.

3.2 TC39 bosqichlari

JavaScript'da bu jarayon aniq raqamlangan. Taklif bosqichlardan o'tadi: Stage 0 (g'oya), 1, 2, 2.7, 3 va Stage 4 (standartga kirdi). Stage 2.7 2024-yilda qo'shilgan. Stage 4 ga yetgan imkoniyat keyingi yilgi ECMAScript versiyasiga kiradi.

Buni yodlash shart emas. "Stage 3" degan yozuvni ko'rsangiz, bilib qo'ying: imkoniyat hali rasmiy standartga kirmagan.

4. MDN va caniuse.com

4.1 MDN Web Docs

MDN Web Docs — veb-dasturchilarning asosiy qo'llanmasi. Unda har bir HTML teg, CSS xususiyati va JavaScript imkoniyati misollar bilan tushuntirilgan. Uni Mozilla boshqaradi, Google, Microsoft va boshqa kompaniyalar ham hissa qo'shadi.

Har sahifaning tepasida moslik belgisi turadi — Baseline (uni pastroqda ko'ramiz). Pastda esa Browser compatibility jadvali: har brauzerning qaysi versiyasidan boshlab imkoniyat ishlashi. MDN'dan to'g'ri foydalanishni Hujjat o'qish darsida mashq qilamiz.

4.2 caniuse.com

caniuse.com ("Can I use" — "ishlata olamanmi?") — imkoniyat qaysi brauzerlarda ishlashini ko'rsatadigan jadval-sayt. Qidiruvga imkoniyat nomini yozasiz va ko'rasiz:

• har brauzer va uning versiyalari ro'yxati;
• yashil katak — ishlaydi, qizil — ishlamaydi, sariq — qisman ishlaydi;
• Global foizi — dunyodagi foydalanuvchilarning necha foizi bu imkoniyatli brauzerda.

Masalan, imkoniyat 96% ko'rsatsa, dunyodagi 100 foydalanuvchidan taxminan 96 tasida ishlaydi.

Diqqat: 4% ham kam emas — millionlab odam. Sizning auditoriyangiz boshqacha bo'lishi ham mumkin. Mijozlaringiz eski arzon Android telefonlardan kirsa, ular orasida eski brauzer ulushi dunyo o'rtachasidan yuqori bo'ladi.

5. Baseline: yagona oddiy belgi

5.1 Muammo

Ilgari dasturchi o'nlab brauzer versiyasini alohida kuzatishi kerak edi. 2023-yilda brauzer ishlab chiquvchilari oddiy yagona belgi kiritdi — Baseline (asosiy chiziq). Uni WebDX guruhi yuritadi, belgisi MDN'da va boshqa saytlarda ko'rinadi.

Baseline asosiy brauzerlar to'plamiga qaraydi: Chrome, Edge, Firefox va Safari — kompyuter va telefon versiyalari bilan.

5.2 Uch holat

Nega 30 oy? Odamlar telefon va kompyuterini darhol yangilamaydi. 30 oy (2.5 yil) ichida eski brauzerlar deyarli yo'qoladi.

5.3 Real misollar (2026-yil sentabr holati)

• CSS'dagi :has() selektori 2023-yil 19-dekabrda Newly available bo'ldi (Firefox oxirgi bo'lib qo'shdi). 30 oy o'tib, 2026-yil 19-iyunda Widely available bo'ldi.
• HTML'dagi <dialog> elementi (sahifa ustida ochiladigan oyna) — 2024-yildan Widely available.
• popover imkoniyati 2025-yil yanvarda Newly available bo'ldi. Widely available bo'lishi — 2027-yil iyulda.

Bu imkoniyatlarning o'zini HTML va CSS qismlarida o'rganasiz. Hozir muhimi — belgini o'qish.

Tekshirib ko'ring: Imkoniyat 2026-yil martda Newly available bo'ldi. Qachon Widely available bo'ladi?

6. Evergreen brauzerlar

Eski zamonda brauzer yangi versiyasini alohida yuklab o'rnatish kerak edi. Ko'p odam buni qilmasdi va yillab eski brauzerda o'tirardi. Internet Explorer 2022-yilda butunlay to'xtatildi.

Bugungi Chrome, Edge va Firefox — evergreen ("doim yashil") brauzerlar. Ular fonda o'zi yangilanadi. Chrome va Firefox har 4 haftada yangi versiya chiqaradi. Yangi imkoniyat bir-ikki oyda millionlab foydalanuvchiga yetib boradi.

Safari biroz boshqacha: u ko'pincha operatsion tizim bilan birga yangilanadi. iPhone egasi iOS'ni yangilamasa, Safari ham eskicha qoladi. Eski iPhone'lar esa yangi iOS'ni umuman olmasligi mumkin. Shuning uchun "sayt eski iPhone'da buzildi" — dasturchilar tez-tez eshitadigan gap.

7. Progressive enhancement va feature detection

7.1 Lift o'xshatishi

Yaxshi binoda zina ham, lift ham bor. Zina — hamma uchun ishlaydigan asosiy yo'l. Lift — qulaylik: bor bo'lsa ajoyib, buzilsa ham odamlar zina bilan chiqaveradi.

Progressive enhancement (bosqichma-bosqich boyitish) — shu g'oya vebda:

1. Avval sahifaning asosiy vazifasi eng oddiy brauzerda ham ishlaydigan qilib quriladi.
2. Keyin yangi imkoniyatli brauzerlar uchun qulayliklar qo'shiladi.

Masalan, buyurtma formasi JavaScript'siz ham yuboriladi. JavaScript ishlasa — sahifa yangilanmasdan, chiroyli xabar bilan yuboriladi.

Teskari yondashuv — graceful degradation ("yumshoq pasayish"): avval eng yangi brauzer uchun yoziladi, keyin eski brauzerlarda butunlay sinib qolmasligi uchun tuzatiladi.

7.2 Feature detection — imkoniyatni tekshirish

Brauzer nomini emas, imkoniyatning o'zini tekshirish kerak. Bu feature detection (imkoniyatni aniqlash) deb ataladi. CSS'da buning uchun @supports bor:

.menyu {
  background-color: white;
}

@supports (backdrop-filter: blur(8px)) {
  .menyu {
    background-color: transparent;
    backdrop-filter: blur(8px);
  }
}

• Birinchi qoida — hamma brauzer uchun: menyu foni oq.
• @supports (...) — "agar brauzer qavs ichidagini tushunsa, ichidagi qoidalarni qo'lla" degani.
• backdrop-filter: blur(8px) — menyu orqasidagi narsalarni xiralashtirish ("muzli shisha" effekti).

Natija: yangi brauzerda — chiroyli shisha effekti, eskisida — oddiy oq fon. Hech kimda sahifa buzilmaydi. CSS'ni 05-qismda, @supports ni esa Brauzer mosligi darsida amalda yozasiz.

Maslahat: CSS o'zi ham kechirimli: brauzer tushunmagan CSS qatorini jimgina o'tkazib yuboradi va qolganini qo'llayveradi. Bu progressive enhancement'ni ancha osonlashtiradi.

JavaScript'da ham shunday tekshiruv bor. Yetishmayotgan imkoniyatni eski brauzerga JavaScript bilan "yamab" beradigan kod esa polyfill deb ataladi. Ikkalasini JS versiyalari va brauzer mosligi darsida ko'ramiz.

Tekshirib ko'ring: Brauzer @supports blokidagi imkoniyatni tushunmasa, menyu qanday ko'rinadi?

8. Ko'p uchraydigan xatolar

8.1 Brauzerni nomidan aniqlash

Har bir brauzer serverga o'zini User-Agent sarlavhasi bilan tanishtiradi (sarlavhalar darsi). Ba'zi dasturchilar "matnda Chrome so'zi bo'lsa — Chrome" deb tekshiradi. Edge'ning User-Agent matniga qarang:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/154.0.0.0 Safari/537.36 Edg/154.0.0.0

Bitta satrda Mozilla, AppleWebKit, Gecko, Chrome, Safari va oxirida Edg bor!

Nega shunday: tarixan saytlar brauzerni nomidan aniqlab, "begona" brauzerlarga yomon sahifa berardi. Yangi brauzerlar himoyalanish uchun raqiblari nomini ham yozib qo'ya boshladi. Natijada bu matnga ishonib bo'lmaydi.

Tuzatish: brauzer nomini emas, kerakli imkoniyatni tekshiring (feature detection).

8.2 Faqat o'z brauzeringizda tekshirish

Nega xato: sizning Chrome'ingiz eng oxirgi versiyada. Mijozingizning 4 yillik telefoni — yo'q.

Tuzatish: yangi imkoniyat uchun Baseline holatini tekshiring, saytni kamida uch dvigatelda sinang (dvigatellar darsi).

8.3 Tajribaviy imkoniyatni asosiy saytda ishlatish

Nega xato: "Limited availability" imkoniyat bitta brauzerda bor, boshqalarida yo'q. Unga to'liq tayangan sahifa boshqa brauzerlarda buziladi.

Tuzatish: bunday imkoniyatni faqat progressive enhancement bilan — zaxira yo'li bor holda ishlating.

8.4 Polyfill'ni hammaga yuklash

Nega xato: eski brauzerlar uchun yozilgan katta qo'shimcha kodni zamonaviy brauzerlar ham yuklab oladi. Sayt behuda og'irlashadi.

Tuzatish: qo'shimcha kodni faqat kerakli brauzerlarga berish. Buni loyiha vositalari bilan sozlashni Polyfill, browserslist va Baseline darsida o'rganamiz.

9. Mashqlar

1-mashq (oson): Kim yozadi?

Har vazifani qaysi tashkilot hal qiladi (WHATWG, W3C, TC39, IETF)?

1. HTML'ga yangi <search> tegini qo'shish:
2. JavaScript tiliga yangi imkoniyat qo'shish:
3. Ko'zi ojizlar uchun sayt qulayligi qoidalarini (WCAG) yangilash:
4. HTTP protokolining yangi versiyasini yozish:

2-mashq (o'rta): Baseline'ni o'qing

MDN'da uchta imkoniyatning belgisini ko'rdingiz (bugun — 2026-yil sentabr):

• A: "Baseline Widely available"
• B: "Baseline 2026, Newly available since March 2026"
• C: "Limited availability"

Saytingiz mijozlari orasida eski iPhone'lar ko'p. Har biri bo'yicha qaror qiling: bemalol ishlatasizmi, zaxira yo'l bilanmi yoki umuman ishlatmaysizmi?

3-mashq (qiyin): Nomidan aniqlash nega aldaydi

Dasturchi "matnda Safari so'zi bo'lsa — foydalanuvchi Safari'da" degan qoida yozdi. Qo'shimcha: iPhone'dagi Chrome ichida qaysi dvigatel ishlashini dvigatellar darsidan eslang.

1. Windows'dagi Chrome foydalanuvchisi qaysi guruhga tushib qoladi? Yuqoridagi Edge misoliga qarang — Chrome'ning satri deyarli bir xil, faqat oxirida Edg/... yo'q.
2. iPhone'dagi Chrome'da sahifa qaysi dvigatelda chiziladi va bu tekshiruv unga nima deydi?
3. To'g'ri yondashuv qanday?

10. Real ishda

• Loyiha sozlamasi. Real loyihalarda "qaysi brauzerlarni qo'llab-quvvatlaymiz" ro'yxati bir marta yoziladi. Masalan, Vite (loyihani yig'ib beruvchi vosita — kursda alohida o'rganamiz) 7-versiyadan boshlab standart holatda "Baseline Widely available" brauzerlariga moslab kod chiqaradi.
• Kod ko'rib chiqishda. Jamoadoshingiz yangi CSS imkoniyatini ishlatsa, birinchi savol: "Baseline holati qanday?"
• Intervyu savoli: "Progressive enhancement nima?", "Brauzerni User-Agent orqali aniqlash nega yomon?" — frontend intervyularida so'raladi.

Xulosa

• Veb qoidalarini xalqaro guruhlar yozadi: HTML — WHATWG, CSS — W3C, JavaScript — TC39, tarmoq protokollari — IETF.
• Yangi imkoniyat har dvigatelga har xil vaqtda qo'shiladi — shu oraliqda moslik muammosi bo'ladi.
• Moslikni MDN (Baseline belgisi va jadval) va caniuse.com'da tekshirasiz.
• Baseline: Limited → Newly available → 30 oydan keyin Widely available.
• Chrome, Edge, Firefox o'zi yangilanadi; Safari OS bilan birga yangilanadi.
• Brauzer nomini emas, imkoniyatni tekshiring. Asosiy vazifa hamma joyda ishlasin, qulaylik ustidan qo'shilsin.

Manbalar

• web.dev: Baseline — Baseline haqida rasmiy tushuntirish (ingliz tilida).
• caniuse.com — brauzer mosligi jadvallari.
• TC39 jarayoni — JavaScript takliflari bosqichlari.

Keyingi dars: Chrome DevTools I: Elements va Console — brauzerning ichiga qarash vositasini ochamiz: istalgan sahifaning HTML va CSS'ini ko'rib, jonli o'zgartirishni o'rganamiz.