CSS3 feature query (@supports) CSS Web page authoring

This is a new CSS feature that can not be understood and learned in the 2017, it is very practical, considering the complexity of the real-world browser, this feature should be preceded by other new features.

We already know that using media query to detect screen size enables responsive interface design.

Feature queries are used to query whether a user agent (such as a desktop browser) supports a CSS3 feature, which is supported by other browsers in addition to IE.

Syntax format

@supports <supports-condition> {  <group-rule-body>}

The attribute query uses the @supports rule (similar to the media query @media, using an @ sign prefix: at-rule), which allows us to write CSS styles in a conditional block, This is only applied when the current user agent supports a specific CSS property value pair (Property-value pair).

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

@supports (Display:flex) {    . foo {display:flex;}}

Similarly, similar to the media query rules, you can use some logical operators (such as and, or, and not) and support string-by-connection:

@supports (Display:table-cell) and (Display:list-item) {    .../* Your styles */} @supports not ((text-align-last:justif Y) or (-moz-text-align-last:justify)) {    .../* When justify is not supported, use the code here to simulate Text-align-last:justify */}

Working with instances

Detecting animation Features:

@supports (animation-name:test) {    .../* When UA supports animations feature-specific style */    @keyframes {/* @supports As a CSS condition group At-rule, you can include other At-rules */      ...        }}

To detect a custom attribute:

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

Browser compatibility

Desktop system:

Mobile Devices: