2

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.

Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
Azrael
  • 621
  • 2
  • 7
  • 16

1 Answers1

3

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.');
}
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • The pure CSS solution may be the answer I was looking for. Currently using something similar but was unaware of the overriding functionality. – Azrael Jan 21 '14 at 21:04
  • Using your pure CSS solution, the base style rules are applied, even in browsers that previously displayed the style rules in a @supports block. EDIT: Does it matter if the supports block is within an media block? – Azrael Jan 21 '14 at 21:11
  • @Elitis: It should not matter - in that case the `@supports` block should apply if and only if the `@media` block also does. If you need to exclude the base styles from unsupporting browsers, move them to the `@supports` block instead. On the other hand, if you need to exclude the base styles from *supporting* browsers, you will have to override those too - that's the disadvantage of relying on overriding. – BoltClock Jan 22 '14 at 07:06