Use CSS's @supports tags to detect browser compatibility analysis

@supports can be used to check if a CSS property is supported by the browser and can be controlled via JavaScript, here's a detailed explanation of how to use CSS's @supports markup to detect browser compatibility

CSS @supports tags are similar to the syntax of @media query statements in CSS code:

@supports (Prop:value) {/    * various styles */}

CSS @supports allows programmers to detect whether a CSS style feature is supported by the current browser in a number of different ways.

Basic attribute Detection
You can perform the detection of basic properties and property values:

@supports (Display:flex) {    p {display:flex;}   }

This is the most basic use of the @supports tag.

Not keyword
@supports tags can be combined with the ' not ' keyword to handle unsupported situations:

@supports not (Display:flex) {    p {float:left;}/* Replace style */}

Multi-detection and condition detection

/* or */@supports (display:-webkit-flex) or (             display:-moz-flex) or             (Display:flex) {/       * use styles here */}<  c3/>/* and * * @supports (Display:flex) and (-webkit-appearance:caret) {/    * something crazy here */}/* and and   or */@supports ((display:-webkit-flex) or             (display:-moz-flex) or             (Display:flex)) and (-webkit-appearance:caret ) {/       * use styles here */}

Javascript Css.supports ()
In JavaScript, by using the Window.CSS.supports method to detect the CSS @supports, two methods are available in the specification, and a method can receive two parameters Boolvalue = Css.supports ( PropertyName, value); the other can receive a string (a domstring containing the condition to check), Boolvalue = Css.supports ( Supportcondition); See the following example for specific use:

Test environment, chrome:34.0.1847.131 mvar res01 = css.supports ("Text-decoration-style", "blink");   Outputs:falseconsole.log (RES01);   var res02 = css.supports ("Display", "flex");   Outputs:trueconsole.log (RES02);   var res03 = Css.supports ("(transform-origin:5% 5%)");   Outputs:falseconsole.log (RES03);   var res04 = Css.supports ("(Transform-style:preserve) or (-moz-transform-style:preserve) or" +                         "(-o-transform-s Tyle:preserve) or (-webkit-transform-style:preserve) ");   Outputs:falseconsole.log (RES04);

@supports Usage Scenarios

In most cases, @supports are used to support older browsers and, where possible, to leverage new features of modern browsers to improve the user experience. One of the most important usage scenarios for @supports is the page layout. Many modern browsers provide support for the layout of Flexbox Web pages, and in cases where many browsers do not support it, your code can be written like this:

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;       }   }

It is believed that as programmers use and experience this new @supports feature, more and better usage scenarios will continue to emerge.