Принципы Graceful Degradation и Progressive Enhancement в веб-разработке
В этом месяце, работая над одним из рабочих веб-проектов, столкнулся с типичной по вредности проблемой в верстке заключающейся в явном фиксировании соотношения сторон элемента, при любом масштабе. Ранее подобная задача решалась довольно неприятными костылями, но в современных браузерах появилось удобное CSS-свойство aspect-ratio, позволяющее задать требуемое соотношение сторон элемента, например 1 / 1 (квадратный) или 16 / 9 (широкоформатный) и пр.
К сожалению aspect-ratio в браузерах поддерживаться стал где-то с начала 2021 года, т.е. не так уж и давно, что ощутимо для Safari (WebKit) на IOS, поскольку там браузер сильно привязан к версии системы, а браузеры на других движках недоступны (сторонние браузеры на iOS могут использовать только системный WebKit, а не свои собственные движки). Полифилы для этого свойства есть, но к сожалению у них есть множество неприятных побочных эффектов в реализациях (конфликт с существующими свойствами или псевдоэлементами). Такое требует более обширного тестирования результата, что повышает затраты по человекочасам и итоговую стоимость работ.
Так вот, даже с учетом вышеперечисленных проблем, я не стал париться и со спокойной совестью использовал в рабочем проекте это новое свойство (aspect-ratio), при этом оставаясь в рамках требований Технического Задания, а все потому что использовал в работе подход Gracefull Degradation.
Graceful Degradation
Graceful Degradation ("Изящная деградация") — подход, при котором проект разрабатывается под новые версии браузеров с использованием всего спектра современных технологий, но с частичной обратной совместимостью, за счет упрощенной альтернативы или каких-то некритичных потерь (потери в визуальной части, отказ от анимаций, ухудшение юзабилити и пр.) предоставляется необходимый контент и функциональность в старых браузерах.
Деградация должна быть постепенной, т.е. для не самых новых, но вполне актуальных версий браузеров, не стоит проводить существенную деградацию, поскольку еще многие не обновили браузер до самой новой версий. Подобное очень актуально для пользователей LTS-версий браузеров.
Логично предположить, что чем более старые браузеры, тем более ощутимые потери будут допустимы в визуале и некритической функциональности. И в какой-то определенной степени, вполне возможно уже просто показать плашку: "Ваш браузер устарел"
Progressive Enhancement
Progressive Enhancement ("Прогрессивное улучшение") — подход, при котором проект изначально разрабатывается под максимальное покрытие браузеров, с последующим добавлением каких-то плюшек и возможностей для более современных версий браузеров.
В какой-то степени этот подход похож на Graceful Degradation, основная разница в контексте исполнения. Суть в том, что при проектировании в Progressive Enhancement, мы изначально опираемся на возможности максимального широкого охвата браузеров (за исключением совсем уж древних версий) и уже с этой точки рассматривается применение различных фич более современных браузеров, в то время как Graceful Degradation изначально стремиться показать наилучший вид пусть и не максимальному, но подавляющему большинству пользователей, с последующей деградацией (изящной!), для мало популярных и старых браузеров.
Если очень упрощенно, то Graceful Degradation — это подход "от изначально лучшего к упрощенному", а Progressive Enhancement "от изначально простого к улучшенному".
Давайте представим пример в котором вы разработали какой-то сайт, который должен работать практически везде где только можно, но в тоже время, вы решили как-то улучшить внешний вид для пользователей Safari, за счет использования фишек, поддерживаемых только в этом браузере. Так вот, это вполне в духе Progressive Enhancement, т.к. мы изначально идем путем от самой доступной всем версии к ее улучшенной версии с поддержкой каких-то особенностей, доступных более узкому кругу пользователей.
В основном в работе мне приходится применять только подход Graceful Degradation, поскольку мне обычно в реализацию приходят дизайн-макеты, согласованные с клиентом. Как обычно, в этих дизайн-макетах представлена изначально отполированная и идеально выглядящая версия, т.е. клиент сразу видит наиболее люксовый вариант, за который он платит, а не самый простой и бедный вариант. Эта ситуация вполне нормальная для веб-дизайнеров и я не могу их в этом винить, ибо это их хлеб.
А вообще я Graceful Degradation стал особо ценить, еще с тех времен, когда было модно среди веб-дизайнеров в макетах скруглять все что только возможно, но при этом border-radius не поддерживался в распространенном кошмаре веб-разработчиков тех времен Internet Explorer 6 (7, 8). Закругления часто делались в виде изображения, которое затем тупо нарезалось. В итоге верстка была ужасная, ни о какой семантике не шло и речи, времени тратилось уйма, натягивалось это все на шаблоны CMS не без сюрпризов, грузилось медленно, сопровождение такого кода приводило к нервному срыву и даже страдали пользователи нормальных браузеров, в которых все это можно было реализовать вполне нативными средствами, но их браузер должен переваривать все эти ненужные им костыли. А потом в итоге выяснялось, что полная поддержка старых браузеров была реально нужна только единичным клиентам.
В последующем, когда уже самому приходилось общаться с клиентами, я не раз убеждался, что многим из них очень нравится принцип Graceful Degradation за отличный компромис соотношении "срок разработки / качество / охват пользователей / стоимость", а деньги клиенты считать умеют!
Заключение
Перед тем как применять подход Graceful Degradation в коммерческом проекте, важно вначале утвердить его в Техническом Задании ("Без ТЗ результат ХЗ"), чтобы в последующем исключить какие-то непонимая между вами и клиентом в вопросах итогового результата.
А так, подходы Gracefull Degradation и Progressive Enhancement не являются чем-то новым, существуют уже давно и успешно применяются не только в веб-разработке. Это скорее паттерны, которые выработались исходя из опыта множества разработчиков и веб-дизайнеров с учетом реалий. А уж применять эти паттерны или нет, решать уже вам.