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

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

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

» » Сообщение:

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

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

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

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

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

Правило @supports

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

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

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

php Код: Выделить всё Развернуть
@supports(property: value) {
    /* Стили, если условие соответствует */
}

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

php Код: Выделить всё Развернуть
@supports(-webkit-text-stroke: 1px black) {
h1 {
        -webkit-text-stroke: 1px black;
    }
}

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

php Код: Выделить всё Развернуть
@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 можно использовать следующее:

php Код: Выделить всё Развернуть
@supports(transition: width 500ms) or (-webkit-transition: width 500ms) {
    div {
         transition: width 500ms;
         transition: width 500ms;
   }
}

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

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

php Код: Выделить всё Развернуть
@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/

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



Похожие темыКомментарии ПросмотрыПоследнее сообщение
1402Re: Вывод повторяющегося контента с...
Сообщение от: Admin
0477Блокировка POST-запросов с помощью ...
Сообщение от: Admin
0239Как распаковать zip-архив с заменой...
Сообщение от: Admin
01075Защита сайта с помощью .htaccess и ...
Сообщение от: Admin
0374Переименование нескольких файлом с ...
Сообщение от: Admin