How @supports Works

@supports is great for creating progressively enhanced features within CSS. A few years ago I was annoyed with @supports because a lot of the CSS features I wanted to test for weren’t supported in browsers that also didn’t support @supports, nightmare! Fortunately there’s only two potential browsers you’re supporting (I hope) that don’t have @supports support now, so if you’re not already using it then Chris has some great examples (and of course a comprehensive overview of @supports itself).

CSS has a neat feature that allows us to test if the browser supports a particular property or property:value combination before applying a block of styles — like how a @media query matches when, say, the width of the browser window is narrower than some specified size and then the CSS within it takes effect. In the same spirit, the CSS inside this feature will take effect when the property:value pair being tested is supported in the current browser. That feature is called @supports and it looks like this:

@supports (display: grid) {
  .main {
    display: grid;
  }
}

Why? Well, that’s a bit tricky.

An excerpt from How @supports Works

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.