Веб-браузерлер веб-сайттар болғанша айналасында болды. Шын мәнінде, браузерлер тәжірибедегі маңызды ингредиент немесе сіздің сайтыңызды көретін адамдар болып табылады, бірақ барлық браузерлер бірдей жасалмайды. Клиенттердің веб-беттерді браузерлерде өте ескірген және қазіргі заманғы браузерлерде табылған мүмкіндіктерді жоққа шығаратын толық мүмкіндігі бар (және шын мәнінде мүмкін). Бұл веб-сайттың дизайны мен дамуының соңғы жетістіктерін пайдаланатын веб-сайттарды дамытуға тырысқанда, елеулі проблемалар туындауы мүмкін. Егер біреу сіздің сайтқа сол ескірген браузерлердің біреуімен кірсе және сіздің соңғы жетілдірілген әдістемелеріңіз олар үшін жұмыс істемесе, сіз жалпы тәжірибені төмендете аласыз. Прогрессивті жетілдіру - әртүрлі браузерлер үшін веб-бет дизайнын өңдеудің стратегиясы, яғни заманауи қолдаусыз қалған ескі браузерлер.
Прогрессивті жетілдіру - веб-беттерді жобалау тәсілі, яғни пайдаланушы агентін қолдайтын мүмкіндіктері, веб-беттегі мүмкіндіктер көп болады. Бұл нәзік деградация деп аталатын дизайн стратегиясына қарама-қайшы. Бұл стратегия бірінші кезекте ең заманауи браузерлер үшін беттерді құрастырады, содан кейін олар сондай-ақ аз функционалды браузерлермен жақсы жұмыс істейді - бұл тәжірибе «нәзіктігін төмендетеді». Прогрессивті жақсарту алдымен әлдеқайда қабілетті браузерлерден басталады және сол жерден тәжірибе жинақтайды.
Прогрессивті жетілдіруді қалай қолдануға болады
Прогрессивті жақсартуды пайдаланып, веб-дизайнды жасаған кезде, ең алдымен, веб-браузерлердің ең төмен жалпы ортасында жұмыс істейтін дизайн жасау керек. Өз кезегінде, прогрессивті жақсарту мазмұныңыз барлық веб-браузерлерге тек қосалқы жиынтығымен ғана қолжетімді бола алатынын айтады. Осы себепті сіз осы ескі, ескірген және кем қабілетті браузерлерді қолдана отырып бастайсыз. Егер сіз жақсы жұмыс істейтін сайтты олар үшін ең кем дегенде барлық қонақтарға қолайлы тәжірибе беруі керек базалық сызба құрғаныңызды білесіз.
Ең алдымен ең аз қабілетті браузерлермен басталатын кезде, барлық HTML-дың жарамды және семантикалық түрде дұрыс болуы керек. Бұл пайдаланушы агенттерінің кең ауқымы бетті қарап, оны дәл көрсете алатынын қамтамасыз етеді.
Сыртқы стиль кестелерін пайдалану арқылы визуалды дизайн мәнерлері мен жалпы бет орналасуы қосылды. Бұл шын мәнінде прогрессивті жақсарту болып табылады. Барлық келушілер үшін жұмыс істейтін сайт дизайнын жасау үшін мәнер парағын пайдаланасыз. Содан кейін, қосымша агенттер функционалдылыққа ие болу үшін бетті жақсарту үшін қосымша мәнерлерді қосуға болады. Әрқайсысы негізгі мәнерлер стилін алады, бірақ неғұрлым озық және заманауи стильдерді қолдайтын кез келген жаңалық браузерлері үшін олар бірнеше қосымша алады. Сіз сол стильдерді қолдайтын браузерлерге арналған «прогрессивті күшейе» аласыз.
Прогрессивті жақсартуды қолданудың бірнеше жолы бар. Алдымен, CSS-нің жолын түсінбесе, браузер қандай әрекетті қарастыруы керек - бұл оны елемейді! Бұл сіздің пайдасына жұмыс істейді. Барлық браузерлер түсінетін мәнерлер жиынтығын жасасаңыз, жаңа шолғыштарға қосымша мәнерлерді қосуға болады. Олар стильдерді қолдаса, олар оны қолданады. Олай болмаса, олар оны елемейді және жай ғана осы базалық стильдерді қолданады. Бұл CSS-де прогрессивті жақсартудың қарапайым мысалы көруге болады:
.main-content {
фон: # 999;
background: rgba (153,153,153, .75);
}
Бұл стиль алдымен өңді жасыл түсті етіп көрсетеді. Екінші ереже мөлдірлік деңгейін орнату үшін RGBA түс мәндерін қолданады. Браузер RGBA-ды қолдаса, ол бірінші стильді екіншісімен ауыстырады. Егер олай болмаса, онда бірінші ғана қолданылатын болады. Бастапқы түсті орнатып, одан кейінгі заманғы браузерлер үшін қосымша стильдер қосыңыз.
Функция сұрауларын пайдалану
Прогрессивті жетілдірудің тағы бір тәсілі - «функционалдық сұраулар» деп аталатындарды пайдалану. Бұлар бұқаралық ақпарат құралдарының сұрауларына ұқсас, олар маңызды веб-сайт дизайндарының маңызды бөлігі болып табылады. Медиа белгілі бір экран өлшеміне арналған сұрауларды сұрағанда, функционалдық сұраулар белгілі бір мүмкіндікті қолдайтын-қолдамайтындығын тексереді. Сіз қолданатын синтаксис:
@supports (дисплей: flex) {}Бұл ереже ішіне енгізілген кез-келген стилдер тек қана бұл шолғыш Flexbox үшін стилдер болып табылатын «flex» қолдаса ғана жұмыс істейді. Әрқайсысы үшін бір ережелер жиынтығын орнатуға болады, содан кейін таңдалған шолғыштарға қосымша қосу үшін функционалдық сұрауларды пайдаланыңыз.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard, 12/13/16 редакциясымен редакцияланған.