Директива @support и ее JS двойники. Можно использовать!

От автора: вчера я прочла замечательную статью «директива @supports изменит вашу жизнь» за авторством Шарлотты Джексон. Я наконец выделила время на то, чтобы познакомиться с этой староновой функцией. Давайте быстренько разберем эту директиву.

Разработчики очень ленивые. Именно поэтому браузеры нам много чего прощают. Они втихую подправляют множество распространенных HTML ошибок и делают нашу жизнь легче. Относительно CSS браузеры работают слегка по-другому. Они уже не исправляют наши ошибки, а просто игнорируют те строки кода, которые не понимают. То есть мы можем использовать новые CSS функции, а браузеры, которые их не поддерживают, просто не будут их применять. Звучит круто, но не всегда результат совпадает с нашими потребностями. Хорошей практикой является писать современную стильную разметку, но в то же время следить за тем, чтобы она хорошо смотрелась в старых браузерах. К примеру, вы хотите стилизовать первую букву в тексте. Такая форма декорации используется в начале параграфа. Первая буква будет занимать несколько строк, а также у нее будут отступы от основного текста:

Это можно реализовать одним современным способом – при помощи CSS свойства initial-letter:

Свойство поддерживается только в последней версии Safari. Посмотрим на результат:

Код можно посмотреть на Codepen. Слева показан скриншот из браузера Safari, справа – Opera/Chrome. Красная буква «L» обычного размера с отступами совсем не смотрится. В этом случае браузер не делает за нас нашу работу. Чтобы не допустить такого плохого результата, необходимо проверять браузер на поддержку определенного свойства.

Определение CSS свойств через JS – довольно распространенная клиентская практика (старый добрый Modernizr). До появления директивы @supports такой функционал в CSS был недоступен. А теперь он у нас есть во всех браузерах кроме IE11. Разберем пример:

Директива @supports похожа на @media запрос в вашем CSS коде. С ее помощью можно проверять поддержку стилей различными способами. Способ выше – самый простой. Можно также использовать операторы not/or/and для создания более сложных выражений, состоящих из нескольких выражений. Точно так же, как вы делаете в @media запросах. Посмотреть API и примеры можно на MDN. Возвращаясь к нашей первой букве, теперь ваш код будет выглядеть так:

По умолчанию никакой декорации, стили применяются только к браузерам, поддерживающим свойство initial-letter. Кстати, я взяла этот пример из выступления Джен Симмонс «настоящее направление искусства в вебе». Посмотрите, не пожалеете.

JS двойник директивы @supports — window.CSS.supports – статический метод, возвращающий Булево значение, указывающее, поддерживает ли браузер переданное CSS свойство или нет. Метод можно вызвать двумя способами:

Разница в наборе параметров. Первый способ позволяет проверить поддержку пары свойство/значение. Второй способ берет один параметр и проверяет его на поддержку @supports. Поддержка данного метода в браузерах почти такая же, как у директивы @supports. Все современные браузеры кроме IE11, а также частичная поддержка в Opera Mini (там используется старый синтаксис window.supportsCSS). Если вы работаете в IE11 или ниже, не забудьте сделать проверку:

Вот и все! Настоятельно рекомендую прочитать статью Шарлотты Джексон. Отличная статья, после нее вы точно захотите пользоваться этой директивой, если у вас оставались сомнения.

Автор: Khrystyna Skvarok

Источник: //medium.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: