Префикс -webkit- доминирует в CSS настолько, что некоторые сайты без него работают неправильно. Это свидетельствует о следовании разработчиков не самым лучшим практикам в последние годы и это привело к неудачному, но практически вынужденному решению со стороны Mozilla. В Firefox версии 46 или 47 (это апрель или май 2016 года), Mozilla планирует реализовать поддержку нестандартных префиксов -webkit- , чтобы улучшить совместимость Firefox с сайтами, активно использующими -webkit (как правило, это сайты, ориентированные на мобильные устройства).
Тем не менее, разработчики применяют префиксы, чтобы использовать новейшие возможности браузеров максимально быстро. Префиксы вызвали беспорядок с доминированием WebKit, но они же заставили веб двигаться вперед ускоренными темпами.
Подход Mozilla и Microsoft безопасен для большинства сайтов. На многих сайтах будет использоваться префикс -moz- или же не потребуется никаких действий для совместимости с будущим обновлением Firefox. Но как профессиональные веб-разработчики, мы должны тщательно рассмотреть и понять, какие последствия это повлечет. Вы наверняка знаете, какие из ваших сайтов могут пострадать от этого обновления.
Итак, пришло время переосмыслить подход к префиксам и протестировать сайты с ними.
Поддерживаемые префиксы
Есть целый ряд префиксов -webkit- , которые Mozilla может реализовать. Исходя тех данных, что я собрал, Mozilla не стремится к совпадению своего списка поддерживаемых префиксных свойств со списком Edge, так как не все из них нужны для совместимости движка раскладки.
Разработчики Firefox также близки к аналогичному подходу:
Текущий тренд в Mozilla это избегание вендорных префиксов за счет отключения не готовых свойств и использовании непрефиксной версии при достаточной стабильности. Это общая политика: в отдельных случаях возможны исключения - Борис из Mozilla
Microsoft Edge также собирается отказаться от вендорных префиксов:
“Microsoft также собирается отказаться от вендорных префиксов в Edge. Это значит, что разработчики, которые стремятся использовать специфичные возможности HTML и 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 и стандартные запросы/ответы на страницы.
чтобы сделать его проще, просто установите бар прямо в верхней части, то вы можете игнорировать прогрессивное улучшение. когда новая функция выходит поднять планку;)
или альтернативно установите свой бар на самый низкий уровень (возможно, рысь?) и как раз используйте прогрессивное повышение.
От автора: префикс -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 браузерах.
Индустрия веб-дизайна постоянно меняется, отчасти потому, что веб-браузеры и устройства постоянно меняются. Поскольку работа, которую мы выполняем как веб-дизайнеры и разработчики, просматривается через веб-браузер, наша работа всегда будет иметь симбиотические отношения с этим программным обеспечением.
Изменения в веб-браузерах
Одна из проблем, с которой всегда сталкивались дизайнеры и разработчики веб-сайтов, - это не только изменения в веб-браузерах, но и ряд различных веб-браузеров, которые будут использоваться для доступа к их веб-сайтам. Было бы замечательно, если бы все посетители сайта использовали новейшее и лучшее программное обеспечение, но это никогда не имело место (и, вероятно, никогда не будет).
Некоторые посетители ваших сайтов будут просматривать веб-страницы с очень устаревшими браузерами и отсутствующими функциями более современных браузеров. Например, более старые версии браузера Microsoft Internet Explorer уже давно стали проблемой для многих веб-профессионалов. Несмотря на то, что компания отказалась от поддержки некоторых из своих самых старых браузеров, все еще есть люди, которые будут ими пользоваться - люди, с которыми вы, возможно, захотите иметь дело и общаться с ними.
Определение «изящной деградации»
Реальность такова, что люди, которые используют эти устаревшие веб-браузеры, часто даже не знают, что у них устаревшее программное обеспечение или что их работа в Интернете может быть скомпрометирована из-за их выбора программного обеспечения. Для них этот устаревший браузер - это просто то, что они давно используют для доступа к веб-сайтам. С точки зрения веб-разработчиков, мы хотим быть уверенными в том, что сможем предоставить этим клиентам полезный опыт, а также создавать веб-сайты, которые прекрасно работают в более современных, многофункциональных браузерах и устройствах, доступных сегодня.
«Изящная деградация» - это стратегия обработки дизайна веб-страниц для различных браузеров, как старых, так и новых.
Начиная с современных браузеров
Дизайн веб-сайта, созданный для постепенного ухудшения качества, разрабатывается в первую очередь с учетом современных браузеров. Этот сайт создан с целью использования возможностей этих современных веб-браузеров, многие из которых «автоматически обновляются», чтобы люди всегда использовали последнюю версию. Тем не менее, веб-сайты, которые изящно деградируют, также работают эффективно для старых браузеров. Когда эти старые, менее функциональные браузеры просматривают сайт, он должен ухудшаться, пока он все еще функционирует, но, возможно, с меньшим количеством функций или других визуальных элементов отображения. Хотя эта концепция предоставления менее функционального или не очень привлекательного сайта может показаться вам странной, правда в том, что люди даже не узнают, что они пропали без вести. Они не будут сравнивать сайт, который они видят, с «лучшей версией», так что, пока сайт работает на то, что им нужно, и, по-видимому, не сломан ни функционально, ни визуально, вы будете в хорошей форме.
Прогрессивное улучшение
Концепция постепенной деградации во многом похожа на другую концепцию веб-дизайна, о которой вы, возможно, слышали - прогрессивное улучшение. Основное различие между стратегией постепенного ухудшения и прогрессивным улучшением заключается в том, где вы начинаете свой дизайн. Если вы начинаете с наименьшего общего знаменателя, а затем добавляете функции для более современных браузеров для своих веб-страниц, вы используете прогрессивное улучшение. Если вы начнете с самых современных, передовых функций, а затем уменьшите масштаб, вы будете использовать постепенную деградацию. В конце концов, созданный в результате веб-сайт, вероятно, предоставит такой же опыт, независимо от того, используете ли вы прогрессивное улучшение или постепенную деградацию. Реально, смысл любого из подходов состоит в том, чтобы создать сайт, который отлично работает для современных браузеров, и в то же время предоставляет удобный опыт для старых веб-браузеров и клиентов, которые продолжают их использовать.
Изящная деградация не означает, что вы говорите своим читателям: «Загрузите самый последний браузер»
Одна из причин, по которой многим современным дизайнерам не нравится подход изящной деградации, заключается в том, что он часто превращается в требование, чтобы читатели загружали самый современный браузер для работы страницы. Это не грациозная деградация. Если вам захочется написать «загрузите браузер X, чтобы эта функция заработала», вы покинете область постепенного ухудшения и перейдете к дизайну, ориентированному на браузер. Да, несомненно, полезно помочь посетителю веб-сайта перейти на более качественный браузер, но об этом часто приходится спрашивать (помните, что многие люди не понимают, как загружать новые браузеры, и ваше требование сделать это может просто напугать). их прочь). Если вы действительно хотите, чтобы их бизнес велел им сказать, что они покидают ваш сайт, чтобы загружать более качественное программное обеспечение, вряд ли это будет возможным. Если ваш сайт не обладает ключевой функциональностью, для которой требуется определенная версия браузера или выше, принудительное скачивание часто нарушает условия взаимодействия с пользователем, и его следует избегать.
Хорошее эмпирическое правило - следовать тем же правилам для постепенного ухудшения, что и для прогрессивного улучшения:
- Написать действительный, соответствующий стандартам HTML
- Используйте внешние таблицы стилей для вашего дизайна и макета
- Используйте внешне связанные скрипты для интерактивности
- Убедитесь, что контент доступен даже для браузеров низкого уровня без CSS или JavaScript
Имея в виду этот процесс, вы можете выйти и создать самый современный дизайн, какой только сможете! Просто убедитесь, что он работает в менее функциональных браузерах, все еще работая.
Как далеко назад нужно идти?
Один вопрос, который возникает у многих веб-разработчиков, заключается в том, насколько далеко вы должны поддерживать браузерные версии. На этот вопрос нет точного и сухого ответа. Это зависит от самого сайта. Если вы просмотрите аналитику трафика на сайте, вы увидите, какие браузеры используются для посещения этого сайта. Если вы видите значительный процент людей, использующих определенный более старый браузер, то вы, вероятно, захотите поддержать этот браузер или рискуете потерять этот бизнес. Если вы посмотрите на свою аналитику и увидите, что никто не использует более старую версию браузера, вы, вероятно, можете принять решение не беспокоиться о полной поддержке этого устаревшего браузера и его тестировании. Таким образом, реальный ответ на вопрос о том, как далеко назад ваш сайт нуждается в поддержке, - «как бы далеко назад ваши аналитики ни говорили вам, что ваши клиенты используют».
Под редакцией Джереми Жирар.
В этой статье мы попробуем разобраться, в чем же разница между двумя принципами создания страницы на основе «отзывчивого» веб-дизайна: 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.