Does css3 have judgment statements?

There are judgment statements in css3, and the judgment statements are "@supports (running conditions) {css statement to be implemented}"; "@supports" is one of the newly introduced rules of css3, which is mainly used to pass conditions Determine whether the current browser supports a certain CSS attribute and load the specific style, which is CSS feature detection.

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

Does css3 have judgment statements?

There are judgment statements in css3.

@supports is one of the newly introduced rules of CSS3. It is mainly used to detect whether the current browser supports a certain CSS property and load specific styles, that is, CSS feature detection.

CSS feature detection is to determine whether the current browser supports a certain feature through conditions for different browser terminals. Using CSS feature detection, we can use new technologies in browser environments that support the current features, and make certain fallback mechanisms if they are not supported.

Now let’s take a look at how css3@supports is used, and introduce how @supports detects CSS features.

Usage of css3@supports

CSS@supports can implement feature detection through CSS syntax, and write conditional judgment statements in the internal CSS block: if the feature The CSS statement you want to implement if the feature test passes, and the CSS statement you want to implement if the feature test fails.

Basic syntax:

　　//如果通过了条件
 
　　@supports(运行条件){
 
　　/*应用规则---想要实现的css语句*/
 
　　}
 
　　//如果没有通过条件
 
　　@supportsnot(运行的条件){
 
　　/*应用规则---想要实现的css语句*/
 
　　}

Let’s look at a simple example:

@supports (display:flex) {
  section { display: flex }
  ...
}

The above code means: if the browser supports the "display:flex" attribute, Then use the "display:flex" style on the "section" element.

@supports can also be combined with different logical operators and have different syntax rules. Next, let’s refine the syntax rules and usage details of @supports.

(Learning video sharing: css video tutorial)

The above is the detailed content of Does css3 have judgment statements?. For more information, please follow other related articles on the PHP Chinese website!