Рассмотрим следующий фрагмент кода CSS:
.blur-text { color: transparent; text-shadow: 0 0 5px #000; } Любой элемент с классом blur-text будет оказывать эффект разбитого текста:
Прекрасный. К сожалению, не все браузеры поддерживают text-shadow . IE9 и ниже применяют прозрачный цвет, но не отображают тень — текст становится невидимым. Нам нужно было полагаться на решения JavaScript, такие как Modernizr или наш собственный код для обнаружения теней текста, чтобы определять поддержку CSS и реагировать соответствующим образом.
Использование JavaScript для определения свойств CSS3 ужасно. Это потерпит неудачу, если JavaScript отключен и чувствует себя грязным. Я должен купаться в дезинфицирующем средстве каждый раз, когда делаю это. К счастью, в нативном CSS @supports другое решение: правило @supports . Основной синтаксис:
@supports <condition> { /* rules */ }
Мы использовали бы следующий код для нашего размытого текста:
@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) ) { /* styles */ }
а также проверьте наличие префиксов для конкретного поставщика:
@supports ( (-webkit-transform: rotate(90deg)) or (-moz-transform: rotate(90deg)) or (-ms-transform: rotate(90deg)) or (-o-transform: rotate(90deg)) or (transform: rotate(90deg)) ) { /* styles */ }
Старые браузеры, которые не понимают @support , не будут отображать стили, но они вряд ли поймут свойства, которые вы пытаетесь использовать.
К сожалению, @supports имеет довольно ограниченную совместимость с браузерами. На момент написания, только Opera 12.1 представляет его как стандарт. Это доступно в Firefox 17, если параметр layout.css.supports-rule.enable about: config изменен на true. Это также должно быть реализовано в Chrome 24, но может пройти некоторое время, прежде чем @support в IE и Safari.
Тем не менее, @supports является многообещающим, и дни, когда пришлось использовать Modernizr-подобный стиль JavaScript, сочтены.