Veb-brauzerlar veb-saytlar mavjud ekan. Aslida, brauzerlar tajribangiz yoki saytni ko'rgan insonlar muhim tarkibiy qismidir, ammo barcha brauzerlar teng darajada yaratilmaydi. Brauzerlarda brauzerlarda veb-sahifangizni juda qadimgi va ko'proq zamonaviy brauzerlarda topilgan xususiyatlarni yo'qotgan iste'molchilarga ega bo'lish mutlaqo mumkin (va aslida ehtimoldan yiroq). Ushbu sayt veb-sayt dizayni va rivojlanishidagi so'nggi yutuqlardan foydalanadigan veb-saytlarni ishlab chiqish uchun jiddiy muammolarni keltirib chiqarishi mumkin . Agar sizning saytingizga ushbu qadimgi brauzerlardan biri yordamida kirsangiz va sizning so'nggi ilg'or usullaringiz ular uchun ishlamasa, siz umuman yomon tajribani etkazib berishingiz mumkin. Progressive enhancement - bu turli xil brauzerlar uchun veb-sahifa dizayni bilan ishlash strategiyasidir, ya'ni zamonaviy yordamga muhtoj bo'lmagan eski brauzerlar.
Progressive enhancement - veb-sahifalarni loyihalash usuli bo'lib, foydalanuvchi vositasi ko'proq xususiyatlarni qo'llab-quvvatlasa, veb-sahifada ko'proq xususiyatlar bo'ladi. Bu nozik tanazzulga uchragan dizayn strategiyasining qarama-qarshisidir. Ushbu strategiya dastlab eng zamonaviy brauzerlar uchun sahifalarni yaratadi va keyinchalik ular kamroq funktsional brauzerlar bilan yaxshi ishlashini ta'minlaydi - bu tajriba "nozik darajaga tushiradi". Progressiv takomillashtirish avval kam imkoniyatli brauzerlardan boshlanadi va u yerdan tajriba hosil qiladi.
Progressive Enhancement'dan qanday foydalanish kerak
Ilg'or kengaytmani qo'llagan holda veb-dizaynni yaratganingizda, birinchi navbatda, veb-brauzerlarning eng kam umumiy mezoni uchun ishlaydigan dizaynni yaratishdir. O'z navbatida, progressiv takomillashtirish sizning kontentingiz nafaqat pastki to'siq emas, balki barcha veb-brauzerlar uchun mavjud bo'lishi kerakligini bildiradi. Shuning uchun siz eski, eskirgan va kam imkoniyatli brauzerlarni qo'llab-quvvatlash orqali boshlaysiz. Agar yaxshi ishlaydigan sayt ular uchun, eng kamida, barcha tashrif buyuruvchilarga foydali tajriba taqdim etishi kerak bo'lgan asosiy chiziqni yaratganingizni bilasiz.
Ilgari kam imkoniyatli brauzerlar bilan ishlay boshlaganingizda, sizning barcha HTML kodlarınız to'g'ri va semantik ravishda to'g'ri bo'lishi kerak. Bu foydalanuvchilarning eng keng doirasi sahifani ko'rish va uni to'g'ri ko'rsatishini ta'minlashga yordam beradi.
Vizual dizayn uslublari va umumiy sahifa uslubi tashqi uslublar jadvallari yordamida qo'shilganligini unutmang. Bu, albatta, progressiv takomillashadigan joy. Barcha tashrif buyuruvchilar uchun ishlaydigan sayt dizayni yaratish uchun uslublar jadvalidan foydalanasiz. So'ngra, foydalanuvchi vositachilari funksionallikni qo'lga kiritishi uchun sahifani yaxshilash uchun qo'shimcha uslublar qo'shishingiz mumkin. Har bir inson bazaviy uslublarni oladi, ammo zamonaviy va zamonaviy uslublarni qo'llab-quvvatlaydigan har qanday yangiliklar brauzerlari uchun ular biroz qo'shimcha olishadi. Ushbu uslublarni qo'llab-quvvatlaydigan brauzerlar uchun sahifa "progressiv ravishda kuchaytirasiz".
Ilg'or kengaytirishni qo'llashning bir necha yo'li mavjud. Birinchidan, brauzer CSS-ning bir satrini tushunmasa nima qilishi kerakligini o'ylab ko'rishingiz kerak - buni e'tiborsiz qoldiradi! Bu sizning foydasiga ishlaydi. Agar brauzerlarning barcha brauzerlari tushunadigan bazalar majmuasini yaratadigan bo'lsangiz, yangi brauzerlar uchun qo'shimcha uslublarni qo'shishingiz mumkin. Agar ular uslublarni qo'llab-quvvatlasalar, ularni qo'llashadi. Agar yo'q bo'lsa, ular ularni e'tiborsiz qoldiradi va faqat shu asosiy uslublarni qo'llaydi. Ushbu CSS-da progressiv takomillashtirishga oddiy misol keltirilgan:
.main-kontent {
fon: # 999;
fon: rgba (153, 153, 153, .75);
}
Ushbu uslub avvalo fonni yashil rangga aylantiradi. Ikkinchi qoida shaffoflik darajasini belgilash uchun RGBA rang qiymatlarini ishlatadi. Agar brauzer RGBA-ni qo'llab-quvvatlasa, u birinchi uslubni ikkinchi bilan bekor qiladi. Agar bunday bo'lmasa, faqat birinchi qo'llaniladi. Siz boshlang'ich rangni o'rnatdingiz va keyinchalik zamonaviy brauzerlar uchun qo'shimcha uslublarni qo'shdingiz.
Xususiyat so'rovlarini ishlatish
Ilg'or yaxshilanishni qo'llashning yana bir usuli - "xususiyatlar so'rovi" deb nomlangan narsalardan foydalanish. Bu ommaviy axborot so'rovlariga o'xshaydi, ular muhim veb-saytlar dizaynlarining muhim qismidir. Muayyan ekran o'lchamlari uchun ommaviy axborot so'rovlarini matnli qilishda, maxsus so'rovlar muayyan xususiyatning qo'llab-quvvatlanmagani yoki yo'qligini tekshiradi. Foydalanadigan sintaksik:
@supports (displey: flex) {}Ushbu qoidada qo'shilgan har qanday uslublar faqat brauzer Flexbox jihozlari uchun "moslashtirilgan" qo'llab-quvvatlansa ishlaydi. Siz har bir kishi uchun bitta qoidalar to'plamini belgilashingiz va undan so'ng faqat tanlangan brauzerlar uchun qo'shimcha xususiyatlarni qo'shish uchun maxsus so'rovlarni ishlatishingiz mumkin.
Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 12/13/16 yil tahrirlangan.