New CSS directive @supports

Testing for support of specific technologies by the browser using JavaScript is considered to be the best practice for client-side development ( Often use another method, which consists in checking from which browser the user views the page - Approx. Per. ), But, unfortunately, such a check could not done using only CSS. Firefox , Chrome and Opera have recently announced support for CSS @supports and CSS.supports (JavaScript) directives to help developers determine if a user's browser can cope with a CSS property or not. Let's look at them in action!



Check your browser

(If the inscription is green, then your browser supports @supports , if it is red, then no. You can also look at the message in the browser console.)

CSS @supports

The syntax for the @supports directive is the same as for @media requests:

 @supports(prop:value) { /*  */ } 

The @supports directive provides developers with various uses.

Simple property check

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

This is the easiest way to use.

')

Keyword not

@supports paired with the word not checks for the lack of support for any property:

 @supports not (display: flex) { div { float: left; } /*    */ } 

Multiple checks and conditions

Multiple checks can be performed using the or and and string of words:

 /* or */ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /*      */ } /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /*     */ } 

If you need to perform multiple multiple checks, then, as in many programming languages, you can use brackets:

 /* and and or */ @supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /*   */ } 

The syntax for @supports same as for @media requests.

JavaScript CSS.supports

The JavaScript equivalent for @supports is the window.CSS.supports method. There are two options for using it. The first involves passing two arguments — the property and its value:

 var supportsFlex = CSS.supports("display", "flex"); 

The second option requires passing the whole string as an argument:

 var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)"); 

Before using JavaScript counterpart, it is important to first check if the browser supports this technology. Opera uses a different method name, which slightly increases the code:

 var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false); 

Using @supports

In most cases, the best way to use @supports is to install a specific backup set of styles and then replace them with others, in case the desired property is supported. A great reason to use @supports is the description of the location of the elements. Some newer browsers support flexbox , while others lag behind. In this case, you can write the following code:

 section { float: left; } @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; float: none; } } 

Examples of other successful uses of @supports will appear after developers spend more time experimenting with this new technology.

@Supports connection

If you want to try new technologies like @supports , you should spend some time installing the latest edge version of Canary, Firefox Nightly, or Opera Next. Opera 12.1, WebKit Nightly and Firefox Nightly all support @supports . Older versions of Firefox provide appropriate support after enabling the [layout.CSS.supports-rule.enabled] .



@supports is a welcome addition to the CSS and JavaScript specifications. Determining browser-specific technology support is best practice, and @supports is a more convenient and appropriate way to do this than various hacks. I suspect that in the next couple of years we will see a surge in the use of the @supports directive, simultaneously with the increasing popularity and convenience of flexbox.

useful links

http://caniuse.com/css-featurequeries

http://dev.w3.org/csswg/css-conditional/#at-supports

Technology Twitter

About flexbox on Habré