От автора: техника прогрессивного улучшения позволяет нам использовать множество удивительных функций в CSS, даже если не все пользуются браузерами с поддержкой данных свойств. При использовании новых CSS свойств зачастую создание фолбэков мы отдаем самому CSS. CSS же прощает нам это и просто игнорирует строки кода, которые он не понимает. Таким образом, если браузер не поддерживает какое-то свойство, он просто не применит его. Разберем пример.
CSS формы
CSS формы – простой, но красивый инструмент, и их очень легко добавить в браузер, который их поддерживает. Можно заставить текст огибать круглое изображение, как на картинке ниже:
CSS код. Обратите внимание на свойство shape-outside.
|
1 2 3 4 5 6 7 8 |
.shape { width: 20em; height: 20em; float: left; margin: 1em 2em 1em 0; border-radius: 25em; shape-outside: circle(50%); } |
На прошлой неделе общая поддержка браузерами свойства shape-outside составляла 65%. Не идеально, но нам это неважно. Картинка все равно смотрится хорошо в браузерах без поддержки данного свойства. Текст будет просто обтекать картинку по прямым линиям, как раньше.
Такой подход позволяет нам использовать множество CSS свойств, но не все. Что будет с более мощными свойствами, которые смотрятся уже не так хорошо в браузерах без поддержки? Разберем, к примеру, режимы наложения.
Режимы наложения
Когда я последний раз проверял, свойство background-blend-mode поддерживалось в 72% браузеров. CSS код будет такой:
|
1 2 3 4 5 6 |
.wrapper { background-image: linear-gradient(lightblue 0%, pink 100%), linear-gradient(to right, pink 30%, white 100%), url("//c7.staticflickr..."); ... background-blend-mode: hue; } |
Здесь у нас несколько фоновых изображений: одно изображение и два линейных градиента. Был применен режим наложения. В 72% браузеров вы увидите следующую картинку:
А вот что вы увидите в браузерах, которые не поддерживают режимы наложения:
Мы видим только градиенты, так как они расположены поверх изображения. Градиенты перемешались, как и должно быть. Без изображения то сообщение, которое мы хотели передать, не работает. Кроме того, текст очень плохо читается. Такое точно нельзя использовать на готовом сайте.
Но давайте не будем сбрасывать режимы наложения со счетов! Их можно использовать на готовых сайтах. Для этого нам необходимо задействовать очень мощный инструмент в CSS, который может изменить вашу жизнь. И это правило @supports.
Правило @supports
Правило @supports позволяет писать условные выражения в CSS для проверки поддержки свойства в браузере. По результатам условия применяется определенный блок кода. Правило @supports также называют запросом на поддержку свойства. Запросы на поддержку свойства похожи на медиа запросы:
|
1 2 3 4 5 |
@supports (background-blend-mode: hue) { /* этот код сработает только, если Браузер поддерживает свойство background-blend-mode: hue */ } |
На первой строке мы пишем @supports, а дальше все как в условии if. В скобках на первой строке мы говорим: «если свойство background-blend-mode: hue; поддерживается, то примени все свойства из фигурных скобок». Если же свойство не поддерживается, свойства в фигурных скобках применены не будут. Ниже пример кода с правилом @supports и режимами наложения для продакшена.
|
1 2 3 4 5 6 7 8 9 10 |
.wrapper { background-image: url(“// c7.staticflickr…"); } @supports (background-blend-mode: hue) { .wrapper { background-image: linear-gradient(lightblue 0%, pink 100%), linear-gradient(to right, pink 30%, white 100%), url(“//c7.staticflickr.com/2/1510/…”); background-blend-mode: hue; } } |
Стили класса wrapper сверху применяются ко всем браузерам. То есть во всех браузерах мы как минимум получим фоновое изображение. Далее идут стили в правиле @supports, которые применяются только в тех браузерах, которые поддерживают свойство background-blend-mode: hue. Ниже представлен предыдущий пример в браузерах без поддержки режимов наложения. Стало намного лучше, теперь его можно использовать на готовом сайте.
Поддержка в браузерах правила @supports
Отлично, а что с поддержкой правила @supports в браузерах? На данный момент она составляет 77%. Нет поддержки в IE и Opera mini. Что будет, если правило @supports не поддерживается? В таком случае код в фигурных скобках просто не сработает.
Ниже показан предыдущий пример. Вот что мы увидим на экране, если правило @supports не поддерживается. Результат будет точно таким же, как и выше, так как стили внутри правила не сработали.
CSS формы и правило @supports
Теперь мы можем исправить пример с формами, который был в самом начале статьи. Помните, как текст огибал круглое изображение, когда свойство shape-outside поддерживалось в браузере? А когда свойство не поддерживалось, текст просто обтекал круглое изображение по прямым линиям.
Теперь мы можем сказать браузеру, чтобы он применял свойство border-radius только в том случае, если поддерживается свойство shape-outside.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.shape{ width: 20em; height: 20em; float: left; margin: 0.25em 2em 1em 0; } @supports (shape-outside: circle()) { .shape { shape-outside: circle(50%); border-radius: 25em; } } |
Если браузер поддерживает shape-outside, вы увидите изображение слева, а если нет – изображение справа. Смотрится намного лучше!
С помощью or и and можно делать несколько проверок. Если хотите полностью обезопасить себя, в условие необходимо добавить еще одну проверку на border-radius:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.shape{ width: 20em; height: 20em; float: left; margin: 0.25em 2em 1em 0; } @supports (border-radius: 25em) and (shape-outside: circle()) { .shape { shape-outside: circle(50%); border-radius: 25em; } } |
Обычно мы использовали библиотеку Modernizr для определения неподдерживаемых в браузере свойств. Этот способ работает, но лучше не использовать JS. Modernizr – небольшая библиотека, однако она должна загружаться до применения стилей. Всегда есть риск, что JS не выполнится.
Я так рада, что появилось правило @supports. Это действительно очень мощный инструмент, и я думаю, мы будем часто им пользоваться при написании новых CSS стилей.
Автор: Charlotte Jackson
Источник: //www.lottejackson.com/
Редакция: Команда webformyself.
