@supports

I’ve not had too much use for the @supports feature query in the past but with increasing division in what Chromium browsers support and Firefox and Safari do not it’s become more useful.

@supports allows you to have a block of CSS that only works if the condition stated is true. The condition is typically a CSS rule but can also be a selector or a font technology.

@supports (display: grid) {
    /* code here only runs if the browser can run grid */
}

It can also be used to test a selector:

@supports selector(::scroll-button(left)) {
    /* code .. */
}

The is also font-tech() and font-format()

A real life use case

I had a CSS image slider that used the new ::scroll-button() pseudo elements. These are a progressive enhancement meaning if the browser is too old it will just ignore them. However with the scroll buttons I didn’t want a scroll bar visible too. But as Firefox didn’t yet support this feature it needed to retain the scroll bar.

So the scroll bar was only hidden for browsers that support the scroll-button() pseudo element.

@supports selector(::scroll-button(left)) {
    body > .gallery {
        overflow-x: hidden;
    }
    .message {
    display: none;
    }
}

1. It was a selector not a rule so I had to use the selector() function.
2. I had to be very specific. Using ::scroll-button or even ::scroll-button() didn’t work.
3. As this was at the top of the file I upped the specificity from .gallery to body > .gallery. Otherwise the rule, overflow-x: hidden was overridden by the rule lower down. Seems like @supports doesn’t increase specificity on it’s own.
4. I added a message for users whose browsers lacked support for this feature. But the message is hidden from browsers where the ::scroll-button() feature works.