How to determine whether the browser supports css3

Judgment method: 1. Use the "@supports" rule to judge, the syntax format is "@supports (attribute: value) {label name {attribute: value}}" 2. Use the "CSS.supports()" function Judgment, the syntax format is "CSS.supports("property","value")". .

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Method to determine whether the browser supports css3:

CSS @supports rules:

Syntax:

@supports (rule)[operator (rule)]* { sRules }

Description:

rule: Specify a specific CSS rule, which must be wrapped in parentheses.
operator: Use operators such as or | and | not to specify multiple rules.

1. Basic usage:

@supports ( display: flex ) {
    body {
        display: flex;
      }
     #main {
         flex: auto;
      }
}

means that the browser supports the flex standard, then use the rules inside. If it does not support it, you can implement it as follows.

2. not keyword:

@supports not ( display: flex ) {
    #main{
        float: left;
    }
}

Js CSS.supports function

is the same as the @supports tag of css and is also provided in jsWindow.CSS.supports() method is used to check whether the browser supports css3 attributes. This function provides 2 calling methods:

The first method is to use two parameters: one is the attribute name, and the other is the attribute value.

var supportsFlex = CSS.supports("display", "flex");

The second usage is to simply provide the entire style string that needs to be analyzed.

var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");

The CSS.supports function returns a Boolean value. If it is true, it means that the attribute is supported. Of course, before using this function, we need to first determine whether the browser supports CSS.supports. The method is as follows:

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){    //支持}

Recommended learning: css video tutorial

The above is the detailed content of How to determine whether the browser supports css3. For more information, please follow other related articles on the PHP Chinese website!