CSS3 feature query (@supports) css web page production

巴扎黑
Release: 2017-08-05 11:34:52
Original
1531 people have browsed it

This is a new CSS feature that must be understood and learned in 2017. It is very practical. Considering the complexity of real-world browsers, this feature should have been released before other new features.

We already know how to use media query (Media Query) to detect the screen size to achieve responsive interface design.

The feature query is used to query whether the user agent (such as a desktop browser) supports a certain CSS3 feature. This feature has been supported by other browsers except IE.

Grammar format


@supports <supports-condition> {
  <group-rule-body>
}
Copy after login

Feature query uses @supports rules (similar to media query @media, both use an @ symbol Prefix: at-rule), this CSS rule allows us to write CSS styles in conditional blocks, so that they will only be applied when the current user agent supports a specific CSS property-value pair.

As a simple example, if we want to define a style for a browser that supports the flexbox feature, we can write it like this:


@supports ( display: flex ) {
    .foo { display: flex; }
}
Copy after login

Similarly, similar to media query rules, you can use some logical operators (such as and, or and not), and support concatenation:


@supports (display: table-cell) and (display: list-item) {
    … /* your styles */
}
 
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 不支持justify时,用这里的代码来模拟text-align-last:justify */
}
Copy after login

Usage example

Detect animation characteristics:


@supports (animation-name: test) {
    … /* 当UA支持无前缀animations特性时的特定样式 */
    @keyframes { /* @supports 作为一个CSS条件组at-rule,可以包含其他at-rules */
      …    
    }
}
Copy after login

Detect custom attributes:


@supports (--foo: green) {
  body {
    color: green;
  }
}
Copy after login

Browser Compatibility

Desktop:

Mobile:

The above is the detailed content of CSS3 feature query (@supports) css web page production. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template