Введение в правило @supports CSS (запросы функций)

Два основных подхода к решению проблемы неравномерной поддержки браузерами новейших технологий — это постепенная деградация и прогрессивное улучшение .

Изящная деградация использует передовые технологии для разработки сложных пользовательских функций и функциональности. Пользователи менее способных браузеров по-прежнему будут иметь доступ к веб-сайту, но будут пользоваться сниженным уровнем функциональности и удобством просмотра.

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

Наиболее распространенным инструментом в подходе прогрессивного улучшения является библиотека Modernizr JavaScript.

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

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

В этом посте я собираюсь углубиться в @supports и связанный с ним JavaScript API.

Определение функций браузера с @supports правила @supports

Правило @supports является частью спецификации условных правил CSS3 , которая также включает в себя более распространенное правило @media мы все используем в наших @supports .

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

Давайте рассмотрим базовый пример. Допустим, на вашей веб-странице отображается произведение искусства, которое вы хотели бы улучшить с помощью смешивания CSS . Это правда, режимы наложения CSS изящно ухудшаются в не поддерживающих браузерах. Однако вместо того, что браузер отображает по умолчанию в таких случаях, вы можете порадовать пользователей не поддерживающих браузеров отображением чего-то такого же особенного, если не столь впечатляющего. Вот как вы должны выполнить проверку наложения CSS в вашей таблице стилей с помощью @supports :

 @supports (mix-blend-mode: overlay) { .example { mix-blend-mode: overlay; } } 

Чтобы применить разные стили для браузеров, которые не поддерживают mix-blend-mode , используйте следующий синтаксис:

 @supports not(mix-blend-mode: overlay) { .example { /* alternative styles here */ } } 

Несколько вещей, на которые стоит обратить внимание:

• Условие, которое вы тестируете, должно быть в скобках. Другими словами, @supports mix-blend-mode: overlay { ... } недопустим. Однако, если вы добавите больше скобок, чем нужно, код будет в порядке. Например, @supports ((mix-blend-mode: overlay)) допустим.
• Условие должно включать как свойство, так и значение. В приведенном выше примере вы проверяете свойство mix-blend-mode и значение overlay для этого свойства.
• Добавление конечного символа !important объявление, которое вы тестируете, не повлияет на достоверность вашего кода.

Давайте дополним приведенные выше примеры небольшой демонстрацией. Браузеры с поддержкой mix-blend-mode будут применять стили внутри @supports() { ... } ; другие браузеры будут применять стили внутри @supports not() { ... } .

HTML:

 <article class="artwork"> <img src="myimg.jpg" alt="cityscape"> </article> 

 @supports (mix-blend-mode: overlay) { .artwork img { mix-blend-mode: overlay; } } @supports not(mix-blend-mode: overlay) { .artwork img { opacity: 0.5; } } 

 @supports (property1: value1) and (property2: value2) { element { property1: value1; property2: value2; } } 

 @supports (property1: value1) or (-webkit-property1: value1) { element { -webkit-property1: value1; property1: value1; } } 

 @supports ((property1: value1) or (-webkit-property1: value1)) and (property2: value2) { element { -webkit-property1: value1; property1: value1; property2: value2; } } 

 @supports not (property1: value1) and (property2: value2) { /* styles here... */ } 

 @supports not ((property1: value1) and (property2: value2)) { /* styles here... */ } 

 @supports (mix-blend-mode: overlay) and (background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) { .artwork { background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64)); } .artwork img { mix-blend-mode: overlay; } } 

 @supports (mix-blend-mode: luminosity) and ( (background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) or (background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) ) { .artwork { background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64)); background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64)); } .artwork img { mix-blend-mode: luminosity; } } 

 @supports not ( (mix-blend-mode: luminosity) and (mix-blend-mode: saturation) ) { .artwork img { mix-blend-mode: overlay; } } 

 CSS.supports('mix-blend-mode', 'overlay') 

 CSS.supports('(mix-blend-mode: overlay)') 

 .luminosity-blend { mix-blend-mode: luminosity; } .noluminosity { mix-blend-mode: overlay; } 

 var init = function() { var test = CSS.supports('mix-blend-mode', 'luminosity'), targetElement = document.querySelector('img'); if (test) { targetElement.classList.add('luminosity-blend'); } else { targetElement.classList.add('noluminosity'); } }; window.addEventListener('DOMContentLoaded', init, false); 

 var test = CSS.supports('(mix-blend-mode: luminosity)')