We check the browser for support of a certain CSS property

Support by browsers of one or another CSS property still remains one of the main problems of web layout, as adjusting for various browsers, especially old ones, takes a lot of time and spoils the mood. Therefore, many typesetters are limited to supporting IE using conditional comments , and some generally plug into old browsers and block access to their site from older versions by displaying a message like “Your browser is out of date ...”.

In this article, I’ll show you how to check whether the browser supports a particular CSS property.

CSS check for support

For a long time, it was not possible to test support with CSS alone. But in 2013, Firefox, Chrome and Opera “announced” support for a special directive called @supports and its JavaScript counterpart, a function CSS.supports()that I will write about below. Using this directive, you can check the browser for support of the specified CSS property.

General view of the directive

@supports (property: value) {
   /* Стили */
}

Usage example

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

@supports (display: flex) {
   /* Стили */
}

Keyword not

Using 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 launch the properties from the directive

@supports not (display: flex) {
   /* Стили */
}

Keyword or

using keywords or , we can check on the support of at least one of these properties.

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

@supports (display: flex) or (display: -webkit-flex) {
   /* Стили */
}

The keyword and

if the keyword and , it is possible to check browser support two or more properties at once.

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

@supports (display: flex) and (display: -webkit-flex) {
   /* Стили */
}

Multiple checks and conditions

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

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

Note: the directive is @supportsquite 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 the function CSS.supports()I mentioned above.
   
   The technology of the function is almost the same as the directive. The difference is that the function CSS.supports()returns trueif the property is supported, and falseif not.
   
   There are two options for using the function. The first involves passing two arguments - the property and its values :
   
   If the browser supports display: flex, then the script will return true.
   
   

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

   
   The second option requires passing an entire string as an argument :
   
   If the browser supports display: flexeither display: -webkit-flex, and flex-wrap: wrap, then the script will return true.
   
   

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

   
   

   Note: just like the directive @supports, 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 the element property to a value that does not support. Thus, if, after applying the new value to the property via 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...catchif we write properties through 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;
   };

   
   Validation using 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 older ones. I tested the function in browsers IE, Edge, old Safari, Chrome, Opera.
   
   

   Note: if you check the support of the property in the old browser, through the modern emulator, then this method will be shown trueon values ​​that are not supported.
   
   This is due to the fact that although you emulate the old version, the browser through which you do this knows this CSS property value and can apply it.

   
   
3. Using other JavaScript "plugins".
   
   To check 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 the site for different browsers and their versions. You also need to remember: the less CSS code we use in the project, the less trouble there will be with adjustment.

This concludes the article. I talked about all the verification options that I knew about. If you know more options - write about them in the comments.