Krossbrauzerlik: saytni qanday tekshirish va tuzatish

Qisqa javob

Zamonaviy brauzerlar ko‘pchilik standartlarda kelishgan, lekin hammasida emas va bir xil tezlikda emas. Agar saytning asosiy ssenariylari auditoriyangiz haqiqatan ishlatadigan barcha brauzerlarda ishlasa (piksel-piksel bir xil ko‘rinishi shart emas), u krossbrauzer hisoblanadi. Jarayon oddiy:

1. Qaysi brauzerlarni qo‘llab-quvvatlashingizni belgilang.
2. Build vositalarini aynan shu ro‘yxatga sozlang.
3. Funksiyadan foydalanishdan oldin qo‘llab-quvvatlanishini tekshiring va zaxira variant qiling.
4. Real qurilmalarda, ayniqsa iOS va ichki brauzerlarda test qiling.

Brauzerlar qayerda hali ham farq qiladi

• iOS va macOS’dagi Safari. U yangi imkoniyatlarni o‘z jadvali bo‘yicha chiqaradi. iOS’da barcha brauzerlar, jumladan Chrome ham, bitta WebKit dvigatelida ishlaydi, shuning uchun Safari xatosi — bu iPhone xatosi. Odatiy muammolar: 100vh manzil satrini hisobga olmaydi (dvh/svh birliklaridan foydalaning), sana va vaqt maydonlarining boshqacha interfeysi, videoni avtomatik ishga tushirish cheklovlari, cookie va xotira uchun qattiqroq qoidalar, overflow konteynerlar ichida aylantirish va position: sticky xususiyatlari.
• Mobil WebView’lar. Telegram, Instagram va Facebook havolalarni ichki brauzerda ochadi. Android’da bu odatda tizim WebView’i bo‘lib, u o‘sha telefondagi Chrome’dan eskiroq bo‘lishi mumkin; iOS’da — WebKit. Fayl yuklab olish, qalqib chiquvchi oynalar, window.open, to‘lov ssenariylari va safe-area’da farqlar bo‘lishini kuting. Telegram Mini Apps’ning esa o‘z viewport va mavzu mantig‘i bor.
• Eski Android va arzon telefonlar. Kuchsiz protsessorlar dasturchi noutbukida tez ko‘ringan og‘ir JavaScript va animatsiyalarni fosh qiladi.
• Forma elementlari, shriftlar va skrollbarlar. Nativ chizilish platformaga bog‘liq — ularni ongli ravishda stillang yoki nativ ko‘rinishni qabul qiling.

Funksiya qo‘llab-quvvatlanishini qanday tekshirish

CSS yoki JS imkoniyatidan foydalanishdan oldin uni Can I use yoki MDNdagi moslik jadvallarida ko‘ring. Agar biror narsa barcha maqsadli brauzerlarda qo‘llab-quvvatlanmasa, uchta variantdan birini tanlang:

• Progressiv yaxshilash: sahifa funksiyasiz ishlaydi va u bilan yaxshiroq bo‘ladi.
• CSS yoki JS’da zaxira variant bilan qo‘llab-quvvatlashni tekshirish.
• Agar funksiya muhim bo‘lsa, polifill.

.grid { display: flex; flex-wrap: wrap; }

@supports (display: grid) {
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}

browserslist’da maqsadni belgilang

browserslist — Autoprefixer, Babel, PostCSS, SWC va boshqa vositalarga qaysi brauzerlarni qo‘llab-quvvatlashni aytadigan yagona konfiguratsiya. U package.json yoki .browserslistrc fayliga yoziladi:

> 0.5%
last 2 versions
not dead
iOS >= 15

Ro‘yxatni standart sozlamalar bo‘yicha emas, o‘z analitikangiz bo‘yicha tuzing. Agar ko‘p tashrifchilar Android’dagi Telegram’dan kelsa, ular ishlatadigan WebView versiyalarini qo‘shing. npx browserslist buyrug‘i so‘rov nimaga aylanishini ko‘rsatadi.

Autoprefixer va polifillar

• Autoprefixer (PostCSS plagini) -webkit- kabi vendor prefikslarini faqat browserslist bo‘yicha kerak joyda qo‘shadi. Prefikslarni qo‘lda yozmang. Ko‘plab freymvorklarda u allaqachon ulangan.
• Transpilyatsiya (Babel, SWC, esbuild) zamonaviy sintaksisni eski dvigatellar tushunadigan kodga aylantiradi.
• Polifillar yetishmayotgan API’larni qo‘shadi (masalan, structuredClone yoki Intl imkoniyatlari). Faqat keraklilarini ulang: nuqtali import yoki differensial build hamma uchun ulkan bandldan yaxshiroq.

Eslab qoling: transpilyatsiya sintaksisni, polifillar yetishmayotgan API’larni tuzatadi, ikkalasi ham CSS maketi va WebKit chizish xatolarini tuzatmaydi.

Qanday test qilish kerak

Amaliy minimum: bitta iPhone, bitta o‘rta darajadagi Android, desktop Chrome, Safari va Firefox, shuningdek saytni Telegram ichidan va trafik keladigan boshqa ilovalardan ochib ko‘rish. iOS’ni debug qilish uchun telefonni Mac’ga ulang va Safari Web Inspector’dan foydalaning, Android uchun — chrome://inspect.

Ko‘p uchraydigan xatolar

• «Hamma shuni ishlatadi» deb faqat Chrome’da tekshirish.
• DevTools emulyatsiyasini haqiqiy iPhone deb hisoblash.
• O‘z analitikangizga qaramay, boshqaning browserslist’ini nusxalash.
• Ijtimoiy tarmoqlar trafigining katta qismi tushadigan ichki brauzerlarni unutish.
• Safari xatosini funksiya qo‘llab-quvvatlanishini tekshirish o‘rniga user-agent orqali tuzatish.