Скриншоты AtoZ CSS: Правило CSS @supports

Эти at-правила применяют стили, содержащиеся в них, только если условие истинно.

Условие содержится в скобках и содержит свойство CSS, за которым следует значение, разделенное двоеточием.

 @supports (property: value) { /* styles applied if the condition is true */ } 

Если свойство CSS внутри скобок принимает значение с указанным синтаксисом, условие имеет значение true.

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

 @supports (animation-name: test) { body {background: #cc3f85;} } 

Здесь я использую визуальную подсказку, чтобы сделать background страницы розовым, чтобы показать, поддерживается ли эта функция или нет. Мы видим, что background по-прежнему черный, поэтому анимации без префиксов не поддерживаются в Chrome, что я сейчас и использую здесь.

 @supports (animation-name: test) or (-webkit-animation-name: test) { body {background: #cc3f85;} } 

Мы можем использовать ключевое слово or для проверки нескольких свойств или нескольких префиксов поставщиков. В этом случае background меняет цвет, что говорит мне о том, что Chrome поддерживает версию свойства animation префиксом webkit .

Также можно указать несколько условий с помощью или или отменить условие с помощью ключевого слова not .

Предоставление запасных стилей

Мы можем использовать эти условия поддержки для проверки функций, но мы также можем использовать их для предоставления запасных стилей в случае, если функция не поддерживается.

У меня есть изображение с надписью над ним. Заголовок имеет полупрозрачный фон с использованием hsla который мы рассмотрели в « Эпизоде ​​3: Синтаксис color CSS » .

hsla не поддерживается в старых версиях IE, поэтому пользователи этого браузера вообще не увидят background . Из-за характера этого изображения и цвета текста заголовок едва различим, что является реальной проблемой юзабилити.

Мы могли бы создать стиль по умолчанию со сплошным цветом background который соответствует дизайну, а затем использовать @supports чтобы добавить полупрозрачный background если функция доступна.

 .caption { background: #000; } @supports (background: hsla(0, 0%, 0%, 0.5) { .caption { background: hsla(0,0%,0%,0.5); } } 

Вы можете утверждать, что это немного затянуто, и гораздо более распространенным подходом к этой конкретной проблеме было бы просто позволить объявлению hsla переопределить сплошной фон следующим образом:

 .caption { background: #000; background: hsla(0,0%,0%,0.5); } 

Этот простой подход прекрасно работает в этом случае, но если мы хотим добавить много CSS, если определенная функция поддерживается или не поддерживается, нам нужно что-то более всеобъемлющее.

Хорошим примером будет что-то вроде flexbox, который представляет собой совершенно другую модель компоновки для создания сложных пользовательских интерфейсов.

Мы могли бы начать с разметки с плавающей точкой или позицией в качестве хорошей прочной основы, но затем определить flexbox с помощью @supports и воспользоваться всеми функциями, которые предоставляет новый механизм разметки.

Здесь я сделал панель заголовка, похожую на приложение, которая показывает название представления с кнопками «назад» и «вперед» влево и вправо Чтобы получить этот эффект, мы можем использовать комбинацию абсолютного позиционирования и выравнивания текста по центру.

Однако, с поддержкой flexbox, мы можем просто установить контейнер nav для display:flex и justify-content с space-between чтобы равномерно распределить три элемента.

Мы могли бы обернуть стили @supports правило @supports и обернуть резервные стили одним для not (display:flex) .

 nav { background: #eee; padding: 10px; } @supports not (display:flex) { nav { text-align: center; } .nav-back { position: absolute; left: 1em; } .nav-forward { position: absolute; right: 1em; } } @supports (display:flex) { nav { display: flex; justify-content: space-between; } .nav-back, .nav-forward { position: static; } } 

Стоит отметить, что браузеры, которые не поддерживают flexbox, почти наверняка не поддерживают @supports поэтому для обеспечения обратной совместимости @supports not (display:flex) должно быть удалено.

Хотя я действительно с нетерпением жду, когда эта функция получит большее распространение, она еще @supports от полезности, так как поддержка самого @supports в браузере весьма ограничена.

В то же время я склонен использовать JavaScript-библиотеку Modernizr для обнаружения функций.

Это добавит классы в элемент html например flexbox если функция поддерживается, или no-flexbox если это не так. Затем их можно использовать вместо правила @supports :

 nav { background: #eee; padding: 10px; } .no-flexbox { nav { text-align: center; } .nav-back { position: absolute; left: 1em; } .nav-forward { position: absolute; right: 1em; } } .flexbox { nav { display: flex; justify-content: space-between; } .nav-back, .nav-forward { position: static; } } 

Обнаружение функций и кросс-браузерная поддержка являются важной, но часто расстраивающей частью дизайна и разработки внешнего интерфейса. Но с инструментами, которые мы рассмотрели здесь, мы надеемся, что некоторые из этих проблем могут быть облегчены, и мы можем продолжать фокусироваться на создании потрясающих веб-сайтов.