Принципи на адаптивния уеб дизайн. Какво е грациозна деградация в уеб дизайна? Техники за постепенно деградиране на CSS

От автора:Префиксът -webkit- е толкова често срещан в CSS днес, че някои сайтове отказват да работят правилно без него. Въпреки че css префиксите на доставчиците са ясен знак за не толкова перфектни свойства за разработчиците през последните няколко години, това накара Mozilla да предприеме отчаяна, но необходима стъпка. Във Firefox 46 или 47 (пуснат през април или май 2016 г.), Mozilla планира да въведе поддръжка за поредица от нестандартни –webkit- префикси, за да подобри съвместимостта на браузъра с този префикс (дори на мобилни устройства).

Идеята не е нова Microsoft Edgeсъщо поддържа различни -webkit- префикси за съвместимост. Opera започна да поддържа префикси -webkit- през 2012 г. и след това премина към двигателя на Webkit Blink. W3C и разработчиците на браузъри не възнамеряваха да използват даден префиксв разработката на уебсайт:

„Официалната политика на W3C гласи, че експерименталните свойства не трябва да се използват в кода на сайта. Хората обаче ги използват, защото искат сайтовете им да използват най-новите технологии и да изглеждат страхотно."- W3C страница за оптимизиране на съдържанието за различни браузъри

Разработчиците обаче винаги искат достъп до най-новите функции възможно най-бързо. Префиксите на доставчиците обърнаха всичко с главата надолу и дадоха господство на Webkit, но вярвам, че префиксите оказаха огромно влияние върху бързото развитие на Интернет.

Методите на Mozilla и Microsoft само ще навредят на повечето сайтове. Повечето сайтове вече ще имат активирани префикси –moz- или ще установят, че с новата актуализация Mozilla ще поддържа новите свойства, без да е необходимо да правите промени. Въпреки това, като професионални уеб разработчици, ние трябва да оставим това настрана и да разберем, че някои проекти могат да дадат смесени резултати. Може би вече знаете кои от вашите проекти ще бъдат унищожени от тази актуализация. Уеб разработчици, време е да преосмислите подхода си към префиксите на доставчиците и тестването им на сайтове.

Нови префикси

Mozilla ще включи редица префикси –webkit-. От това, което събрах, изглежда, че Mozilla няма намерение да съпостави своя списък с Свойства на ръба. Не е необходимо всички свойства да са съвместими с двигателя на Mozilla. Сред префиксите, които Mozilla ще добави, съдейки по wiki страницата Compatibility/Mobile/Non Standard Compatibility, са следните:

Webkit - за градиенти

Webkit-трансформира

Webkit-преходи

Webkit-облик

Webkit-фонов клип

Webkit-device-pixel-ratio

Webkit-анимация

Някои други свойства може да са в @-webkit-keyframes.

Тестването на различни браузъри ще бъде критично

Ако вие, уеб разработчик, не сте включили префикса -moz-, за да не тествате нови свойства на CSS във Firefox, и крайният срок наближава и клиентът ви принуждава да добавите този префикс, тогава ще трябва да тествате отново сайта във Firefox 46 или 47. Тези версии ще бъдат пуснати през април или май, така че все още имате малко време.

За да тествате уебсайта си, без да чакате Firefox 46/47, можете да активирате тези промени във Firefox Nightly, като зададете layout.css.prefixes.webkit в about:config. Ако имате инсталирана най-новата версия на Nightly, стойността по подразбиране трябва да е true. Все още не всички промени в префиксите –webkit- работят във Firefox Nightly, но работят. добра платформаза да тествате как ще изглежда вашият сайт скоро. Бих изчакал до март, преди сериозно да тествам сайта във Firefox Nightly.

Много по-важно е, че Microsoft Edge вече интерпретира и показва префиксите -webkit- по подобен начин. Това означава, че всички стилове на WebKit на вашия сайт вече се показват в браузър, който е напълно неочакван. Ако все още не сте работили с този браузър, инсталирайте Windows 10 и получете достъп до него до тестови сайтове.

Префиксите на доставчиците постепенно изчезват

За щастие, префиксите на доставчиците постепенно изчезват, докато екипите за разработка намират нови решения. Екипът на Chrome/Blink промени малко подхода си:

„Занапред, вместо да активираме префикси на доставчици по подразбиране, ние ще запазим обикновените свойства зад флага „разрешаване на експериментални свойства на уеб платформа“ в about:flags, докато тези свойства не бъдат активирани по подразбиране.“— Екипът на Chrome/Blink

Екипът на Firefox следва подобен път: „Основната посока на работа в Mozilla сега е да се отдалечим от префиксите на доставчици, като ги деактивираме или прехвърлим в състояние на обикновени свойства, ако вече са стабилни. Това поне е нашето обща политика, отделни случаи заслужават изключения. »— Борис от Mozilla

Microsoft Edge също е насочен към премахването на поддръжката на префикс: „Microsoft също се опитва да се отърве от префиксите на доставчици в Edge. Това означава, че разработчиците, когато използват специални HTML5 тагове или CSS свойстваняма нужда да добавяте специален префикс за Edge браузър. Вместо това разработчиците ще пишат стандартен код."— Mashable

Грациозното деградиране с помощта на префикси вече не работи

Отдалечаването от префиксите на доставчиците означава само едно нещо – техниката на грациозна деградация чрез префикси вече не е опция. Изолирането на конкретни браузъри чрез префикси на доставчици (например за Chrome) не беше целта на тези префикси; Разработчиците винаги са били насърчавани да използват всички префикси (–webkit- до –o-). Ако използвате някаква функционалност, която работи на свойства с префикси на доставчици, и също така сте използвали техниката на грациозна деградация във вашия дизайн за други браузъри, това вече не работи.

Заключение

Времената се променят. Доминирането на WebKit беше непреднамерено и предизвика вълнение и несъвместимост в Интернет. Други браузъри се стремят да разширят съвместимостта чрез добавяне на префикси –webkit-. Постепенно, с изчезването на префиксите на доставчиците, този проблем. Разработчиците трябва да проверят дали използването на префикси не причинява нежелани последствия в браузъри, различни от WebKit.

Объркан съм каква е разликата между Постепенно увеличаванеИ Грациозни деградации. Мисля, че е същото.

бихте ли ми обяснили разликата между двете и в каква ситуация бих използвал едното пред другото?

8 отговора

Те са почти еднакви, но се различават по контекст.

Има клас браузъри, наречени „клас А браузъри“. Това са вашите типични членове на аудиторията, които (вероятно) съставляват по-голямата част от вашите посетители. Ще започнете с основно ниво на тези потребители. Нека го наречем най-добрите съвременни практики.

Ако искаш нарастваизживяване за тези, които случайно използват FF3.6 или Safari 4 или някой друг разработчик whizbang nightly webkit какво искате да правите невероятни неща като

заоблени ъгли чрез css
засенчен текст (но моля те, не прекалено)
падащи сенки (вижте по-горе в скоби)

Това прави вашия сайт да изглежда страхотно, но няма да го наруши. Това постепенно нарастване. Прегръщане на бъдещето от перспектива най-добри практики.

от друга страна, вашият нишов сайт на Nintendo привлича доста голям брой потребители на IE5. Горкият ти, но също така искаш да си сигурен, че продължават да се връщат. Можете да предоставите алтернатива на вашето поведение на ajax, като включите ajax скрипт във външен файл и ако техният JS не е включен, е възможно връзките ви да опресняват цялата страница. и т.н. От гледна точка най-добрите съвременни практики, ще видите, че се обслужват някои исторически пазари някакво подобие на функционален уебсайт. Това грациозна деградация.

Те са основно идентични, но се различават по отношение на приоритета за много екипи за разработка: PE е доста хубаво, ако имате време, но GD често е необходимо

Ако вашият сайт изглежда еднакво добре във всички браузъри, но някои браузъри получават, да речем, танцуващи понита, защото поддържат танцуващи понита, тогава това е прогресивно подобрение. Работи във всички браузъри, но някои браузъри получават нещо допълнително. Обикновено терминът се прилага към определени функции на Javascript, които могат да подобрят използваемостта отвъд "суровия HTML".

Ако вашият сайт изглежда по начина, по който ще изглежда само в браузъри, които напълно поддържат, да речем, CSS3 и IE8 ще показват една и съща страница без, да речем, заоблени ъгли, тогава това е грациозно влошаване. Сайтът наистина е предназначен за съвременни браузъри, но все още може да се използва в по-стари браузъри, просто не толкова изискано.

в крайна сметка те наистина са едно и също нещо, погледнато от две различни гледни точки.

посока от избраната базаКонцепциите са различни за всеки.

грациозната деградация започва на идеалното ниво на потребителско изживяване и намалява въз основа на възможностите на потребителския агент до минимално ниво, обслужвайки агенти, които не поддържат определени функции, използвани от базовата линия.

прогресивното подобрение започва при широк минимален потребителски опит и се увеличава въз основа на възможностите на потребителския агент до по-способно ниво, обслужвайки агенти, поддържащи по-разширени функции от основните.

Мисля, че и двете концепции могат да се използват, ако времето/бюджетът позволява. Ако не, за предпочитане е грациозната деградация.

Съжалявам, че възкресявам нещо, което е на повече от година, но почувствах, че мога да допринеса по някакъв начин със собственото си мнение по въпроса.

Въпреки че съм съгласен с Alex Mcp и deceze в някои отношения, термините "грациозна деградация" и "прогресивно подобрение" имат малко по-различно значение от това, което подкрепям.

грациозни деградации, през повечето време (по мое мнение) изглежда е по-скоро пръчка да победиш приложение в представянето, след като е било създадено лошо на първо място според моя опит. Като някой да изгради някакъв огромен javascript обект, който дава на потребителя нещо наистина готино за игра, докато не дойде мениджър, провери нещо и всички хукнат да крещят, вдигайки ръце, когато им обърнат внимание, че приложението им не работи в 35% на браузъри. "някой по-добре да осигури резервен вариант за това."

Постепенно увеличаваневъпреки че (и това също е толкова добър термин) изглежда повече за създаване на нещо, което просто работи начално ниво, навсякъде, използвайки най-основните налични методи, за да предостави цялата функционалност, от която се нуждае потребителят. След това това може да бъде добавено с спретнати малки ненатрапчиви помощници, стил и т.н. това всъщност подобрява потребителското изживяване на въпросното приложение, вместо просто да го прави трудно използваемо. "изглежда готино. Работи ли в IE6. О, да. Работи"

Мисля, че може би даването на стил като пример за двата термина в първите два отговора тук пропуска истинския основен проблем с използваемостта, който е постепенно нарастванечесто решава от природата къде грациозни деградацииигнорира, докато всичко се обърка.

Тирадата свърши...

грациозно деградиране е практиката за проектиране на уеб функционалност, така че да осигури определено ниво на потребителско изживяване в по-модерни браузъри, но също така грациозно деградира до по- ниско нивопотребител в по-стари браузъри. Това най-долно ниво не е толкова приятно за използване от посетителите на вашия сайт, но все пак им предоставя основната функционалност, която са дошли на вашия сайт, за да използват; нещата не се чупят за тях.

прогресивното подобрение е подобно, но прави обратното. Започвате с установяване на базово ниво на потребителско изживяване, което всички браузъри ще могат да осигурят при рендиране на уебсайта ви, но също така създавате по-разширена функционалност, която автоматично ще бъде достъпна за браузъри, които могат да я използват.

с други думи, грациозното влошаване започва със сложност на статуквото и се опитва да коригира за по-малко опит, докато прогресивното подобрение започва с много основен, работещ пример и позволява постоянно разширяване за бъдещи среди. Да деградираш грациозно означава да погледнеш назад, докато прогресивно да се увеличиш означава да гледаш напред, като държиш краката си на твърда земя.

Грациозни деградации

грациозни деградацииспособността на компютър, машина, електронна система или мрежа да поддържа ограничена функционалност, дори когато голяма част от нея е унищожена или забранена. Целта на грациозната деградация е да се предотврати катастрофален провал.

Грациозната деградация е едно решение. Това е практика за създаване на уебсайт или приложение, така че да осигурява добро ниво на потребителско изживяване в съвременните браузъри. Въпреки това, той се влошава елегантно на по-стари браузъри. Системата може да не е толкова хубава или красива, но основната функционалност ще работи на по-стари системи.

Прост пример е използването на 24-битови алфа прозрачни PNG файлове. Тези изображения могат да се показват в съвременните браузъри без проблеми. IE5.5 и IE6 ще покажат изображението, но ефектите на прозрачност няма да работят (може да се накара да работи, ако е необходимо). По-старите браузъри, които не поддържат PNG, ще показват алтернативен текст или бяло пространство.

разработчиците, които приемат грациозна деградация, често посочват своето ниво на поддръжка на браузъра, например браузъри от ниво 1 ( най-доброто изживяване) и браузъри от ниво 2 (влошен опит).

Постепенно увеличаване

постепенно нарастванее стратегия за уеб дизайн, която набляга на достъпността, семантиката HTML маркиранеи външни стилови листове и скриптови технологии. Прогресивното подобрение използва уеб технология по слоест начин, който позволява на всеки да получи достъп до основното съдържание и функционалност на уеб страница, използвайки всеки браузър или интернет връзка, като същевременно предоставя подобрена версия на страницата на тези с по-усъвършенстван софтуер на браузъра или по-висока честотна лента.

прогресивното подобрение е подобно по концепция на грациозния спад, но обратното. Уебсайтът или приложението ще се инсталират основно ниво напотребителско изживяване за повечето браузъри. По-разширена функционалност ще бъде добавена, когато браузърът я поддържа.

прогресивното подобрение не изисква от нас да избираме поддържани браузъри или да се връщаме към базирани на таблици оформления. Ние избираме технологичното ниво, т.е. браузърът трябва да поддържа HTML 4.01 и стандартни заявки/отговори на страници.

Обратно към нашето примерно изображение, можем да решим, че нашето приложение трябва да работи във всички графични браузъри. Можем да използваме повече ниско качество GIF изображенията са по подразбиране, но ги заменете с 24-битови png изображения, когато браузърът ги поддържа.

връзки

Уикипедия: Постепенно увеличаванеИ

Не съм писал от дълго време, трябваше да се преместя на място без интернет (това е ужасно), в резултат на което не можех да пиша в блога. Днес искам да говоря за метода на разработка (оформление), който частично се използва в дизайна на моя блог.

Най-новите версии на иновативни браузъри (като FF 3.5, Opera 10) въведоха някои декоративни ефекти от предложената спецификация CSS 3. Прозрачността, сенките и ефектът на зебра (ивици) вече са налични без използването на JavaScript или допълнително маркиране. Но някои по-стари браузъри, които все още се използват, нямат тези функции и би било тъжно да мислим, че няма да имате възможност да използвате тези прекрасни ефекти още няколко години.

В тази статия ще говоря за това как да правите хубави (постепенни) подобрения в браузъри, които поддържат функциите на CSS3 и въпреки това осигуряват задоволително оформление за другите потребители.

Какво е прогресивно подобрение?

За да разберете концепцията за „постепенно подобрение“, трябва да разберете принципа на „грациозната деградация“, който е добре описан от следния цитат:

Лекото влошаване означава, че вашият сайт продължава да работи дори ако се гледа в по-малко от оптималния браузър, в който разширените ефекти не работят.
Флуидно мислене, от Питър-Пол Кох

„Постепенното подобряване“ използва същия метод само от противоположната страна, вместо да се притеснявате дали сайтът не се разпада в стар браузър, трябва първо да помислите за съдържанието и просто да добавите функции на модерни програми към дизайна, за да подобрите потребителя опит, докато основното оформление на състоянието все още работи на по-стари машини. В момента това е най-добрият начин да използвате новите функции на CSS 3.

Пример

Като пример, нека направим просто меню за навигация, което ще изглежда малко по-красиво в зависимост от поддръжката на CSS във вашия браузър.

Бих искал да отбележа, че в този пример не използвам графики, хакове или специфични за браузъра префикси - всички подобрения се дължат на декларираните възможности. Имайки това предвид, някои от нещата по-долу са само с илюстративна цел и може да не са най-добър изборв създаването на истински уебсайтове.

Маркиране

Нека направим просто меню, използвайки неподреден списък (ul):

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Основен стил

Като основа ще използвам стил, който използва само прости селектори за наслояване. Той създава рамка за всеки елемент и променя фона при задържане на мишката (onmouseover). Това трябва да работи във всеки браузър, създаден през последните 7-8 години (и вероятно повече).

CSS е много прост:

ул (
цвят на фона: син;
border-bottom: 1px пунктиран #999;
стил на списък: няма;
поле: 15px;
ширина: 150px;
}

ли (
цвят на фона: #fff;
рамка: 1px пунктиран #999;
border-bottom-width: 0;
шрифт: 1.2em/1.333 Verdana, Arial, sans-serif;
}

ли а (
цвят черен;
дисплей: блок;
височина: 100%;
подложка: 0.25em 0;
подравняване на текст: център;
текст-декорация: няма;
}

li a:hover ( цвят на фона: #efefef; )

Единственото странно нещо тук е синият фон

Основно оформление, така ще изглежда в IE6 и други по-стари браузъри.

Прилагане на подобрения

IE7 беше първият от серията браузъри IE, който поддържа всички селектори на атрибути от CSS 2.1, което също е често срещано в почти всички други браузъри. Можем да използваме един от тях - селектора за деца - за да започнем да подобряваме. Тъй като IE6 не поддържа дъщерни селектори, той ще игнорира следните правила:

Тяло > ul (ширина на границата: 0;)

ul > li (
рамка: 1px плътен #fff;
ширина на границата: 1px 0 0 0;
}

li > a (
цвят на фона: #666;
цвят: бял;
тегло на шрифта: удебелен;
}

li:първо дете a ( цвят: жълт; )

li > a:hover ( цвят на фона: #999; )

С тези CSS правила списъкът изглежда така:

Менюто вече има цветен фон и миниатюра, а също и първата връзка е маркирана с различен цвят.

Ето как IE7, Firefox, Safari и Opera ще показват списъка.

Нека да наблегнем повече

Следващата стъпка е да увеличите акцента, като използвате свойство, което IE не разпознава: Прозрачност. Не е необходимо да използваме специални селектори за това, защото IE просто ще пропусне свойството, което не поддържа:

Li (непрозрачност: 0,9; )

li:hover (непрозрачност: 1;)

Следващата снимка показва как работи това свойство в Opera, можете да видите, че елементите от списъка са придобили лек син оттенък от фона

Можете, разбира се, да използвате собственото филтърно свойство на IE за същия ефект в IE. Както и специфични за браузъра префикси (-moz-, -webkit-) за свойствата по-долу. Но за образователни цели ще се придържам към стандарта CSS, тъй като филтърът не е стандартно свойство, тогава той не е валиден.

Firefox 2 поддържа прозрачност, но в по-късните браузъри можем да отидем дори по-далеч. В Safari и Opera можем да декорираме текст с помощта на свойството text-shadow:

Li a:hover (text-shadow: 2px 2px 4px #333; )

Както показва следното изображение, елементът има лека сянка при задържане и изглежда, че стърчи леко от страницата:

И накрая, можете да се погрижите за пълна поддръжка от Opera нов CSS 3 селектора и добавете още един слой от подобрения: променливи на цвета на фона, използвайки селектора nth-child:

Li:nth-child(2n+1) a (фонов цвят: #333; )

li:nth-child(n) a:hover (
цвят на фона: #aaa;
цвят: #000;
}

li:first--child > a:hover ( цвят: жълт; )

Ще видим раирано меню в Opera:

Обобщение и заключения

Картината по-долу показва как изглежда първоначалното маркиране в IE6, IE7, Firefox, Safari и Opera след прилагане CSS правилаописани в тази статия. Както можете да видите, тъй като поддръжката на браузъра за CSS става все по-сложна, менютата стават по-стилни и сложни и с помощта на техники за постепенно подобрение, менютата остават функционални дори в много стари браузъри.

Разбира се, много браузъри имат низ от други свойства, които не съм разгледал тук, но които могат да се използват, като RGBA цветове и SVG като цветове на фона.

със сигурност Internet Explorerсъдържа голям брой грешки в различни версии, но с помощта на условни коментари можете да се борите с тях, постигайки тяхното премахване. Но това, което нищо не може да поправи е, че IE е безнадеждно остарял. Докато други браузъри включват все повече и повече свойства на CSS3 и поддържат различни новомодни технологии, IE отбелязва времето. Пускането на IE9 няма да реши проблема, предишни версиитова няма да се изпари за една нощ. В такава ситуация най-доброто решениеще има грациозна деградация - принципът на поддържане на производителността, когато някои функции се загубят.

Нека да разгледаме тази техника с малък пример, в който текстът се показва в блок и бутон. Блокът и бутонът имат заоблени ъгли, а към блока е добавена и малка сянка. Досега браузърите за CSS3 използват главно специфични свойства със собствени префикси:

Firefox - свойства, започващи с -moz-;
Safari и Chrome - свойства, започващи с -webkit-;
Opera - свойства, започващи с -o-.

Различните версии на тези браузъри могат да разберат някои свойства както със, така и без префикс, така че за универсалност те добавят няколко свойства наведнъж. И така, за да създадем заоблени ъгли, се нуждаем от следния стил.

Moz-граница-радиус: 10px; /* За Firefox */ -webkit-border-radius: 10px; /* За Safari и Chrome */ border-radius: 10px; /* За Opera и IE9 */

Въпреки че използването на тези свойства ще доведе до невалиден CSS код, в такъв случай работата е по-важна V Firefox браузъри 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, както и по-старите им версии. Пример 1 показва как да използвате свойствата на CSS3 за създаване на сенки и заоблени ъгли.

Пример 1. Блок със сянка

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Блокирайте

Трябва да преминете през 20 въпроса, които са избрани на случаен принцип от базата данни. За да преминете теста, е достатъчно да отговорите правилно на поне 75% от предложените въпроси (15 или повече въпроса).

Резултатът от примера е показан на фиг. 1.

Ориз. 1. Блокирайте изгледа в Safari

Същият пример в браузъра IE8 и по-долу е показан на фиг. 2.

Ориз. 2. Блок изглед в IE8

Въпреки че външният вид на елементите се различава в детайли, функционалността на страницата като цяло остава същата. Бутонът може да бъде кликнат, текстът остава същият, включително цвета и фона, и няма грешки при показване. Всъщност разликата е само в малките неща, които изпълняват декоративни, а не практически функции. Всички принципи на грациозната деградация са изпълнени.

Какво дава този подход на практика?

Позволява ви активно да използвате декоративни свойства на CSS3 без оглед на браузъра.
Мотивира да се използват различни CSS3 ефекти.
Това значително улеснява живота на разработчика, тъй като той вече не трябва да търси решения за остарели браузъри.
Ускорява производителността на труда.

Разбира се, грациозната деградация не винаги е приложима. Ако изискванията за оформление показват поддръжка за по-стари версии, тогава ще трябва да потърсите алтернативни решения, например, използвайте изображения за заоблени ъгли. Но в по-голямата си част изискванията за оформление се задават, без да се взема предвид общата ситуация. И ако сравним всички предимства на грациозната деградация с недостатъка, който се проявява само във факта, че остарелите браузъри, по-специално IE8, не показват страницата достатъчно „красиво“, тогава симпатиите ще бъдат на страната на напредъка.

Индустрията за уеб дизайн непрекъснато се променя, отчасти защото уеб браузърите и устройствата непрекъснато се променят. Тъй като работата, която вършим като уеб дизайнери и разработчици, се разглежда през уеб браузър, нашата работа винаги ще има симбиотична връзка с този софтуер.

Промени в уеб браузърите

Едно от предизвикателствата, пред които дизайнерите и разработчиците на уеб сайтове винаги са се сблъсквали, са не само промените в уеб браузърите, но и наборът от различни уеб браузъри, които ще се използват за достъп до техните уебсайтове. Би било чудесно, ако всички посетители на уебсайта използват най-новото и най-доброто софтуер, но това никога не е било така (и вероятно никога няма да бъде).

Някои посетители на вашите сайтове ще видят уеб страници с много остарели браузъри и липсващи функции от по-модерни браузъри. Например по-стари версии на браузъра Microsoft Интернет Explorer отдавна е проблем за много уеб професионалисти. Въпреки че компанията прекрати поддръжката на някои от най-старите си браузъри, все още има хора, които ще ги използват - хора, с които може да искате да правите бизнес и да общувате.

Дефиниция на "грациозна деградация"

Реалността е, че хората, които използват тези остарели уеб браузъри, често дори не знаят, че имат остарял софтуер или че онлайн изживяването им може да бъде компрометирано поради техния софтуерен избор. За тях този остарял браузър е просто това, което са използвали дълго време за достъп до уебсайтове. От гледна точка на уеб програмиста, ние искаме да сме сигурни, че можем да предоставим на тези клиенти възнаграждаващо изживяване, като същевременно създаваме уебсайтове, които работят чудесно в по-модерните, богати на функции браузъри и устройства, налични днес.

„Изящна деградация“ е стратегия за лечение на дизайна на уеб страници за различни браузъри, и стари и нови.

Започвайки с модерните браузъри

Проектиран да се влошава с времето, уебсайтът е проектиран първо с модерните браузъри. Този сайт е предназначен да се възползва от възможностите на тези модерни уеб браузъри, много от които се „актуализират автоматично“, за да се гарантира, че хората винаги използват последна версия. Въпреки това уебсайтовете, които се влошават елегантно, също работят ефективно на по-стари браузъри. Когато тези по-стари, по-малко функционални браузъри разглеждат сайта, той трябва да се влоши, докато все още е функционален, но може би с по-малко функции или други визуални елементи на дисплея. Въпреки че тази концепция за предоставяне на по-малко функционален или не особено привлекателен уебсайт може да ви се стори странна, истината е, че хората дори няма да знаят, че липсват. Те няма да сравняват сайта, който виждат, с „по-добрата версия“, така че докато сайтът прави това, от което се нуждаят, и не изглежда повреден нито функционално, нито визуално, вие ще бъдете в добра форма.

Прогресивно подобрение

Концепцията за постепенно влошаване прилича много на друга концепция за уеб дизайн, за която може би сте чували - прогресивно подобрение. Основната разлика между стратегията за прогресивно влошаване и стратегията за прогресивно подобряване е откъде започвате своя дизайн. Ако започнете с най-малкия общ знаменател и след това добавите функции за по-модерни браузъри към вашите уеб страници, вие използвате прогресивно подобрение. Ако започнете с най-модерните, авангардни функции и след това намалите, ще се възползвате от постепенното влошаване. В крайна сметка полученият уебсайт вероятно ще осигури същото изживяване, независимо дали използвате прогресивно подобрение или постепенно влошаване. Реално погледнато, целта на двата подхода е да се създаде сайт, който работи чудесно за съвременните браузъри, като същевременно осигурява безпроблемно изживяване за по-старите уеб браузъри и клиентите, които продължават да ги използват.

Грациозното влошаване не означава, че казвате на читателите си „Изтеглете най-новия браузър“

Една от причините, поради които много съвременни дизайнери не харесват подхода за грациозна деградация, е, че той често се превръща в изискване от читателите да изтеглят най-актуалния браузър, за да работи страницата. Това не е грациозна деградация. Ако искате да напишете „изтеглете браузъра X, за да работи тази функция“, вие напускате сферата на постепенното влошаване и преминавате към дизайн, ориентиран към браузъра. Да, със сигурност е полезно да помогнете на посетител на уебсайт да надстрои до по-добър браузър, но често това е въпрос, който трябва да бъде зададен (не забравяйте, че много хора не разбират как да изтеглят нови браузъри и да ги помолите да го направят може да бъде направо смущаващ). ги далеч). Ако наистина искате техният бизнес да им каже, че напускат вашия сайт, за да изтеглят по-добър софтуер, вероятно няма да е възможно. Освен ако вашият сайт няма ключова функционалност, която изисква конкретна версия на браузъра или по-висока, принудителните изтегляния често нарушават потребителското изживяване и трябва да се избягват.

Добро правило е да следвате същите правила за постепенно влошаване, както и за прогресивно подобрение:

Напишете валиден, съвместим със стандартите HTML
Използвайте външни стилови листове за вашия дизайн и оформление
Използвайте външно свързани скриптове за интерактивност
Уверете се, че съдържанието е достъпно дори за браузъри от нисък клас без CSS или JavaScript

Имайки предвид този процес, можете да излезете и да създадете най-модерния дизайн, който можете! Просто се уверете, че работи в по-малко богати на функции браузъри, докато все още работи.

Колко назад трябва да се върнете?

Един въпрос, който много уеб разработчици имат, е доколко трябва да поддържате версии на браузъра. На този въпрос няма точен и сух отговор. Зависи от самия сайт. Ако погледнете анализа на трафика на даден сайт, ще видите какви браузъри се използват за посещение на този сайт. Ако видите значителен процент от хората, които използват определено повече стар браузър, тогава вероятно искате да поддържате този браузър или рискувате да загубите този бизнес. Ако погледнете вашите анализи и видите, че никой не използва повече Стара версиябраузър, вероятно можете да решите да не си правите труда да поддържате и тествате този наследен браузър. Така че истинският отговор на въпроса колко отдавна вашият сайт се нуждае от поддръжка е „без значение колко отдавна вашите анализатори ви казват какво използват вашите клиенти“.

Редактирано от Джеръми Жирар.