How to use support variable in CSS

Have you used some sort of CSS feature detection, like Modernizr, to differentiate CSS behavior based on compatibility? I bet you've done most of it. Although cascading features of CSS allow us to provide backlinks to many CSS functions by writing multiple statements, sometimes we need to more closely control what works when some of our sophisticated sparklers do not exist.

Consider the border image. When it is not compatible, we usually have to provide an optional background and a different border, which should not be applied when applying a border image. Another common case is new design modules (Flexboxes, grid layouts, and regions); when they are not available, we need to write alternative designs using properties that may conflict with these technologies, which means they can not coexist.

Fortunately, the CSS team previously designed a pure and elegant CSS solution called the @supports rule. Through this rule, an example of a boundary image can be written as:

.foo {
    border: 15px solid transparent;
    border-image: url(fancyborders.png) 33%;
}

@supports not (border-image: url(foo.png) 33%) {
    .foo {
        border: 3px solid rgba(0,0,0,.3);
        background: url(alternative-bg.png) beige;
     }
}
    

This is called a "feature query," which is similar to a media query. In practice, you also need to check the default version:

@supports not (border-image: url(foo.png) 33%)
or (-moz-border-image: url(foo.png) 33%)
or (-webkit-border-image: url(foo.png) 33%) { }

Also, no operator is available, which allows any kind of sophisticated Boolean logic. These rules can be nested, which greatly simplifies the code when using many complex feature queries.

There is a trap. Before @supports was supported, using @supports to support browser-supported features was not advisable. Therefore, we can not use it for many things. However, it is already compatible with Firefox 22+, Chrome 28+ and Opera 12.1+. If IE 11 and Safari 7 also support it, we can start using the features it introduced in these releases or later.

The CSS working group also recognizes that using the prefix of @supports gives the reason for the failure (because the author must write several rules multiple times). Therefore, each browser that supports @supports has no prefix. There is no such thing as @webkit-supports. When browsers are unsure of their implementation, they hide it behind the banner, as Firefox did in the 17-27 version.

You might think this is good for CSS, but it does not really help you to detect CSS functionality via JavaScript, which is sometimes necessary. Fortunately, it comes with its own elegant JavaScript API: CSS.supports (). It is used like this:

if (CSS.supports('border-image', 'url(foo.png) 33%')) { }

This feature is also easy to populate, so it may be available in search engines that have not yet been updated. Hopefully in the future we can detect compatibility with other CSS functions like rules and selectors, not just properties and values.

Hope it will help you.

Thanks,