Звичайно, Internet Explorerмістить велику кількість помилок у різних версіях, але за допомогою умовних коментарівз ними можна боротися, домагаючись їх усунення. Але чого не можна нічим виправити, так це те, що IE безнадійно застарів. Поки інші браузери включають все більше властивостей CSS3, підтримують різні новомодні технології, IE тупцює на місці. Вихід IE9 не вирішить проблему, попередні версії від цього не випаруються. В такій ситуації найкращим рішеннямбуде витончена деградація (graceful degradation) – принцип збереження працездатності при втраті частини функціональності.
Давайте розберемо цей прийом на невеликому прикладі, в якому виводиться текст у блоці та кнопка. У блоку та кнопки задані округлені куточки, до блоку також додається невелика тінь. Поки що браузери для CSS3 застосовують переважно специфічні властивості зі своїми префіксами:
- Firefox - властивості, що починаються з -moz-;
- Safari та Chrome - властивості, що починаються з -webkit-;
- Opera - властивості, що починаються з -o-.
Різні версії цих браузерів можуть розуміти деякі властивості як із префіксом, так і без нього, тому для універсальності додають одночасно кілька властивостей відразу. Так, для створення округлених куточків нам знадобиться наступний стиль.
Moz-border-radius: 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
Вам необхідно пройти 20 питань, які у випадковому порядку вибираються із бази даних. Для проходження тесту достатньо правильно відповісти не менш як на 75% запропонованих питань (15 та більше питань).
Результат прикладу продемонстровано на рис. 1.
Мал. 1. Вид блоку в Safari
Той самий приклад у браузері IE8 і нижче представлений на рис. 2.
Мал. 2. Вид блоку в IE8
Хоча вид елементів різниться у деталях, зберігається працездатність сторінки загалом. На кнопку можна натиснути, текст залишився тим самим, включаючи його колір і тло, помилок відображення немає. Фактично, різниця лише у дрібницях, які виконують декоративні, а не прикладні функції. Усі принципи витонченої деградації виконані.
Що дає на практиці цей підхід?
- Дозволяє активно використовувати декоративні властивості CSS3 без огляду на браузер.
- Мотивує використовувати різні ефекти CSS3.
- Істотно полегшує життя розробника, оскільки тепер не треба шукати рішення для застарілих браузерів.
- Прискорює продуктивність роботи.
Зрозуміло, витончена деградація застосовна не завжди. Якщо у вимогах до верстки зазначена підтримка старих версій, то доведеться шукати альтернативні рішення, наприклад, для закруглених куточків використовувати зображення. Але здебільшого вимоги до верстки виставляють без урахування загальної ситуації. І якщо порівняти всі переваги витонченої деградації з недоліком, який проявляється лише в тому, що застарілі браузериЗокрема, IE8 відображають сторінку недостатньо «красиво», то симпатії виявляться на боці прогресу.
Від автора:префікс -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 збирається додати, судячи зі сторінки вікі Compatibility/Mobile/Non Standard Compatibility будуть наступні:
Webkit-для градієнтів
Webkit-transforms
Webkit-transitions
Webkit-appearance
Webkit-background-clip
Webkit-device-pixel-ratio
Webkit-animation
Деякі інші властивості можуть бути в @-webkit-keyframes.
Тест на кросбраузерність матиме вирішальне значення
Якщо ви, веб-розробник не стали включати – moz-префікс, щоб не перевіряти нові властивості CSS у Firefox, а термін здачі добігає кінця, і замовник змушує вас додати цей префікс, то вам доведеться заново тестувати сайт у Firefox 46 або 47. Дані версії вийдуть у квітні чи травні, так що у вас ще є небагато часу.
Щоб протестувати свій веб-сайт, не чекаючи виходу Firefox 46/47, можна активувати дані зміни Firefox Nightly за допомогою налаштування layout.css.prefixes.webkit в about:config. Якщо у вас встановлено останню версію Nightly, то за умовчанням має стояти true. Поки що в Firefox Nightly працюють не всі зміни - webkit - префіксів, але все ж таки це хороший майданчик, щоб протестувати, як ваш сайт скоро буде виглядати. Я б зачекав березня перед серйозним тестуванням сайту Firefox Nightly.
Набагато важливіше, що Microsoft Edge вже інтерпретує та відображає -webkit-префікси схожим чином. А це означає, що будь-які WebKit стилі вашого сайту вже відображаються у браузері, від якого цього зовсім не очікували. Якщо ви ще не працювали з даним браузером, то встановіть собі Windows 10 і отримаєте доступ до нього для тестування сайтів.
Вендорні префікси поступово йдуть
На щастя, вендорні префікси поступово йдуть паралельно до того, як команди розробників знаходять нові рішення. Команда Chrome/Blink трохи змінила свій підхід:
«Забігаючи наперед, замість включення вендорних префіксів за умовчанням ми триматимемо звичайні властивості за прапором «активувати експериментальні властивості веб-платформи» в about:flags до тих пір, поки ці властивості не будуть включені за замовчуванням.» — Команда The Chrome/Blink
Команда Firefox пішла схожим шляхом: «Основний напрямок роботи в Mozilla зараз це відхід від вендорних префіксів, шляхом їх відключення або переведення їх у стан звичайних властивостей, якщо вони вже стабільні. Це як мінімум наша спільна політика, окремі випадки заслуговують на винятки. »- Борис з Mozilla
Microsoft Edge також націлена на видалення підтримки префіксів: «Microsoft також намагається позбавитися вендорних префіксів в Edge. Це означає, що розробникам при використанні особливих HTML5 тегів або CSS властивостей не доведеться додавати спеціальний префікс для браузера Edge. Натомість розробники будуть писати стандартний код.»- Mashable
Витончена деградація за допомогою префіксів більше не працює
Відхід від вендорних префіксів означає лише одне – методика витонченої деградації через префікси більше не вихід. Виділення конкретних браузерів через вендорні префікси (наприклад, для Chrome) не входило завдання цих префіксів; розробникам завжди рекомендувалося використовувати всі префікси (від -webkit-до -o-). Якщо ви використовуєте будь-який функціонал, що працює на властивостях із вендорними префіксами, а також використовували тенхніку витонченої деградації у вашому дизайні для інших браузерів, то це більше не працює.
Висновок
Часи змінюються. WebKit домінування було ненавмисним і викликало переполох та несумісність в інтернеті. Інші браузери шукають спосіб розширити сумісність шляхом додавання -webkit-префіксів. Поступово, з відходом вендорних префіксів, піде і дана проблема. Розробникам варто перевірити, чи не викликає використання префіксів небажаних наслідків у не WebKit браузерах.
Я заплутався в тому, що різниця між Поступове підвищенняі Витончені Деградації. Мені вони здаються одним і тим самим.
не могли б ви пояснити мені відмінності між ними і в якій ситуації я використав би один над іншим?
8 56 2010-03-31 08:05:388 відповідей:
Вони майже точно те саме, але вони відрізняються в контексті.
Існує клас браузерів під назвою "A Grade Browsers". Це ваші типові члени аудиторії, які (ймовірно) становлять більшість відвідувачів. Ви розпочнете з базового рівня цих користувачів. Назвемо це найкращі сучасні практики.
Якщо ви хочете збільшитидосвід для тих, хто випадково використовує FF3. 6 або Safari 4 або будь-який інший розробник whizbang nightly webkit whathaveyou, ви хочете робити дивовижні речі, як
- закруглені кути через css
- затінений текст (але, будь ласка, Боже, не надто багато)
- тіні, що відкидається (див. вище в дужках)
Вони роблять ваш сайт чарівним, але не зламають його. Це поступове підвищення. Охоплюючи майбутнє з погляду кращі практики.
з іншого боку, ваш нішевий сайт Nintendo приваблює достатню кількість користувачів IE5. Бідолашний ти, але ти також хочеш переконатися, що вони продовжують повертатися. Ви можете надати альтернативу своїй поведінці ajax, включивши сценарій ajax в зовнішній файл, і якщо їх JS не увімкнено, можливо, Ваші посилання оновлюють всю сторінку. Так далі. З точки зору найкращі сучасні практики, ви переконаєтеся, що деякі історичні ринки обслуговуються деяка подоба функціонального сайту. Це витончений деградація.
Вони в основному ідентичні, але відрізняються з точки зору пріоритету для багатьох команд розробників: PE досить приємно, якщо у вас є час, але GD часто необхідні
Якщо ваш сайт виглядає однаково добре у всіх браузерах, але деякі браузери отримують, скажімо, танцюючих поні, тому що вони підтримують танцюючих поні, то це прогресивне покращення. Він працює у всіх браузерах, але деякі браузери отримують щось додаткове. Зазвичай цей термін застосовується до певних функцій Javascript, які можуть підвищити зручність використання поза "raw HTML".
Якщо ваш сайт виглядає тільки так, як ви збираєтеся на браузерах, які повністю підтримують, скажімо, CSS3 і IE8-відображатиметься та ж сторінка без, скажімо, закруглених кутівтоді це витончена деградація. Сайт дійсно призначений для сучасних браузерів, але він все ще використовується в старих браузерах просто не так химерно.
зрештою, це дійсно те саме, що розглядається з двох різних точокзору.
напрямок від обраного базовийкожному поняття різні.
витончена деградація починається на ідеальному рівні досвіду користувача і зменшується в залежності від можливостей агента користувача до мінімального рівня, обслуговуючи агентів, які не підтримують певні функції, що використовуються базовою лінією.
прогресивне підвищення починається на широкому мінімальному досвіді споживача і збільшує залежно від можливостей агента споживача до більш здатного рівня, поставляючи їжу для агентів, які підтримують більш розширені функції, ніж базова лінія.
Я думаю, що можна було б використати обидві концепції, якщо дозволить час/бюджет. Якщо ні, то витончена деградація була б кращою.
Вибачте, що воскрешаю щось, що минуло більше року, але я відчував, що можу зробити свій внесок, певною мірою, мою власну думку з цього питання.
хоча я згоден з Алексом Mcp і deceze до певної міри, терміни "витончена деградація" і "прогресивне підвищення" мають дещо інші значення, ніж я стою.
витончені деградації, багато часу (на мій погляд), здається, більше палиці бити додаток у підпорядкування після того, як це був побудований погано в першу чергу в моєму досвіді. Як хтось будує якийсь величезний об'єкт javascript, який надає користувачеві щось дійсно класне, щоб грати, поки не з'явиться менеджер, не перевірить цю річ, і всі кричать, кидаючи свої руки, коли справа доходить до їхньої уваги, що їх додаток не працює у 35% браузерів. хтось краще забезпечити запасний варіант для цього."
Поступове підвищенняхоча (і це такий гарний термін, щоб сказати теж), здавалося б, більше про створення чогось, що просто працює, на початковому рівні, скрізь, за допомогою найголовніших доступних методів, щоб забезпечити всю функціональність, яка потрібна користувачеві. Потім це можна додати за допомогою акуратних маленьких ненав'язливих помічників, укладання і т. д. це фактично покращує досвід користувача, що розглядається, а не просто робить його ледве придатним для використання. ", що виглядає круто. Чи працює він у IE6. Про так. Воно Невже"
Я думаю, що, можливо, даючи стиль як приклад обох термінів у двох верхніх відповідях тут вигляд упускає з уваги реальну основну проблему юзабіліті, що поступове підвищеннячасто вирішує за своєю природою, де витончені деградаціїігнорує, доки все не піде не так.
Rant over...
витончена деградація-це практика побудови вашої веб-функціональності так, щоб вона забезпечувала певний рівень користувальницького досвіду в більш сучасних браузерах, але вона також витончено деградуватиме до більш низького рівня користувача в більш старих браузерах. Цей нижній рівень не так добре використовувати для відвідувачів вашого сайту, але він, як і раніше, надає їм основну функціональність, яку вони прийшли на ваш сайт, щоб використовувати; речі не ламаються їм.
прогресивне підвищення схоже, але він робить все навпаки. Ви починаєте з встановлення базового рівня користувальницького досвіду, який всі браузери зможуть надати під час візуалізації вашого веб-сайту, але ви також створюєте більш просунуті функції, які будуть автоматично доступні для браузерів, які можуть його використовувати.
іншими словами, витончена деградація починається зі статус-кво складності і намагається виправити для меншого досвіду, тоді як прогресивне поліпшення починається з дуже простого, робочого прикладу і враховує постійне розширення для майбутніх навколишніх середовищ. Деградація витончено означає озиратися назад, у той час як підвищення прогресивно означає дивитися вперед, зберігаючи ваші ноги на твердій землі.
Витончені Деградації
витончені деградаціїздатність комп'ютера, машини, електронної системи або мережі для підтримки обмеженої функціональності навіть коли велика частина його була зруйнована або виведена з ладу. Ціль звичайно, щоб не допустити катастрофічного провалу.
витончена деградація є одним із рішень. Це практика створення веб-сайту або програми, тому він забезпечує хороший рівень досвіду користувача в сучасних браузерах. Однак, це погіршити витончено на старих браузерів. Система може бути не такою приємною чи красивою, але основна функціональність працюватиме на старих системах.
простий приклад використання 24-бітових Альфа-прозорих PNGs. Ці зображення можуть відображатися на сучасних браузерах без проблем. IE5. 5 і IE6 показали б зображення, але ефекти прозорості зазнали б невдачі (це може бути зроблено, щоб працювати при необхідності). Старі браузери, які не підтримує PNG буде показувати alt текст або порожній простір.
розробники, що приймають витончену деградацію, часто вказують свій рівень підтримки браузера, наприклад, браузери рівня 1 (кращий досвід) та браузери рівня 2 (погіршений досвід).
Поступове підвищення
поступове підвищенняце стратегія веб-дизайну, яка підкреслює доступність, семантична розмітка HTMLта зовнішня таблиця стилів та скриптові технології. Прогресивне підвищення використовує веб-технології у багаторівневій формі, яка дозволяє кожному отримати доступ до основного контенту та функціональність веб-сторінки, використовуючи будь-який браузер або інтернет зв'язку, а також надання розширеної версії сторінки ті, з більш просунутим програмним забезпеченнямбраузера або більшою пропускною спроможністю.
прогресивне підвищення подібно принципової схемидо граціозного погіршення та у зворотному. Веб-сайт або програма буде встановлювати базовий рівень користувацького досвіду для більшості браузерів. Додаткові функції будуть додані, коли браузер підтримує його.
прогресивне покращення не вимагає від нас вибору підтримуваних браузерів або повернення до табличних макетів. Ми вибираємо рівень технології, тобто браузер повинен підтримувати HTML 4.01 та стандартні запити/відповіді на сторінки.
щоб зробити його простіше, просто встановити бар прямо у верхній частині, то ви можете ігнорувати прогресивне поліпшення. коли нова функціявиходить підняти планку;)
або альтернативно встановіть свій бар на найнижчий рівень (можливо, рись?) і використовуйте прогресивне підвищення.
У цій статті ми спробуємо розібратися, в чому різниця між двома принципами створення сторінки на основі «чуйного» веб-дизайну: Progressive Enhancement і Graceful Degradation.
Graceful degradation
Graceful degradation, або «відмовостійкість» - це більш широке поняття, яке застосовується не лише у веб-дизайні. У загальному розумінні передбачає здатність системи працювати навіть у разі відмови деяких її компонентів. І чим серйозніша відмова, тим нижча якість роботи системи або роботи з системою, але при цьому основний функціонал системи залишається робочим.
Graceful degradation може виражатися у можливості роботи з відключеним JavaScript, акуратному відображенні сайту в браузері без підтримки специфікації CSS3, адекватному відображенні сайту з відключеними картинками. Всі ці відмови не повинні впливати на роботу веб-програми. Однак якщо все працює, то користувачеві набагато зручніше користуватися сайтом.
Якщо розглянути конкретний приклад, наприклад у галузі проектування веб-інтерфесу, цей принцип можна сформулювати як «система може працювати і з повністю відключеним JavaScript, але з включеним з нею буде працювати набагато зручніше». Питання не в тому, чи може бути така ситуація, що JS вимкнено або не функціонує повністю, або чому це відбувається. Ця ситуація береться як даність. Дизайнер повинен розробити такий інтерфейс, який так само продовжуватиме працювати, нехай і з відключеним JS.
Часто для дотримання цього принципу доводиться переробляти логіку серверної обробки форм. Однак, такий підхід окупатиметься, якщо задуматися про відмовостійкість ще на етапі планування форми.
Дотримання принципу graceful degradation дозволяє користувачам (кожний користувач - це потенційний клієнт) мати можливість роботи з сайтом у будь-яких ситуаціях.
Progressive Enhancement
Прогресивне поліпшення є принципом, який разом із «mobile first» створює теоретичну основу для «чуйного» (адаптивного) веб-дизайну. Вже його назва каже, що він позиціонує створення веб-сторінки поетапно, циклічно, за принципом від простого - до складного. На кожному із заздалегідь намічених етапів зовнішній вигляд сторінки повинен ставати красивішим, кращим і зручнішим, проте весь функціонал має бути доступний спочатку.
Є більш окремим випадком graceful degradation , оскільки всі побудовані на ньому веб-сторінки повністю відповідатимуть принципу graceful degradation.
Зазвичай створення сторінки за принципом прогресивного поліпшення складається з наступних етапів:
- Створення сторінки на «чистому»HTML
На цьому етапі створюється повнофункціональна сторінка, яка складається з одного лише HTML-коду, семантично і логічно вірного, а значить може інтерпретуватися будь-яким браузером, навіть найпростішим. На цьому етапі не проводиться ніякого форматування і браузер сам форматує сторінку за тими стандартами, які в ньому вкладені. Прогресивне поліпшення наполягає у тому, перший етап найважливіший, оскільки немає у Інтернеті нічого ціннішого, ніж контент.
Коротко: створення семантичної та логічної структури документа - Додавання правилCSS
На цьому етапі застосовується CSS-таблиця старого формату: додається сітка розмітки, позиціонування елементів, застосовуються фонові зображення для блоків, змінюються стилі, кольори та зображення текстів. Загалом, сторінка набуває нового стилізованого вигляду, стає красивішою та приємнішою.
Коротко: надання зовнішнього вигляду документу - Застосування CSS3
Тепер до документа можна застосувати всі ефекти та покращення, передбачені специфікацією CSS3. Тобто додати напівпрозорість, тіні, округлення кутів для блоків, анімаційні плавні переходи для псевдокласів або елементів форм.
Коротко: надання бездоганності зовнішньому виглядудокумента - Створення скриптів наJavaScript
На цьому етапі створюються всі ефекти та принципи взаємодії веб-сторінки з користувачем використанням JavaScript. Це і запити AJAX, і динамічне завантаження чи перевірка даних, анімаційні ефекти та віджети (наприклад, Prototype чи jQuery). Загалом робимо сторінку зручнішою для користувача.
Коротко: взаємодія, інтерактивність, зручність
Спробуємо застосувати цей підхід практично. Розробимо та оформимо найпростішу форму входу на сайт. На першому етапі створимо форму логіну на чистому HTML. Форма не така красива, але вона повністю функціональна. Нижче наведено код сторінки та результат відображення у браузері:
Тепер на другому етапі надамо формі стиль, застосувавши до неї таблицю стилів, що містить лише ті правила, які застосовуються до CSS без спеціальних властивостей. Додамо колір фону, відступи, вирівнювання. Тепер форма виглядає краще:
Тепер додамо правила зі специфікації CSS3. Додамо закріплення до блоків, тіні для полів введення тексту, стилізуємо кнопку, за допомогою нових селекторів приберемо непотрібний відступ зверху. Отримаємо покращену форму:
На останньому етапі можемо створити AJAX запит, щоб користувач міг зайти на сайт без необхідності перезавантажувати сторінку.
При цьому на кожному конкретному етапі (за підтримки його браузером) буде відображатися функціональна сторінка. Але якщо браузер підтримує досконаліші технології, то сторінка стає тільки кращою.
Який принцип слідувати?
Якщо сайт максимально ефективно побудувати за концепцією graceful degradation, то вийде приблизно те саме, що було б при використанні progressive enhancement. То в чому ж тоді різниця?
Справа в тому, що побудувати сайт за принципом graceful degradation досить складно, тому що небагато розробників можуть зробити це якісно. У найпростішому випадку graceful degradation можна зробити таке: створити сайт для самої останньої версіїбраузера, а потім показати користувачам повідомлення, в якому вказується, що їм необхідно завантажити нової версіїбраузер. При цьому розробників може не хвилювати, як сайт виглядає у старих браузерах. Ще одним прикладом поганого graceful degradation є повне відключенняфункціональність сайту при відключенні JavaScript. Яскравий приклад – надсилання повідомлень на сайті Facebook.com.
Тому progressive enhancement виник у відповідь на неякісне graceful degradation. Проектувати такі інтерфейси стало простіше та якісніше, оскільки є чітко сформульовані етапи створення інтерфейсу.
У адаптивний дизайнє поняття «mobile first», яке в чомусь відповідає поняттю progressive enhancement, оскільки закликає діяти від простого до складного, мобільних екранівдо настільних комп'ютерів. Саме тому ключ до правильного застосування адаптивного веб-дизайну залежить від уміння розробника застосовувати принципи progressive enhancement та mobile first.
