CSS Quickie: @supports

CSS can be quite a fun programming language. With its focus being on how your application looks, time spent toiling away on visual appeal is unique and a breath of fresh air. However, a big downside is sometimes not being able to always use the declarations you’d like because of browser support. On top of that, since CSS is an uncompiled language there isn’t much you can do to find out that this is ever the case besides testing in the browser. Not anymore!

There is a new CSS query that solves this guessing game, @supports. Living up to its name, wrapping your styles in this query will allow you to specify that it only is applied on browsers that actually support it. Making things even better, all modern browsers “support” this query! Now, let’s look at some code.

@supports (width: calc(100% - 20vw)) {
  .MainSection {
    width: calc(100% - 20vw);
  }
}

@supports not (width: calc(100% - 20vw)) {
  .MainSection {
    width: 80%;
  }
}

As you can see above it comes with support for the feature being both available and unavailable.