Определение поддержки свойств с помощью @supports CSS

Определение поддержки свойств с помощью @supports CSS

От автора: С момента своего возникновения браузерная поддержка CSS3 была непостоянной, выполнение поддержки свойств не просто хорошая идея, а лучшая практика.

Хотя такая проверка обычно делается с помощью JavaScript, было бы идеально проводить ее внутри CSS, и вот где @supports выходит на первый план. Правило CSS @supports дает нам простое и чистое определение возможностей браузера, которое не полагается на другие техники, и работает даже при отключенном JavaScript’е.

Браузерная поддержка

К сожалению, как в случае со многими классными приемами, у этого правила имеется проблема, так как старые браузеры его не поддерживают, и даже некоторые новые версии ее лишены. Во время написания статьи его поддерживают Chrome, Opera, мобильный и десктоповый Firefox, а последние версии Safari и Internet Explorer – нет. Альтернативным вариантом создания поддержки правила будет применение «костылей», но это означает использование JavaScript’а.

Правило @supports

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

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

При создании нового правила @supports вы увидите, что код сильно похож на медиазапросы; даже операторы те же самые. Получится что-то вроде этого:

Если нужно протестировать, например, поддерживает ли браузер контур текста, вы примените следующий простой код:

Браузер, поддерживающий контур текста, прочтет, что находится внутри скобок, а тот, который не поддерживает, даже не попытается этого сделать. Одним из применимых правилом @supports операторов является not. Он проверяет, не поддерживает ли браузер определенное свойство, а альтернативный код заключен в скобки. На примере контура – вы можете применить его для добавления тени текста, которая создаст похожий вид:

Применение здесь оператора not означает, что код внутри скобок будет прочтен, только если предпочтительное свойство не поддерживается. Он работает как else-утверждение для условного предложения без оператора. Оператор or дает возможность тестировать более одного условия одновременно, и возвратит true при любом соответствии. Это очень удобно для свойств, применяющих разные вендорные префиксы для различных браузеров. Например, для проверки поддержки перехода transition можно использовать следующее:

Многим свойствам CSS требуются дополнительные вендорные префиксы и оператор or позволяет проверить их одновременно. Требуется всего один возврат true, чтобы код внутри скобок был прочтен.

Последний используемый @supports оператор – это and, который тестирует более одного условия одновременно, возвращая true, только если все они соответствуют. Синтаксис похож на or:

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

Финальные размышления

По моему мнению, @supports является великолепным дополнением в спецификацию CSS. Из-за важности браузерной поддержки при создании правил CSS, определение поддерживаемых свойств – жизненно важный этап процесса. Применение для определения CSS вместо надежды на Javascript ускоряет производительность и делает все немного элегантнее.

По иронии судьбы, единственная проблема – это недостаток его собственной поддержки. Однако CSS хорошо деградирует, и если браузер не поддерживает @supports, то просто проигнорирует его и прочтет то, что находится вне скобок. Я уверен, что в свете его полезности мы начнем видеть это правило все чаще.

Автор: Sara Vieira

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

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

Метки:

Похожие статьи:

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