Talking about CSS3 Feature Query: @supports function

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. This article we mainly share with you CSS3 Feature Query: @supports function, 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.

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;  }}

Canonical state

is still in the candidate recommended CR (candidate Recommendation) state, canonical link: CSS Conditional Rules Module level 3.

Browser compatibility

Desktop system:

Mobile Devices: