Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use supports () in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

In order to determine whether the browser supports some of the new attribute styles of css3, we can downgrade it more elegantly when it is not compatible with the style. This requires the use of css3's conditional determination function: support for the @ supports tag in css, or the use of the CSS.supports function in js to detect whether the browser supports the new attributes of css3.

Tags for supports:

Syntax:

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

Description:

Rule: specify a specific CSS rule that 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

}

}

If the browser supports the flex standard, use the rules in it. If not, you can implement it as follows.

2. Not keywords:

@ supportsnot (display:flex) {

# main {

Float:left

}

}

Of course, not keywords are rarely used, and browsers that generally support @ supports will support most of the css3 attributes.

3. Multi-condition detection:

We can use or and and statements to implement multi-conditional checking. For example:

Supports ((display:-webkit-flex) or (display:-moz-flex) or (display:flex)) and (- webkit-appearance:caret) {

/ * usestyleshere*/

} /

4. @ supports browser compatibility:

IE Firefox Chrome Safari Opera iOSSafari AndroidBrowser AndroidChrome

12.0 + 22.0 + 28.0 + 9.0 + 15.0 + 9.0 + 4.4 + 27.0 +

CSS.supports function in Js

Like the @ supports tag of css, the Window.CSS.supports () method is provided in js to check whether the browser supports the css3 attribute, which is called in 2:

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

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

The above is all the contents of the article "how to use supports () in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.