How to detect support for a CSS feature using @supports ?
Tags: css, webdev, beginners, html
Published: 2021-11-04 13:17:34

---
title: How to detect support for a CSS feature using @supports ?
published: true
date: 2018-09-10 12:32:23 UTC
tags: css, webdev, beginners, html
canonical_url: https://www.moreonfew.com/how-to-detect-support-for-a-css-feature-using-supports/
---

With many new CSS features being introduced regularly it has become important to check for the support of these newer CSS properties before we use them. While there are feature detection tools like Modernizr etc, not every time do we actually require to load a JavaScript file to detect a feature alone. You can do feature detection using CSS `@supports` rule too. However, please note that the older versions of Browsers do not support `@supports` rule too. In such a case I would suggest that you write small snippets of code in JavaScript to detect the support for the feature you are looking for.

## How to use the `@supports` CSS rule ?

The `@supports` CSS rule is one among other CSS at-rules like @media etc. The `@supports` rule lets you to check the support for a CSS feature before the defined block of CSS properties are applied to the page. In other words its like saying that if “so and so” features are supported, apply these CSS properties to the page. Let’s take a look at an example usage of CSS `@supports` rule.

```
@supports (display: flex) {
  .main-box { display:flex; padding:5px;}
}
```

When the above code is parsed by the browser, it checks if the `display:flex` property is supported by the browser, if so it takes into consideration the block of CSS wrapper within the `@supports` rule. This can make your code simpler and lighter by avoiding the need for JavaScript for such feature detection. Interestingly, the `@supports` rule has other Operators too which gives you a little more power while doing a feature detection.

## Operators that `@supports` support

Similar to the media queries (@media), `@supports` too has three operators :

### The `not` operator

The “not” operator, as the name suggests, is to check for **no support** of the specified CSS property. This can come in handy to write a fallback version. For example:

```
@supports not (display: flex) {
  .main-box { display:inline-block; padding:5px;}
}
```

In the above example we can notice that if the browser does not support `display:flex` then keep the display as inline-block for the `.main-box`.

### The `and` operator

The **and** operator can be used to check if a certain property “and” some other property are supported. For example :

```
@supports (display: flex) and (align-items: center;){
  .myDiv { display:flex; padding:5px;align-items: center;}
}
```

In the above example the block of CSS would be rendered only if both the conditions are true. You can also combine the `and` operator with `not` operator. For example :

```
@supports (display: inline-block) and (not (display:grid)){
  .myDiv { display:inline-block; padding:5px;}
}
```

### The `or` operator

The other operator that `@supports` support is the **`or`** operator. The `or` operator as the name suggests can be used to check if any one of two or more CSS properties are supported by the browser. For example :

```
@supports (display: flex) or (display: grid;){
  /* Block of CSS here */
}
```

In this case the block of CSS would be executed even if one of the features are supported by the browser. You can use this operator to combine with the other operators too. For example:

```
@supports not ((transform-style: preserve) or (-webkit-transform-style: preserve)) {
  /* Block of CSS here */
}
```

If you notice, we need to make use of parentheses properly in order to define the order in which they apply. <mark>Parentheses are especially important while using both <code>and</code> and <code>or</code> operators</mark>.

To conclude I would say that the `@supports` rule is a very useful and helpful feature in CSS. However, the older browsers including IE11 still do not support it, hence, you need to use this with caution. However, if you are not supporting older browsers then go for it. You can check for the Browser support at [CanIUse.com](https://caniuse.com/#feat=css-featurequeries). Let us know about your experience using it.

The post [How to detect support for a CSS feature using @supports ?](https://www.moreonfew.com/how-to-detect-support-for-a-css-feature-using-supports/) first appeared on [MoreOnFew](https://www.moreonfew.com).