I’ve been really excited about the @supports
rule since I first heard the proposal for it, and now that an implementation has landed in Firefox Nightly (and is on it’s way in Opera) my excitement has only increased. You can think of @supports
as a native implementation of Modernizr – and hopefully that description is enough to get you excited too.
@supports
uses essentially the same syntax as media queries, only with expressions made of standard CSS declarations rather than media features. If the expression logic is true, all of the rules inside the braces are applied. For example, if you wanted to apply a set of rules only to browsers which support unprefixed CSS multiple columns, you could use this:
@supports (column-count: 1) { ... }
You can use and, not and or operators to extend the logical expressions; so, to test for multiple columns or their -moz- prefixed equivalents:
@supports (column-count: 1) or (-moz-column-count: 1) { … }
And to test for support for both multiple columns and linear gradients:
@supports (column-count: 1) and (background-image: linear-gradient(#f00,#00f)) { … }
Or for browsers which don’t support CSS transforms:
@supports not (transform: rotate(45deg)) { … }
If you’re writing expressions with lots of operators, you have to use parentheses to show precedence, like this:
@supports ((column-count: 1) or (-moz-column-count: 1)) and (background-image: linear-gradient(#f00,#00f)) { … }
As mentioned, @supports
is currently in Firefox Nightly and penciled in for release in Firefox 17. However, due to Mozilla’s policy on experimental features, it may have to be enabled using the layout.css.supports-rule.enabled preference in about:config. Opera have mentioned that it’s being worked on, so hopefully we’ll see that come soon and can start using @supports
in the near future.
Obviously as no other browsers will support @supports
, its value in the short term will mainly be in testing for -moz- and -o- prefixed properties; but in the longer term, this is going to be amazingly useful.
Read more on the blog of Cameron McCormack, who wrote Firefox’s implementation.
Update: There’s a matching API for this, using the supports
attribute of the CSS
object. This works by returning false or true depending on the supplied value; this value can be a simple property:value pair, like so:
var foo = window.CSS.supports('border-color','red');
Or you can create more complex requirements using parentheses:
var foo = window.CSS.supports('(border-color: red) and (z-index: 1)');
NB: Updated in June 2013 to change the reference to the API to use the correct syntax.
Also, a forthcoming release of Modernizr will defer to the results of @supports
where available.
Thanks to Paul Irish for the additional info in the comments below.
[…] Firefox supports @supports, gets my support (Broken Links) […]
Geek Reading August 6, 2012 | Regular Geek [August 6th, 2012, 17:01]
A few other notes on this feature…
When @supports was proposed I made sure to propose a JS API for the same functionality. David Baron liked the idea and it’s now (mostly) in the spec: http://dev.w3.org/csswg/css3-conditional/#window-api
Right after @supports landed I got a bug filed for supportsCSS() https://bugzilla.mozilla.org/show_bug.cgi?id=779917 and a few days later Cameron landed an initial patch. How do people like the name `supportsCSS()`. Is `supportsStyle()` better? Most folks could go either way at this point.
Also on browser support: Opera already has an implementation in progress of @supports; we haven’t seen patches yet from WebKit but there is definitely interest.
Paul Irish [August 6th, 2012, 18:16]
Lastly, an upcoming release of Modernizr will defer to the results of @supports if @supports is supported. :p
Paul Irish [August 6th, 2012, 18:18]
I think the way
@supports
uses the conditional ‘or’ should be similar to@media
where the comma expresses a logical ‘OR’.Can’t wait to combine this with native event detection using…
@media(hover) { ... }
@media(pointer:coarse) { ... }
@media(pointer:fine) { ... }
@paul_irish
Modernizr will always have a place in our hearts :)
Gray Ghost Visuals [August 6th, 2012, 18:58]
[…] but native in the browser, with @supports… Me […]
Today’s Readings | Aaron T. Grogg [August 7th, 2012, 09:02]
Wait, not quite clear on this. @supports basically asks if the property it is asking for is supported by the browser and if so, do the following.. (what’s in the brackets)?
If so, that would be great…!!!
Marco Berrocal [August 9th, 2012, 00:15]
Yes Marco, exactly that.
Peter [August 9th, 2012, 00:32]
[…] CSS3 support in Firefox :: Firefox nightly has support for @supports […]
Episode 101 – rambling lessons learned | PHP Podcasts [August 13th, 2012, 08:44]
This is very cool, and I can definitely see the benefits, although I have a query.
As an example, if we have the following
`@supports ( background-image: linear-gradient(#f00,#00f) ) { background-image: linear-gradient(#f00,#00f) }`
surely `background-image: linear-gradient(#f00,#00f)` should have a decent fallback in the event that it is not supported?
Colm Morgan [October 19th, 2012, 09:23]
[…] cualquier modo Paul Irish, desarrollador de Modernizr, nos asegura que tendremos lo mejor de los dos mundos: Lastly, an upcoming release of Modernizr will defer to […]
Detección de funcionalidad en CSS : elich.es/blog [November 30th, 2012, 14:33]
[…] CSS3 support in Firefox :: Firefox nightly has support for @supports […]
Episode 101 – rambling lessons learned | PHP Podcasts [February 15th, 2013, 08:45]
[…] 实际上,Modernizr自身也在计划未来使用@supports来替代自身的检测方法。 […]
漫谈@support与CSS3条件规则 | 前端web(web.riaos.com) [February 27th, 2013, 14:20]
[…] (Den här versionen av Opera använder supportsCSS . Efter genomförandet var spec ändrades till CSS.supports istället, därför använder både i testet ovan. Du skulle behöva skriva två uppsättningar regler, en med) klasserna tillämpas av Modernizr testerna, de andra som använder @ stödjer block som i tid hedrad-CSS mode, ignoreras av webbläsare som inte förstår dem. Detta gör din CSS större, men sparar en HTTP-begäran och sparar exekveringstid. Ska du använda Modernizr eller @ stöd? Svaret är definitivt ”det beror”. Som med alla webbprojekt, bara du kan avgöra vilket som är det bästa sättet. […]
Varför använder @ stöder i stället för Modernizr? | 3dskrivaresverige [March 30th, 2013, 20:53]
There is a problem with the examples:
(column-count: 1) and (background-image: linear-gradient(#f00,#00f)
should be
(column-count: 1) and (background-image: linear-gradient(#f00,#00f))
Philip [April 28th, 2013, 15:52]
Thanks Philip, I’ve updated the article to remove those errors.
Peter [April 29th, 2013, 13:34]
Hi folks!
Check out my polyfill for CSS.supports DOM API https://github.com/termi/CSS.supports/
termi [June 21st, 2013, 17:19]
[…] 但话又说回来,如果你的浏览器不支持@supports,目前来说你还是需要依赖于Modernizr来做一些检测。其实Paul Irish说过,Modernizr也在计划,未来将使用@supports来替代自身的检测方法。 […]
CSS3条件判断——@supports | 黑米网—美工技巧学习 [January 20th, 2014, 03:58]