Давайте рассмотрим следующий отрывок кода CSS: «.blur-text { color: transparent; text-shadow: 0 0 5px #000; }». К любому элементу класса .blur-text применится эффект размытого текста, например:

К сожалению, не все браузеры поддерживают свойство тени текста. Браузер Internet Explorer версии 9 и ниже применит свойство прозрачности текста, но не сможет отобразить тень текста, так что текст станет невидимым. Для определения поддержки свойств CSS и выбора действий в зависимости от результата используются решения на основе JavaScript, такие как Modernizr, или более специфические решения, например, определение поддержки свойства тени текста.

Использование JavaScript для определения свойств CSS3 неудобно. Определение не отработает, если JavaScript выключен в браузере, а также JavaScript потребляет немало ресурсов. К счастью, есть решение на чистом CSS – правило @supports (поддержки). Основной синтаксис:

@supports <условие> { /* правила */ } 

Для эффекта размытого текста воспользуемся следующим кодом:

@supports (text-shadow: 0 0 5px #000) { .blur-text { color: transparent; text-shadow: 0 0 5px #000; } }

Можно использовать логические элементы «и», «или», «не», например:

@supports ( (display: table-cell) and (display: list-item) ) { /* стили */ }

Еще можно проверять на применимость свойств с приставками производителей:

@supports ( (-webkit-transform: rotate(90deg)) or (-moz-transform: rotate(90deg)) or (-ms-transform: rotate(90deg)) or (-o-transform: rotate(90deg)) or (transform: rotate(90deg)) ) { /* стили */ }

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

К сожалению, правило @supports поддерживается далеко не всеми браузерами. Современные версии браузеров Firefox, Chrome, Opera, Opera Mobile, Android browser, Chrome for Android,  Firefox for Android поддерживают это правило. Даже Internet Explorer версии 11, не говоря уже о более ранних версиях, не поддерживает правило @supports. Также это правило не поддерживается в текущих версиях Safari, IOS Safari, Opera Mini, Blackberry browser, Internet Explorer Mobile и UC browser for Android.

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

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Создание эффектов размытого текста с использованием CSS3
• Как растянуть элементы, находящиеся в блоках, на полную ширину окна браузера
• Альтернативный способ спрятать текст у графического заголовка