What is the most practical way to test support for "@supports" using only CSS?

Question

After yesterday’s talk by Eric Bidelman of Google I / O, which covered @supports , I decided that I would start playing with this in Chrome Canary. However, he raised an obvious question:

What is the best way to check if @supports browser only @supports CSS?

---

I'm playing with it right now, just checking if display: block supported. This method works, obviously, but I'm not sure if this is the most practical approach:

 body { background:#fff; font-family:Arial; } body:after { content:'Ek! Your browser does not support @supports'; } @supports (display:block) { body { background:#5ae; } body:after { color:#fff; content:'Your browser supports @supports, yay!'; } } 

Here is the JSFiddle demo in action.

These attempts do not work (at least in Chrome Canary):

 @supports (@supports) { ... } @supports () { ... } @supports { ... } 

Answer 1

@supports currently only checks for property / value combinations and nothing else. Your other options do not work, because none of them are valid (including the last with only a keyword followed by an opening bracket!). The requirement for a pair of properties / values ​​is dictated by the grammar for @supports , which you can find in spec .

Just make sure that the pair of properties / values ​​that you know will work in all user agents regardless of whether the @supports implementation is implemented. This (type) eliminates the possibility of running in a user agent that implements @supports , but not this combination of properties / values, instead focuses on @supports support.

Your display: block example will suffice. Using a cascade to verify that the browser does not implement @supports by overriding the ads in the @supports rule for browsers that support it is also acceptable (this is the only way to do this anyway).

Answer 2

David Walsh's blog has a good tutorial on @supports Link .

Indeed, JsFiddle works great in Chrome Canary.

Valid syntax for @supports:

 @supports(prop:value) { /* more styles */ } /* Negation */ @supports not(prop:value) { /* more styles */ } /* `or` keyword*/ @supports(prop:value) or (prop:value){ /* more styles */ } /* `and` keyword*/ @supports(prop:value) and (prop:value){ /* more styles */ } /* `or`, `and` keywords*/ @supports(prop:value) or (prop:value) and (prop:value) { /* more styles */ } 

Answer 3

This probably won't work, you cannot check if @supports is @supports or not only CSS, your example here is completely fine, but there is no direct approach here, for example, you use this:

 @supports (@supports) { /* Styles */ } 

Now it won’t work, maybe for Chrome Canary , it’s okay @supports , but when it goes ahead to check between the brackets it fails, why? He expects a pair of CSS property: value inside the bracket, not some @ rule, it actually checks if any property is valid or not, even if you replace it with @supports (@font-face) . will not work, further down, I explain to you the demo

When you use @supports , it comes with the not keyword to check if a particular style is supported by the browser or not, if so, than applicable, otherwise apply others ...

Example

 @supports (-webkit-border-radius: 6px) { div:nth-of-type(1) { color: red; } } @supports not (-moz-border-radius: 6px) { div:nth-of-type(2) { color: blue; } } 

Demo (Note: now this only works on chrome canary)

Explanation:

@supports (-webkit-border-radius: 6px) will check in Chrome Canary if the property named -webkit-border-radius supports, if so, than go ahead, change the color of the first div to red , and this will happen because Chrome Canary supports -webkit , while the second one will not work because Chrome does not support the -moz prefix properties, it will be blue because I use not here

 @supports not (-moz-border-radius: 6px) ---^--- 

Hope the FAQ

1) Why aren't any of the styles applied in the browser?

This is because your browser does not yet support @supports , and therefore no one will apply, as the browser simply ignores the @supports rules

---

From W3C

The @supports rule is a conditional group rule whose condition tests are regardless of whether the user agent supports the CSS property: value pairs