Функция обнаружения для @supports?

Question

Как определить, поддерживает ли браузер функцию CSS @supports? Поскольку Internet Explorer и Safari не поддерживают его, мое веб-приложение не знает, какие стили применяются в этих браузерах.

Answer 1

Использование чистого CSS, вы можете сортировать полагаться на каскаде, чтобы определить, понимает ли браузер @supports, сделав @supports правило с универсально поддерживаемой декларацией, такие как color декларация, и опрокинув еще одно такого правила, объявленное в глобальном масштабе :

#test { 
    color: red; 
} 

@supports (color: green) { 
    #test { 
     color: green; 
    } 
} 

In any browser that implements @supports correctly, #test should have green text. Otherwise, it'll have red text.

Смотрите мой ответ на this question для детального объяснения чистого метода CSS.

Если вы хотите, чтобы обнаружить его с помощью JavaScript, вы можете использовать библиотеку обнаружения Modernizr функции, как указано в комментариях (не забудьте включить CSS-поддержки в вашей загрузки конфигурации):

if (Modernizr.supports) { 
    console.log('Your browser supports @supports.'); 
} else { 
    console.log('Your browser does not support @supports.'); 
}