Native CSS Features Detection @supports Rule Arrives in Firefox Nightly

Firefox recently released the new CSS3 API @supports for Firefox Nightly. It now supports the CSS Conditional Rules Level 3 specification. @supports rules helps you to detect native CSS feature.

We are comfortable with the idea of sending different code to different browsers to provide different but still acceptable user experience. Feature detection is normally done using JavaScript to test if one specific feature is there. And that can be done using libraries like Modernizr, which provides CSS features detection both in CSS and JavaScript so you can have fallbacks of your code depending on different browsers. Or you can always write some JavaScript code to achieve the same.

That’s really useful but many people have often asked if there is ever going to be a mechanism that will detect the native features? New CSS3 Conditional Rules Module Level 3 provides a perfect way to detect native features in CSS. @supports currently works only in Opera and Firefox Nightly, browsers which doesn’t support this rule will simple ignore the code block. It means you can simply go ahead and write some conditional rules, but if it doesn’t suits you, you can stick to Modernizr for now. Here is a simple example showing how you can make use of @supports syntax:

@supports (display: flex)) {
    section { display: flex; }
}

Above rule will be applied only if browser supports display:flex;. @supports also provides a not keyword when features are not supported. Likewise in Modernizr we had .no-csstransforms when we didn’t have CSS transforms supported in current browser. With help of this you could provide some specific styles to browsers which doesn’t support display:flex; property:

@supports not (display: flex) {
// provide alternative layout
// with floats perhaps
}

@supports also provides or and and keywords, in which styles will only be applied when browsers supports two or more specific test. For examples CSS Flexboxes are not supported with vendor prefixes, so we can do the following:

This examples shows how you can make use of or keyword. Let’s have a look at and keyword. For example:

@supports (display: flex) and (display: grid) {
// you know the drill
}

Go ahead and do some experiments with @supports syntax. Am sure its going to be pretty handful function once all browsers supports this syntax. For now we have the awesome Modernizr. Here is a quick info about the browser support.