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

This article introduces the knowledge of "what is the use of css3 @ supports". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What is css3@supports? What's the use?

@ supports is one of the new rules introduced by CSS3, which is mainly used to detect whether the current browser supports a CSS attribute and load a specific style, that is, the property detection of css.

We should know that in today's ever-changing front-end technology, a variety of new technologies and new attributes emerge in endlessly; and the CSS level is no exception. Some new properties of css greatly improve the user experience and reduce the developer's workload, and the current front-end atmosphere is like this:

1. Many experimental functions are widely used before they become the standard.

2. it needs to be compatible with a variety of terminals and browsers, but the effect of various browsers on the implementation of a new function is very different.

In this context, not only want to use new technology to provide users with a better experience, but also want to do a good fallback mechanism to ensure the basic experience of low-version end users, CSS feature detection came into being.

CSS feature detection is to determine whether the current browser supports a feature or not according to the conditions for different browser terminals. With CSS feature detection, we can use new technologies in browser environments that support current features, while those that do not support make some fallback mechanisms.

Let's take a look at how css3@supports is used and introduce the @ supports method for css feature detection.

The use of css3@supports

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

Basic syntax:

/ / if the conditions are passed

@ supports (operating condition) {

/ * apply rules-the css statement you want to implement * /

}

/ / if the condition is not passed

@ supportsnot (the condition under which to run) {

/ * apply rules-the css statement you want to implement * /

}

Example:

/ * apply a rule to a'@ supports' rule only if 'display:flex' is supported. , /

@ supports (display:flex) {

.el {

Display:flex

Align-items:middle

/ *. /

}

}

Implement multiple checks for multiple conditions

In @ supports, we can use the and and or operators to create complex tests to check whether multiple functions in the rules are supported.

The and and or operators can be used separately or in combination, for example:

To avoid confusion caused by precedence rules, you are now allowed to combine and, using or, but not using parenthesis layers. This means that the following statement is invalid:

@ supports (transform:rotate3d (1, 1, 1, 10, 0, 10, 10, 30, deg) and

(transition:transform2s) or

(animation:my-3d-animation2salternateforwards) {

/ *. /

}

We need to use parentheses to combine conditions, just like other programming languages, to make the priority clear. So, the above example works for you to do this:

@ supports (transform:rotate3d (1, 1, 1, 10, 0, 10, 10, 30, deg) and

((transition:transform2s) or (animation:my-3d-animation2salternateforwards)) {

/ *. /

}

Note:

1. Spaces are required on both sides of not, and and or.

2. The declaration (running condition) under test must always appear in parentheses, and it is the only content in the expression; otherwise, it is an invalid declaration.

3. When combining operators, you must use parentheses to clear the priority.

This is the end of the content of "what is the use of css3 @ supports"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.