Обнаружение функций для @supports?

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

#test {
    color: red;
}

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

В любом браузере, который правильно реализует @supports, #test должен иметь зеленый текст. В противном случае текст будет красным.

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

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

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