Feature detection for @supports?

Question

How can I detect if a browser supports the CSS @supports feature? Since Internet Explorer and Safari don't support it, my web app doesn't know which styles to apply in those browsers.

Answer 1

Using pure CSS, you can sort of rely on the cascade to determine whether a browser understands @supports by making a @supports rule with a universally-supported declaration, such as a color declaration, and overriding another such rule that is declared globally:

#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.

See my answer to this question for a detailed explanation of the pure CSS method.

If you're looking to detect it using JavaScript, you can use the Modernizr feature detection library as mentioned in the comments (be sure to include css-supports in your download config):

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