• ×

    • Метод постепенного улучшения с CSS3: Поддержка современных браузеров. В чем разница между прогрессивным улучшением и изящной деградацией? Постепенной деградации, основанной на префиксах больше не будет

    29.06.2020

    Я запутался в том, что разница между Постепенное Повышение и Изящные Деградации . Мне они кажутся одним и тем же.

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

    8 56 2010-03-31 08:05:38

    8 ответов:

    Они почти точно то же самое, но они отличаются в контексте.

    существует класс браузеров под названием "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 и стандартные запросы/ответы на страницы.

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

    или альтернативно установите свой бар на самый низкий уровень (возможно, рысь?) и как раз используйте прогрессивное повышение.

    Конечно, 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 отображают страницу недостаточно «красиво», то симпатии окажутся на стороне прогресса.

    Я смущен тем, что разница между Постепенное Повышение и Изящные Деградации . Мне кажется, это одно и то же.

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

    8 ответов

    Они почти то же самое, но они отличаются в контексте.

    существует класс браузеров под названием "браузеры класса A". Это ваши типичные члены аудитории,которые (вероятно) составляют большинство ваших посетителей. Вы начнете с базового уровня этих пользователей. Назовем это лучшие современные практики .

    Если вы хотите увеличить опыт для тех, кто случайно использует FF3.6 или Safari 4 или какой-то другой разработчик whizbang nightly webkit whathaveyou, вы хотите сделать удивительные вещи, как

    • закругленные углы через css
    • затененный текст (но, пожалуйста, Боже, не слишком много)
    • drop shadows (см. выше в скобках)

    Это делает ваш сайт пипец ищет, но не сломает его. Это постепенное повышение . Охватывая будущее с точки зрения лучшие практики .

    с другой стороны, ваш нишевый сайт Nintendo привлекает достаточное количество пользователей IE5. Бедный ты, но ты также хочешь убедиться, что они продолжают возвращаться. Вы можете предоставить альтернативу вашему поведению ajax, включив сценарий ajax во внешний файл, и если их JS не включен, возможно, Ваши ссылки обновляют всю страницу. Так далее. С точки зрения лучшие современные практики , вы убедитесь, что некоторые исторические рынки обслуживаются некоторое подобие функционального сайта . Это изящный деградация .

    Они в основном идентичны, но отличаются с точки зрения приоритета для многих команд разработчиков: PE довольно приятно, если у вас есть время, но GD часто необходимые

    Если ваш сайт выглядит одинаково хорошо во всех браузерах, но некоторые браузеры получают, скажем, танцующих пони, потому что они поддерживают танцующих пони, то это прогрессивное улучшение. Он работает во всех браузерах, но некоторые браузеры получают что-то дополнительное. Обычно этот термин применяется к определенным функциям Javascript, которые могут повысить удобство использования за пределами "raw HTML".

    Если ваш сайт выглядит только так, как вы собираетесь в браузерах, которые полностью поддерживают, скажем, CSS3 и IE8-отобразит ту же страницу без, скажем, закругленных углов, тогда это изящная деградация. Сайт действительно предназначен для современных браузеров, но он по-прежнему используется в старых браузерах, просто не так причудливо.

    в конце концов, они действительно одно и то же, рассматриваемое с двух разных точек зрения.

    направление от выбранного базовый для каждого понятия разные.

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

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

    Я думаю, что можно было бы использовать обе концепции, если позволит время/бюджет. Если нет, то предпочтительнее изящная деградация.

    Извините, что воскрешаю что-то, что старше года, но чувствовал, что могу внести свой вклад, в некотором роде, мое собственное мнение по этому вопросу.

    хотя я согласен с Алексом Mcp и deceze в некотором роде, термины "изящная деградация" и "прогрессивное улучшение" имеют несколько иное значение, чем я стою.

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

    Постепенное Повышение хотя (и это такой хороший термин, чтобы сказать тоже), казалось бы, больше о создании чего-то, что просто работает, на начальном уровне, везде, с помощью самых основных доступных методов, чтобы обеспечить всю функциональность, которая нужна пользователю. Затем это можно добавить с помощью аккуратных маленьких ненавязчивых помощников, укладки и т. д. это фактически улучшает пользовательский опыт рассматриваемого приложения, а не просто делает его едва пригодным для использования. ", что выглядит круто. Работает ли он в IE6. О да. Он Делает"

    Я думаю, может быть, давая стиль в качестве примера обоих терминов в двух лучших ответах здесь вид упускает реальную основную проблему юзабилити, что постепенное повышение часто решает по своей природе, где изящные деградации игнорирует, пока все не пойдет не так.

    Тирада закончилась...

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

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

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

    Изящные Деградации

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

    изящная деградация-одно из решений. Это практика создания веб-сайта или приложения, поэтому он обеспечивает хороший уровень пользовательского опыта в современных браузерах. Однако, это ухудшить изящно на старых браузеров. Система может быть не такой приятной или красивой, но основная функциональность будет работать на старых системах.

    простой пример-использование 24-битных Альфа-прозрачных PNGs. Эти изображения могут быть отображены в современных браузерах без проблем. IE5.5 и IE6 покажут изображение, но Эффекты прозрачности не сработают (при необходимости его можно заставить работать). Старые браузеры, которые делают не поддержка PNG покажет текст alt или пустое пространство.

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

    Постепенное Повышение

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

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

    прогрессивное улучшение не требует от нас выбора поддерживаемых браузеров или возврата к макетам на основе таблиц. Мы выбираем уровень технологии, т. е. браузер должен поддерживать HTML 4.01 и стандартные запросы/ответы на страницы.

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

    ссылки

    Википедия: Постепенное Повышение и

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

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

    В этой статье я расскажу о том как сделать приятные (постепенные) улучшения в браузерах которые поддерживают особенности CSS3 и при этом показать удовлетворяющую остальных пользователей вёрстку.

    Что такое постепенное улучшение (progressive enhancement)?

    Чтобы понять концепцию "постепенного улучшения", нужно понять принцип "лёгкого ухудшения" (graceful degradation), который хорошо описан следующей цитатой:

    Лёгкое ухудшение означает что ваш сайт продолжает работать даже если просматривается в менее чем оптимальном браузере, в котором продвинутые эффекты не работают.
    Fluid Thinking, by Peter-Paul Koch

    "Постепенное улучшение" использует тот же метод только с противоположной стороны, вместо заботы о том чтобы сайт не развалился в старом браузере, нужно прежде всего думать о контенте и просто добавлять в дизайн особенности современных программ чтобы улучшить пользовательское восприятие, в то время как базовое состояние вёрстки всё ещё работает на старых машинах. Это на текущий момент наилучший, способ применять новые возможности CSS 3.

    Пример

    Для примера сделаем простое меню навигации которое будет выглядеть немного красивее в зависимости от поддержки CSS в вашем любомом браузере.

    Хотела бы заметить что в этом примере я не использую графику, хаки или браузеро-специфические префиксы - все улучшения засчёт декларированных возможностей. Подразумевая это некоторые вещи ниже сделаны специально для примера, и могут быть не лучшим выбором в создании реальных сайтов.

    Разметка

    Сделаем простое меню используя неупорядоченный список (ul):

    Базовый стиль

    В качестве базового я применю стиль который использует только простые селекторы наслезования. Он создаёт границу у каждого элемента и меняет фон при наведении мыши (onmouseover). Это должно работать в любом браузере сделанном за последние 7-8 лет (и возможно больше).

    CSS очень прост:

    Ul {
    background-color: blue;
    border-bottom: 1px dotted #999;
    list-style: none;
    margin: 15px;
    width: 150px;
    }

    li {
    background-color: #fff;
    border: 1px dotted #999;
    border-bottom-width: 0;
    font: 1.2em/1.333 Verdana, Arial, sans-serif;
    }

    li a {
    color: black;
    display: block;
    height: 100%;
    padding: 0.25em 0;
    text-align: center;
    text-decoration: none;
    }

    li a:hover { background-color: #efefef; }

    Единственная странность тут это синий фон у

      ; это я объясню позже. С этим стилем, у нас будет следующий базовый вид, он будет отображаться в IE6 так:

      Базовая вёрстка, так будет выглядеть в IE6 и других старых браузерах.

      Применение улучшений

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

      Body > ul { border-width: 0; }

      ul > li {
      border: 1px solid #fff;
      border-width: 1px 0 0 0;
      }

      li > a {
      background-color: #666;
      color: white;
      font-weight: bold;
      }

      li:first--child a { color: yellow; }

      li > a:hover { background-color: #999; }

      С этими правилами CSS, список выглядит так:

      У меню теперь цветной фон и жирный текст, а также первая ссылка подсвечена другим цветом.

      Так отобразят список IE7, Firefox, Safari и Opera.

      Сделаем больший акцент

      Следующим шагом увеличим акцент, используя свойство которое IE не распознаёт: Прозрачность (opacity). Нам не надо применять специальных селекторов для этого, т.к. IE просто пропустит то свойсво которое он не поддерживает:

      Li { opacity: 0.9; }

      li:hover { opacity: 1; }

      Следующая картинка показывает как это свойство работает в опере, вы можете увидеть что элементы списка приобрели лёгкий синий оттенок от фона

        . При наведении мыши (mouseover), каждый элемент становится полностью непрозрачным:

        Вы можете конечно использовать IE"шное свойство filter для этого же эффекта в IE. Равно как и браузеро-специфичные префиксы (-moz-, -webkit-) для нижеуказанных свойств. Но в образовательных целях я придержусь стандарта CSS, так как filter не стандартное свойство, то оно и не валидно.

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

        Li a:hover { text-shadow: 2px 2px 4px #333; }

        Как показывает следующая картинка, элемент при наведении приобретает небольшую тень и кажется слегка выступающим со страницы:

        Наконец, можно позаботиться полной поддержки Оперой новых CSS 3 селекторов и добавить ещё один слой улучшений: переменные цвета фона используя селектор nth-child:

        Li:nth-child(2n+1) a { background-color: #333; }

        li:nth-child(n) a:hover {
        background-color: #aaa;
        color: #000;
        }

        li:first--child > a:hover { color: yellow; }

        Мы увидим полосатое меню в Опере:

        Итог и выводы

        На рисунке ниже видно как начальная разметка выглядит в IE6, IE7, Firefox, Safari и Опере, после применения правил CSS описанных в этой статье. как вы можете видеть, так как поддержка браузерами CSS становится всё более утончённой, меню становится более стильным и сложным, и используя технику постеменного улучшения, меню остаётся рабочим даже в очень старых браузерах.

        Конечно, многие браузеры имеют вереницу других свойств которые я не описала здесь но которые можно использовать, например RGBA цвета и SVG как цвета фона.

        В этой статье мы попробуем разобраться, в чем же разница между двумя принципами создания страницы на основе «отзывчивого» веб-дизайна: 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.

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое