Use CSS @supports tag to detect browser compatibility analysis

@supports can be used to check whether the browser supports a certain CSS property and can be controlled through JavaScript. The following is a detailed description of how to use the @supports tag of CSS to detect browser compatibility

The CSS @supports tag has a similar syntax to the @media query statement in CSS code:

@supports(prop:value) {   
 /* 各种样式 */
}

CSS @supports allows programmers to use a variety of different methods to detect whether the current browser supports a certain Item CSS style characteristics.

Basic attribute detection
You can perform detection of basic attributes and attribute values:

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

This It is the most basic usage of @supports tag.

not keyword
@supports tag can be combined with the 'not' keyword to deal with unsupported situations:

@supports not (display: flex) {   
 p { float: left; } /* 替换样式 */
}

Multiple detection and condition detection

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

    /* use styles here */
}   

/* 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 window. The CSS.supports method is used to detect CSS @supports. The specification provides two methods. One 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 usage:

//测试环境，Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");   
//Outputs: false
console.log(res01);   

var res02 = CSS.supports("display", "flex");   
//Outputs: true
console.log(res02);   

var res03 = CSS.supports("( transform-origin: 5% 5% )");   
//Outputs: false
console.log(res03);   

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
//Outputs: false
console.log(res04);

@supports usage scenario

In most cases, @supports is used to support older browsers and, where possible, take advantage of new features in modern browsers to improve the user experience. One of the most important use cases for @supports is page layout. Many modern browsers provide support for flexbox web layout. In this case, 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;   
    }   
}

I believe it can be As programmers use and experience this new @supports function, more and better usage scenarios will continue to emerge.

The above is the detailed content of Use CSS @supports tag to detect browser compatibility analysis. For more information, please follow other related articles on the PHP Chinese website!