CSS Quickies: @supports

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 or Twitter or down below in the comments! I answer all questions.

I'm also live streaming while coding on twitch.tv 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.

.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:

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.

@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.

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 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 | Twitter | LinkedIn | Medium | Twitch | YouTube

Comments

[Joel Krause]

Thanks for explaining this!

I’ve never gotten into using @supports for the simple fact I’d have to style the component twice with two different properties (and no if/else). I always just end up using Flexbox.

I dream for a day where I don’t have to worry about IE support 😅

[Michael "lampe" Lazarski]

Yeah, I hope that day will come soon!

But right now Safari is the bigger problem more often then IE is.

[Joel Krause]

Yeah I’d agree with that!

I’ll just keep dreaming of the day where all browsers are equal 🙃

[Adam Bulmer]

Very nice, I did not know about CSS.supports("xxx: xxx")

[Michael "lampe" Lazarski]

Nice that you learned something :)

but please check

window.CSS && window.CSS.supprts

if your browser supports this.

[Mohamed ELIDRISSI]

IE users must be happy knowing they cause this much pain to front-end developers

[Michael "lampe" Lazarski]

More often then not the users of IE can not update their browser because the IT at their company will not update their machines because of company politics.

[Alfonsina Lizardo]

Thanks for the post! I didn't know about this property

[Michael "lampe" Lazarski]

Glad to teach something new :)
Thank you!