Або все-таки Graceful Degradation?
Не можна просто так взяти і розповісти про progressive enhancement, не згадавши про graceful degradation. У чому ж різниця між цими поняттями? Як вже говорилося раніше. graceful degradation можна перевести як відмовостійкість. Це дуже широке поняття, але в контексті інтернету його можна розуміти як відмовостійкість клієнтських веб-інтерфейсів, серверної частини сайтів і так далі. У цій статті graceful degradation буде розумітися як відмовостійкість клієнтських веб-інтерфейсів.
Що ж таке progressive enhancement? Найчастіше цей термін перекладають, як прогресивне поліпшення. Прогресивне поліпшення передбачає, що веб-інтерфейси повинні створюватися поетапно, циклічно, від простого до складного. На кожному етапі повинен виходити закінчений веб-інтерфейс, який буде краще, красивіше і зручніше попереднього. Можна сказати, що зараз таких етапів чотири:
«Старий-добрий-HTML» етап
На другому етапі документ оформляється за допомогою старого доброго CSS і знаходить більш акуратний вигляд: з'являється сітка сторінки, задаються параметри шрифту елементів, фонові зображення і так далі.
На третьому етапі застосовуються нові можливості з сімейства специфікацій CSS3, і документ доводиться до блиску: напівпрозорі плашки, круглі куточки, тіні. Також за допомогою CSS3 можна додати різні анімаційний-декоративні фішечки: поступове згасання або зсув елементів, підсвічування полів форм і так далі.
Резюмуємо призначення описаних етапів:
Сенс документа, логічна розмітка. Технологія: HTML.
Зовнішній вигляд. Технологія: CSS.
Бездоганний зовнішній вигляд. Технологія: CSS3.
Можна сказати, що веб-інтерфейс, створений сумлінно і якісно, відповідно до підходу graceful degradation, буде вести себе так само, як і веб-інтерфейс, побудований відповідно до progressive enhancement. Тобто, progressive enhancement - це не що інше, як graceful degradation, доведений до досконалості. Все ж відзначимо ключові відмінності цих понять:
- Graceful degradation - більш широке поняття, ніж progressive enhancement, який обмежений тільки веб-інтерфейсами. Progressive enhancement - це наше, рідне, вебовское.
- Progressive enhancement задає вектор руху (починай з простого!), А для graceful degradation це не так важливо.
- Progressive enhancement наполягає на важливості змісту, а для graceful degradation воно на другому плані.
Загалом, progressive enhancement - це більш сувора і послідовна ідеологія розробки веб-інтерфейсів.
Чому з'явився Progressive Enhancement
Раніше говорилося, якщо взяти і, відповідно до graceful degradation, максимально якісно зробити веб-інтерфейс, то вийде те ж саме, що і при застосуванні progressive enhancement. Так навіщо ж було вигадувати цей enhancement?
Відповідь проста: мало хто робив graceful degradation дуже якісно. Це засмучувало дійсно висококласних і відповідальних розробників. Адже сказати, що «я - молодець і роблю graceful degradation» міг майже будь-який, але витрати сил і часу у розробників розрізнялися на порядки.
Така халтура з отказоустойчивостью порядком набридла «правильним» розробникам, і треба було щось робити. Progressive enhancement виник як реакція на поганий graceful degradation. Тепер дійсно хороші розробники і дизайнери можуть робити progressive enhancement, а погані не можуть, так як це складніше і трудомісткий. Заодно новий підхід ввібрав в себе всі кращі практики з graceful degradation.
практичний приклад
На першому етапі створимо форму за допомогою чистого HTML. Так, форма не така красива, зате функціональна. Отриманий код і результат зображені на малюнку:
На другому етапі c допомогою найпростішого CSS зробимо форму красивіше: додамо фон, розміри, відступи. Тепер форма виглядає краще:
На третьому етапі використовуємо деякі нові CSS властивості, щоб надати формі блиск. Додамо заокруглення за допомогою border-radius, тіні для елементів за допомогою box-shadow, використовуємо css-градієнти для оформлення кнопки і так далі. Використовуємо деякі просунуті селектори, щоб позбутися від зайвих відступів. Результат досить хороший:
На простому прикладі ми показали, як працює підхід progressive enhancement. До речі, даний приклад можна «помацати наживо» в інтерактивній демонстрації на HTML Academy.
Логінитися будемо за допомогою AJAX, значить з формою морочитися не треба, використовую div. Круглі куточки і тенюшки ... Це проблема. Для полів введення використовую input без кордонів, а фоном задам картинку з рамкою і тінями. Кнопку зроблю за допомогою div, на фон повішу картинку кнопки з градієнтом і тінями. Класно! І в старому IE буде красиво виглядати, і всього кілька картинок вирізати.