CSS Quickies: @supports 
Tags: webdev, css, javascript, beginners
Published: 2019-09-29 18:35:54

### What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties.  If you also confused about a CSS property, then write to me on [Instagram](https://www.instagram.com/lampewebdev/) or [Twitter](https://twitter.com/lampewebdev) or down below in the comments! I answer all questions.

I'm also live streaming while coding on [twitch.tv](https://www.twitch.tv/lampewebdev/) if you want to spend some fun time or you can ask me any question!

### Let's talk about @supports

You never know what browser the user of your website will use. It can be the newest version of Firefox or Chrome, or it still can be an old version of Internet Explorer. Feature detection is usually done by Javascript even if it is for CSS, but there is also a way to do it in CSS. We can do this in CSS with "@supports".

### The syntax

Let's say you want to use CSS `Grid` on your page, but you need to support also older browser. You know that you could use `flexbox` also. 

```css
.main {
  display: flex;
}

@supports (display: grid) {
  .main {
    display: grid;
  }
}
```
Let's go through this code together. First, we see our fallback; in this case, it is `display: flex`. Then comes the new syntax. `@supports (display: grid)`  as you can see, it has the following pattern `@supports (property: value)`. In Javascript you would write something like that:

```javascript
if(CSS.supports("display: grid")){
 document.getElementsByClassName('main').style.display = 'grid';
} else {
 document.getElementsByClassName('main').style.display = 'flex';
}
```

This javascript code is just one way of doing it, but the result is the same as in the `@supports` example.

### Using @supports with `and`, `not` and `or`

As with media queries, you can use `and` and `not` in your CSS.

```css
@supports not (display: grid) {
  /*  if the browser does not support CSS grid */
  display: flex;
}

@supports (display: grid) and (display: -ms-grid) {
  /* Runs when the browser supports grid and -ms-grid */
  display: -ms-grid;
  display: grid;
}

@supports (display: flex) or (display: -moz-flex) {
  display: -moz-flex;
  display: flex;
}
```

The first example will set `display` to `flex` when CSS grid is not supported by the browser. This, in general, is considered an anti-pattern. `@supports` should have a fallback and should be used in an moving forward way not backward. The second example shows you how you can use `and`. It is the same operator as `&&` in Javascript. If one of the conditions is wrong, then the CSS code inside the `@supports` block will not be executed. The third example shows how to use `or`. It is the equivalent to `||` in Javascript. If one of the expressions is true, the CSS code inside the `@supports` block will be executed.

### Wait! What's that `CSS.supports()`

Yes, there is a `CSS` Object in Javascript, and it has a `supports()` function. It returns a boolean. You can use it in 2 ways.

```javascript
CSS.supports('display', 'grid')
CSS.supports('display: grid')
```
Both examples are identical just written in different ways. Both will return `true` or `false` depndeing on the browser if the browser supports `grid` or not.

### Some real-world examples

We have already seen the most common use case. It is for checking if a browser supports a specific display value like `grid` or `flex`.

One more widespread use case is to check if the browser supports `position: sticky;`  `sticky` is not supported by all browser but very useful and usually the CSS implementation is more performant then the one in Javascript. So when you have your custom code for making elements sticky, try to run it only if it is not supported by the browser.

`mix-blend-mode` is one of these CSS features that is supported by a lot of browsers but not entirely or maybe different. This is also a perfect candidate for `@supports`.

In general `@supports` is used best if there is an alternative for the new shiny CSS feature you want to use. So you can give the users who have the latest browser the best experience without making your website unusable for users who can not update their browsers.

It would help me if you could do the following for me!
Go to [Twitch](https://twitch.tv/lampewebdev) and leave a follow for me! If just a few people would do that, then this would mean the world to me! ❤❤❤😊

**👋Say Hallo!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)