Техники за постепенно разграждане на 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 няма намерение да съпостави своя списък със свойствата на Edge. Не е необходимо всички свойства да са съвместими с двигателя на 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.

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

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

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

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

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

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

Спазването на принципа на грациозната деградация позволява на потребителите (и всеки потребител е потенциален клиент) да могат да работят със сайта във всяка ситуация.

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

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

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

Обикновено създаването на страница с помощта на принципа на прогресивното подобряване се състои от следните стъпки:

• Създаване на страница на „чиста“ основаHTML
  На този етап се създава напълно функционална страница, която се състои само от HTML код, който е семантично и логически правилен и следователно може да се интерпретира от всеки браузър, дори и от най-простия. На този етап не се извършва форматиране и браузърът сам форматира страницата според стандартите, които са включени в нея. Прогресивното подобрение настоява, че първият етап е най-важен, тъй като в мрежата няма нищо по-ценно от съдържанието.
  Къс: създаване на семантична и логическа структура на документа
• Добавяне на правилаCSS
  На този етап се използва CSS таблица от стария формат: добавя се мрежа за маркиране, позиционират се елементи, прилагат се фонови изображения към блокове, променят се стилове, цветове и стилове на текст. Като цяло страницата придобива нов стилизиран вид, става по-красива и приятна.
  Къс: придавайки вид на документ
• Прилагане на CSS3
  Сега можете да приложите към документа всички ефекти и подобрения, предоставени от спецификацията CSS3. Тоест добавете полупрозрачност, сенки, заоблени ъгли за блокове, плавни анимирани преходи за псевдокласове или елементи на форма.
  Къс: даващ съвършенство външен виддокумент
• Създаване на скриптове наJavaScript
  На този етап всички ефекти и принципи на взаимодействие на уеб страницата с потребителя се създават с помощта на JavaScript. Те включват AJAX заявки, динамично зареждане или валидиране на данни, анимационни ефекти и джаджи (например Prototype или jQuery). Като цяло, ние правим страницата по-лесна за използване.
  Къс: взаимодействие, интерактивност, удобство

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

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

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

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

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

Кой принцип трябва да следвате?

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

Факт е, че изграждането на уебсайт, базиран на принципа на грациозната деградация, е доста трудно, тъй като малко разработчици могат да го направят ефективно. В най-простия случай на грациозна деградация можете да направите следното: да създадете сайта за най-новата версия на браузъра и след това да покажете на потребителите съобщение, което им казва, че трябва да изтеглят нова версиябраузър. В същото време разработчиците може да не се интересуват как изглежда сайтът в по-старите браузъри. Друг пример за лоша грациозна деградация е пълно изключванефункционалност на сайта, когато JavaScript е деактивиран. Ярък пример е изпращането на съобщения във Facebook.com.

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

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

със сигурност 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 код, в случая е по-важно да се работи в 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

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

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

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

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

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

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

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

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

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

IN най-новите версииИновативните браузъри (като 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 така:

Основно оформление, така ще изглежда в 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 за същия ефект, както и специфични за браузъра префикси (-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 като фонови цветове.