Multiple methods for JS to detect whether CSS property browser supports

1. Native CSS.supports syntax

Return a boolean value trueor falseto check whether a certain CSS property is supported.

grammar

CSS.supports(propertyName, value);
CSS.supports(supportCondition);

parameter

propertyName

String. The name of the CSS property to detect.

value

String. The CSS property value used to detect.

supportCondition

String. The CSS declaration, expression, or grammar used to detect.

Case

For example, to detect whether the browser supports CSS filter, you can:

result = CSS.supports('filter', 'blur(5px)');
result = CSS.supports('filter: 5px'); // Wrong syntax, return false

For example, return under Chrome browser:

CSS.supports()It can also be used to detect expressions, such as CSS variable syntax:

result = CSS.supports('--username: zhangxinxu');
result = CSS.supports('(--username: zhangxinxu)');

The result is shown below:

You can see whether the brackets are supported.

CSS.supports()It also supports @supportsrules and logical expressions, such as:

result = CSS.supports('width: fit-content or width: -webkit-fit-content');
result = CSS.supports('(width: fit-content) or (width: -webkit-fit-content)');

The first line (pink text) returns false, and the second line supports returning true (see the figure below). It can be seen that in this grammatical environment, brackets are necessary:

compatibility

Like CSS  @supportsrule compatibility, Edge12+ supports it.

Awkward status quo

In actual development, you need to use CSS detection scenarios, which are usually for lower versions of IE browsers, such as IE9-IE11.

So something embarrassing appeared. The lower version of the IE browser does not support the CSS.supports()methods natively supported by the browser . Therefore, our actual needs have not been solved because of this new API, and we have to resort to other methods.

Two, JS assignment and then value detection method

This is a method I often use in actual projects. The principle is very simple. When the browser does not support a certain CSS property, even if you force the setting, the calculated value obtained will not be the property value you set. An example of checking whether the browser supports CSS filter.

I will deal with it like this:

document.head.style.filter = 'blur(5px)';
result = window.getComputedStyle(document.head).filter == 'blur(5px)';

Let's look at the performance of the above code in the actual browser. The first is the supported Chrome browser. resultThe value is true:

Then the IE11 browser is not supported, resultthe value is false:

The principle of this method is very simple, and the compatibility is very good. The key point of implementation is to use getComputedStyle, which is a DOM API method supported by IE9+ . You cannot use dom.style.xxxxdirect access.

If you want to implement logic similar to or or and, such as with a private prefix, you can deal with it as follows to match the key parts:

document.head.style.width= 'fit-content';
document.head.style.width= '-moz-fit-content';
result = /fit-content/.test(window.getComputedStyle(document.head).width);

For example, the result under Firefox browser:

compatibility

IE9 +

important point

getComputedStyle()The method returns the calculated value, which is often different from the set property value.

For example, if the line height is set as a decimal, the calculated value of px will be returned under IE browser.

Or set the backgroundattribute value, the result is the background siblings and the family value:

document.head.style.background = 'paint(abc)';
result = /paint/.test(window.getComputedStyle(document.head).background);
// reseult value is true
window.getComputedStyle(document.head).background
// "rgba(0, 0, 0, 0) paint(abc) repeat scroll 0% 0% / auto padding-box border-box"

Need to use fuzzy matching.

Three, other methods

The core idea is similar:

document.head.setAttribute('style', 'filter: blur(5px)');
result = !!document.head.style.filter;

Figure of verification test results under Chrome and IE:

in conclusion

Regardless of compatibility, the CSS.supports()method of detecting and using CSS is to detect that IE browser uses the assignment method.

Welcome to add other methods.