Using CSS @supports

If you've been working with CSS for a while, you may have come across the @supports rule. This powerful feature allows you to test if a particular CSS property or value is supported by the user's browser, and apply fallback styles if it's not. With @supports, you can create more robust and flexible CSS code that gracefully degrades when necessary, instead of relying on browser-specific hacks or conditional comments.

In this post, we'll show how @supports works with some practical examples of how to use it effectively in your projects. Whether you're a seasoned frontend developer or just getting started, understanding @supports can help you write better CSS and deliver more reliable experiences to your users.

This at-rule must be declared at the top level of your stylesheet or inside another conditional at-rule. It is declared as follows:

.box {
  display: block;
}

/* Styles for supporting browsers */
@supports (display: grid) {
  .box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
}

It can also be used to combine conditions, using the AND operator:

@supports (display: list-item) and (display: table-cell) {
  /* Your styles go here */
}

And the OR operator:

@supports (text-align-last: justify) or (-moz-text-align-last: justify) {
  /* Your styles go here */
}

It can also be used to test if the browser does not support a certain condition, so you can easily apply a sensible fallback:

iframe{
  aspect-ratio: 16 / 9;
  width: 100%;
}

@supports not (aspect-ratio: 1) {
  .wrapper {
    position: relative;
    padding-bottom: 56.25%;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

Additionally, when supported, it can also be used with a function syntax, where you can check if a browser supports values or expressions within the function. There are 3 functions you can use, selector(), font-tech() and font-format().

The selector() function allows you check if the browser supports selectors like the recently introduced :has():

ul:has(> li li) {
  /* Your styles go here */
}

@supports not selector(:has(a, b)) {
  ul > li,
  ol > li {
   /* Your styles go here */
  }
}

You can also use font-tech() to test if a browser supports a specific font technology:

@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);

@supports font-tech(color-COLRv1) {
  font-family: "Noto Color Emoji", sans-serif;
}

And the font-format() lets you check if a browser supports the specified font format:

@supports font-format(svg) {
    /* Your styles go here */
}

Although @supports works in almost all major browsers, its implementation is not consistent, and we strongly advise you to take a look at this browser compatibility table.

Cool, right?

CSS @supports is a valuable tool for creating more resilient and future-proof stylesheets. By checking for browser support before applying specific CSS styles, you can ensure that your code works as intended for all users, regardless of their device or browser. This approach can help you avoid the need for cumbersome and potentially unreliable hacks, and provide a more seamless user experience overall.

As always, we hope you liked this article, and if you have anything to add, we are available via our Support Channel.