Прогрессивная деградация


    Как правильно понимать принцип прогрессивного улучшения?

    Давайте заодно разберёмся и с постепенной деградацией.


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


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


    Вы могли встречать в статьях аббревиатуры PE и GD или полные их версии Progressive Enhancement и Graceful Degradation. Длинные сложные слова, за которыми стоят какие-то мутные идеи, да? На самом деле, всё проще. Начнём с того, что сделаем их ближе: прогрессивное улучшение и постепенная деградация. Сразу как-то роднее стали.


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


    .column {
      float: left;
    }
    @supports
      (display: grid) {
        .main {
          display: grid;
        }
    }

    Или вот обычный сайт, он как работает: есть интернет — грузится, нет интернета — извините. Кругом врайфай и офлайн. А вы к нему подключаете сервис-воркер, который хранит ресурсы сайта в своём кэше, контролирует сетевые запросы и в случае офлайна отдаёт всё оттуда. Вот это магия! А ещё — прогрессивное улучшение. Сайт может вообще ничего не знать про сервис-воркер, но он работает независимо.


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


    .element {
      background-image:
        url(bitmap.png);
      background-image:
        url(vector.svg);
    }

    На самом деле, одну и ту же ситуацию, можно повернуть и как прогрессивное улучшение, и как постепенную деградацию. Например, у вас есть форма входа, которая всплывает диалогом после нажатия на кнопку «войти». Но если открыть эту «кнопку» в отдельной вкладке, то вы сможете войти на отдельной странице с этой формой. Какой здесь работает принцип? А чёрт его знает.


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


    <a onclick="login()"
       href="login.html">
         Войти
    </a>

    Но если у вас модное одностраничное приложение с рендерингом на клиенте и форма логина с самого начала — это диалог, а для старых браузеров вы рендерите статические HTML-страницы на сервере и вместо диалога тогда загружается страница логина — это уже постепенная деградация. Вы тоже молодцы.


    И здесь мы подходим к общей приятной особенности этих принципов. Дело не только в старых браузерах: во фронтенде много чего может пойти не так, особенно со скриптами. Заблокировали чужой CDN, ваш сервер запятисотил, неудачно назвали файл и его съел адблокер — кругом враги. Но если у вас всё прогрессивно улучшается или постепенно деградирует, то проблем гораздо меньше.


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


    Какой принцип выбрать? Да сразу оба! Их легко можно сочетать. Но если выбирать глобальный принцип для всего проекта, то лучше смотреть, какая аудитория вам важнее. Проекту с историей лучше подойдёт прогрессивное улучшение, новому-клёвому будет проще с постепенной деградацией.


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


    Видеоверсия



    Вопросы можно задавать здесь.

    HTML Academy 140,87
    Интерактивные онлайн-курсы
    Поделиться публикацией

    Вакансии компании HTML Academy

    Комментарии 5
    • 0
      Например, у вас есть форма входа, которая всплывает диалогом после нажатия на кнопку «войти». Но если открыть эту «кнопку» в отдельной вкладке, то вы сможете войти на отдельной странице с этой формой. Какой здесь работает принцип?
      Ненавязчивый JavaScript (Unobtrusive JavaScript). ;-)
      • 0
        Подождите. Если у вас уже все работает на float:left;, то зачем еще дописывать туда display:grid? Это даст какое-то улучшение? Скорее всего нет. Верстка и так готова, так какой смысл делать то же самое, но новыми технологиями, при этом оставляя старые?

        Например, когда раньше не работали градиенты в background, то ставили второй background:#efc; чтобы отображалось «хоть что-то». В этом был смысл, т.к. иначе что-то не работало. В статье же «и так работает, но мы все продублируем».
        • +1
          Пример с гридами не очень удачный. Чисто теоретически представить себе такую ситуацию можно — типа, на флоатах делаем какую-то базовую сетку, а потом в гридах более сложную, адаптивную, с какими-то рюшечками. Но на практике, конечно, никто так делать не будет — слишком много подводных камней, трудно тестировать и поддерживать. В целом, подход GD намного естественнее и практичнее, чем PE.
          • +1

            Надежнее. Скорее всего, еще и быстрее (меньше перекомпоновок-переотрисовок при построении макета). Красивее (на флоатах фиг сделаешь колонки одинаковой высоты без адских вывертов и добавочной разметки, во флексах-гридах это «из коробки»). Дополнительные возможности выравнивания всей этой красоты (например), которые не снились флоатам. И т.д.


            Т.е. для тех, кто может — работает офигенно. Для остальных — просто работает:)

          • 0
            Graceful Degradation также часто переводят как «отказоустойчивость», что весьма наглядно

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое