We check the browser for support of certain CSS properties

Browser support for this or that CSS property still remains one of the main problems of web layout, as adjustments for various browsers, especially old ones, take a lot of time and spoil the mood. Therefore, many designers are limited to supporting IE with the help of conditional comments , and some even hammer on the old browser and block access to their site from old versions by displaying a message like “Your browser is outdated ...”.

In this article I will tell you how you can check whether the browser supports this or that CSS property.

CSS support check

For a long time, it was impossible to verify support with a single CSS. But in 2013, Firefox, Chrome and Opera "announced" support for a special directive called @supports and its JavaScript counterpart - functions CSS.supports() , which I will write about below. With this directive, you can check the browser for support of the specified CSS properties.
')
General view of the directive

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

Usage example

If the browser supports the display: flex property, it will launch the properties from the directive.

 @supports (display: flex) { /*  */ } 

Keyword not

With the help of the keyword not , you can check for the lack of support for any property.

If the browser does not support display: flex , then it will run the properties from the directive

 @supports not (display: flex) { /*  */ } 

Keyword or

Using the or keyword, you can check for support of at least one of the specified properties.

If the browser supports display: flex or display: -webkit-flex , then it will run the properties from the directive

 @supports (display: flex) or (display: -webkit-flex) { /*  */ } 

Keyword and

If you specify the keyword and , you can check the browser support for two or more properties at once.

If the browser supports display: flex and display: -webkit-flex , then it will run the properties from the directive

 @supports (display: flex) and (display: -webkit-flex) { /*  */ } 

Multiple checks and conditions

If the browser supports display: flex or display: -webkit-flex , and flex-wrap: wrap , then it will run the properties from the directive

 @supports ((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap) { /*  */ } 

Note: the @supports directive @supports fairly new and IE does not support it.

Javascript support check

There are four options for browser support for CSS properties using JavaScript, which I know about.

1. Using CSS.supports() , which I mentioned above.
   
   The technology of the function is almost the same as the directive. The difference is that the CSS.supports() function returns true if the property is supported, and false if not.
   
   There are two options for using the function. The first involves passing two arguments — the property and its value :
   
   If the browser supports display: flex , the script returns true .
   
   

    CSS.supports("display", "flex"); /* true / false */ 

   
   The second option requires passing the whole string as an argument :
   
   If the browser supports display: flex or display: -webkit-flex , and flex-wrap: wrap , then the script returns true .
   
   

    CSS.supports("((display: flex) or (display: -webkit-flex)) and (flex-wrap: wrap)"); /* true / false */ 

   
   

   Note: as well as the @supports directive, this function is new and IE does not support it.

2. By applying new properties to an element through JavaScript.
   
   I once noticed that the browser cannot set an element's property to a value that does not support. Thus, if, after applying a new value to a property through JavaScript, it has not changed, then the browser does not support this value.
   
   As a result, we have the following function:
   
   

    var SupportsCSS = function (property, value) { try { //   var element = document.createElement('span'); // ,      if (element.style[property] !== undefined) element.style[property] = value; //  ,    else return false; //  ,   false //        ,     return element.style[property] === value; } catch (e) { //     IE,   ,   ,   return false; } }; 

   
   Or you can do without try...catch if we write properties via cssText :
   
   

    var SupportsCSS = function (property, value) { //   var element = document.createElement('span'); // ,      if (element.style[property] !== undefined) element.style.cssText = property + ':' + value; //     style  else return false; //     ,   false //        ,     return element.style[property] === value; }; 

   
   Check with this function is as follows:
   
   

    SupportsCSS('display', 'flex'); /* true / false */ SupportsCSS('display', '-webkit-flex'); /* true / false */ SupportsCSS('display', '-ms-flexbox'); /* true / false */ 

   
   The advantage of this feature is that it will work in many browsers, including the old ones. I tested the function in IE, Edge, old Safari, Chrome, Opera browsers.
   
   

   Note: if you check the property support in the old browser, through a modern emulator, then this method will show true on values ​​that are not supported.
   
   This is due to the fact that even though you are emulating the old version, the browser through which you do this knows the value of the CSS properties and can apply.

   
   
3. With the help of other javascript plugin.
   
   For checking for browser support for CSS properties, you can use ready-made JS plugins. For example, Modernizr .
   
4. Using parsing user-agent.
   
   Using this method, we can determine the user's browser and display the desired values.
   

The definitions of browser support for a particular CSS property allows you to fine-tune a site for different browsers and their versions in more detail. Still it is necessary to remember: the less CSS code we use in the project, the less hassle will be with the adjustment.

On it I will finish article. I told about all the verification options that I knew about. If you know more options - write about them in the comments.