Веб прелистувачи се околу колку што имаат веб-страниците. Всушност, прелистувачите се суштинска состојка во искуството или луѓето кои ја гледаат вашата веб-страница - но не сите пребарувачи се креираат подеднакво. Тоа е сосема можно (а всушност, веројатно и веројатно) да има клиенти кои ги гледаат вашите веб-страници во прелистувачите кои се многу стари и ги немаат можностите кои се наоѓаат во посовремените пребарувачи. Ова може да претставува значителни проблеми додека се стремиме да развиеме веб-страници кои ги искористуваат најновите достигнувања во дизајнирањето и развојот на веб-страниците . Ако некој дојде на вашиот сајт користејќи еден од оние антиквитети прелистувачи, а вашите најнови напредни техники не работат за нив, би можеле да доживеете лошо искуство во целост. Прогресивно подобрување е стратегија за справување со веб-страницата за различни прелистувачи, имено оние стари прелистувачи кои недостасуваат во модерната поддршка.
Прогресивно подобрување е начин за дизајнирање на веб страници, така што повеќе функции кои ги поддржува кориснички агенти, толку повеќе функции ќе има веб-страницата. Тоа е спротивно на стратегијата за дизајн позната како благодатна деградација . Таа стратегија прво гради страници за најмодерните прелистувачи и потоа осигурува дека тие исто така работат разумно со помалку функционални пребарувачи - дека искуството "благородно се деградира". Прогресивно подобрување започнува со помалку способни прелистувачи и гради искуство од таму.
Како да го користите прогресивниот додаток
Кога креирате веб дизајн со прогресивно подобрување, првото нешто што ќе го направите е да креирате дизајн кој работи за најнискиот заеднички именител на веб прелистувачите. Во неговото јадро, прогресивно подобрување вели дека вашата содржина треба да биде достапна за сите веб-прелистувачи, а не само за под-множење. Затоа започнувате со поддршка на овие стари, застарени и помалку способни пребарувачи. Ако креирате страница што добро функционира за нив, знаете дека сте создале основно ниво кое треба да им овозможи на сите посетители барем корисно искуство.
Кога почнувате со најнесоодветни пребарувачи прво, ќе сакате да се осигурате дека сите ваши HTML треба да бидат валидни и семантички точни. Ова ќе помогне да се осигура дека најшироката разновидност на кориснички агенти може да ја прегледа страницата и да ја прикаже прецизно.
Запомнете дека стилови на визуелен дизајн и севкупниот распоред на страницата се додаваат со користење на надворешни стилски листови . Ова е навистина онаму каде што се случува прогресивно подобрување. Го користите листот за стил за да креирате дизајн на веб-страница што работи за сите посетители. Потоа можете да додадете дополнителни стилови за да ја подобрите страницата, бидејќи корисничките агенти добиваат функционалност. Секој добива стилови на baseline, но за сите вести прелистувачи кои можат да ги поддржат понапредните и помодерни стилови, тие добиваат некои екстра. Вие "прогресивно ја подобрувате" страната за прелистувачи кои можат да ги поддржат тие стилови.
Постојат неколку начини на кои може да се примени прогресивно подобрување. Најпрво, треба да размислите што прелистувачот го прави, ако не разбира линија на CSS - тоа го игнорира! Ова всушност функционира во ваша корист. Ако креирате основен сет на стилови што ги разбираат сите прелистувачи, тогаш можете да додадете дополнителни стилови за нови прелистувачи. Ако тие ги поддржуваат стиловите, тие ќе ги применуваат. Ако не, тие ќе ги игнорираат и само ги користат тие стилови на основно ниво. Едноставен пример за прогресивно подобрување може да се види во овој CSS:
.main-content {
позадина: # 999;
позадина: rgba (153,153,153, .75);
}
Овој стил прво ја поставува позадината на сивкаста боја. Второто правило користи RGBA вредности на бои за да утврди ниво на транспарентност. Ако прелистувачот поддржува RGBA, тој ќе го замени првиот стил со вториот. Ако не, само првиот ќе се примени. Поставивте основна боја, а потоа додадовте дополнителни стилови за посовремени прелистувачи.
Користење на кориснички барања
Друг начин на кој може да се примени прогресивно подобрување е да се користат оние што се познати како "барања за функции". Овие се слични на медиумските пребарувања , кои се суштински дел од дизајнираните веб-страници . Додека медиумите пребаруваат текст за одредени големини на екранот, функцијата пребарувања ќе проверат дали одредена функција е поддржана или не. Синтаксата што ќе ја користите е:
@supports (екран: flex) {}Сите стилови што сте ги додале во ова правило би функционирале само ако тој прелистувач го поддржал "флекс", што е стилот за Flexbox. Можете да поставите еден сет на правила за секого и потоа да ги користите функциите за пребарување за да додадете дополнително само за одбрани пребарувачи.
Авторски напис од Џенифер Крајнин. Ревидирани од Џереми Жирар на 12/13/16.