Уеб браузърите са били наоколо толкова дълго, колкото са уеб сайтовете. В действителност, браузърите са основна съставка в опита или хората, които гледат вашия сайт - но не всички браузъри са създадени еднакво. Възможно е (и всъщност доста вероятно) да имате клиенти, които гледат вашите уеб страници в браузъри, които са изключително стари и липсват функциите, които се намират в по-модерните браузъри. Това може да създаде значителни проблеми, когато се стремите да разработвате уеб сайтове, които се възползват от най-новите постижения в дизайна и разработването на уеб сайтове . Ако някой дойде на сайта Ви с един от тези антикварни браузъри, а най-новите ви техники не работят за тях, може да се окаже, че имате лошо преживяване като цяло. Прогресивното подобрение е стратегия за обработка на дизайна на уеб страници за различни браузъри, а именно тези стари браузъри, които не разполагат с модерна поддръжка.
Прогресивното подобрение е начин за проектиране на уеб страници, така че колкото повече функции поддържа един потребителски агент, толкова повече функции ще има уеб страницата. Това е обратното на дизайнерската стратегия, позната като грациозна деградация . Тази стратегия създава страници за най-модерните браузъри на първо място и след това гарантира, че те също работят сравнително добре с по-малко функционални браузъри - че опитът "се разгражда грациозно". Прогресивното подобрение започва най-напред с по-малко способните браузъри и създава опит от там.
Как да използвате прогресивно подобрение
Когато създавате уеб дизайн с помощта на прогресивно подобрение, първото нещо, което ще направите, е да създадете дизайн, който да работи за най-ниския общ знаменател на уеб браузъри. В основата си прогресивното подобрение гласи, че съдържанието ви трябва да е достъпно за всички уеб браузъри, а не само за подсъздаване. Ето защо започнете да поддържате тези стари, остарели и по-малко способни браузъри.Ако създадете сайт, който работи добре за тях знаете, че сте създали базова линия, която трябва да осигури най-малко полезно изживяване за всички посетители.
Когато започнете най-напред с най-малко способните браузъри, ще искате да гарантирате, че вашият HTML код е валиден и семантично правилен. Това ще помогне да се гарантира, че възможно най-голямо разнообразие от агенти на потребителите могат да преглеждат страницата и да я показват точно.
Не забравяйте, че визуалните стилове на дизайн и цялостното оформление на страницата се добавят чрез външни стилови листове . Това е мястото, където се случва прогресивното подобрение. Използвате стиловия лист, за да създадете дизайн на сайта, който работи за всички посетители. След това можете да добавите допълнителни стилове, за да подобрите страницата, тъй като функционалностите на потребителите получават функционалност. Всеки получава стилове на базовите линии, но за всякакви браузъри за новини, които могат да поддържат по-модерните и модерни стилове, те получават допълнително. Прогресивно подобрявате страницата за браузъри, които поддържат тези стилове.
Има няколко начина, по които можете да прилагате прогресивно подобрение. Първо, трябва да помислите какво прави браузърът, ако не разбира линия от CSS - той го игнорира! Това всъщност работи във ваша полза. Ако създадете набор базови стилове, които всички браузъри разбират, можете да добавите допълнителни стилове за новите браузъри. Ако подкрепят стиловете, те ще ги прилагат. Ако не, те ще ги игнорират и просто ще използват тези базови стилове. Един прост пример за прогресивно подобрение може да се види в този CSS:
.главно съдържание {
фон: # 999;
фон: rgba (153,153,153,75);
}
Стилът първо задава фон на сивкав цвят. Второто правило използва RGBA цветови стойности, за да настрои ниво на прозрачност. Ако браузърът поддържа RGBA, той ще замени първия стил с втория. Ако това не стане, само първата ще бъде приложена. Зададохте цвят на базовата линия и след това добавихте допълнителни стилове за по-модерни браузъри.
Използване на функции за търсене
Друг начин да приложите прогресивно подобрение е да използвате това, което е известно като "функция за заявки". Те са подобни на заявките на медиите , които представляват съществена част от дизайна на уеб сайтове . Докато медиите търсят текст за определени размери на екрана, функциите за заявки ще проверяват дали дадена функция се поддържа или не. Синтаксисът, който ще използвате, е:
@supports (дисплей: flex) {}Всички стилове, които добавихте в това правило, ще работят само ако този браузър поддържа "flex", което е стила за Flexbox. Можете да зададете един набор от правила за всички и след това да използвате функционални заявки, за да добавите допълнително само за избрани браузъри.
Оригинална статия на Дженифър Кринин. Редактиран от Джереми Жирар на 13.12.16.