Siwicki

CSS @supports

February 28, 2016

Last week, Microsoft announced that is killing support for old versions of Internet Explorer and prompting users to upgrade. This is huge news as this will allow us to start really to bring in some new selectors and features into our product and stylesheet. Now, that every browser will be on that same auto updating schedule.

Usually, whenever there is browser news from Microsoft, it gets me poking around MDN to see what is some of the latest and if there is anything new that I can start using. CSS feature queries as it is named by the W3 spec allows us to do feature detections in our CSS files. Let’s get into an example.

Why does this matter?

I love bringing in the latest and greatest CSS into my project and a lot of times before it is something that should be used in production.

This is a clean way to load in something that might only be in use for one browser. For example, say Chrome has an advanced feature you want to bring. This would make that a little easier.

If you wanted to use flexbox but wanted to keep some floats in your stylesheet just in case. You can throw this into your file.

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { .wrap { display: flex; flex-flow: row wrap; justify-content: center; } }

Our on the flip side if you can check to see if the browser doesn’t support flexbox and you can toggle that with the “not” keyword.

@supports not ( display: flexbox ) { .wrap { display: block; float:left; } }

Below, You can see a quick example of how I used it in a recent project.

See the Pen CSS @Supports by John Siwicki (@siwicki) on CodePen.

Of course, let’s talk support in browsers. [http://caniuse.com/#feat=css-featurequeries] According to Can I Use the feature is across all the key browsers except for old versions of things like IE. You will still need to use something like modernizer to do feature detection.

This will be useful for trying out new things in your projects. It is also something that could make your stylesheets a little more bloated. Use with caution and have fun and testing out the latest and greatest.


John SiwickiWritten by John Siwicki who lives and works building interesting things. You should follow him on Twitter