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

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

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

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

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

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

Правило @supports

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

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

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

@supports(property: value) {
    /* Стили, если условие соответствует */
}

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

@supports(-webkit-text-stroke: 1px black) {
h1 {
	     -webkit-text-stroke: 1px black;
	}
}

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

@supports not (-webkit-text-stroke: 1px black) {
	h1 {
	     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}
}

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

@supports(transition: width 500ms) or (-webkit-transition: width 500ms) {
	div {
	     transition: width 500ms;
	     transition: width 500ms;
	}
}

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

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

@supports(border-radius: 5px) and (box-shadow: 1px 1px 3px #000) {
	div {
	     border-radius: 5px;
	     box-shadow: 1px 1px 3px #000;
	}
}

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

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

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

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

Автор: Sara Vieira

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree