Feature queries give us the ability to use CSS to detect whether a browser supports a CSS feature. We can use this feature to write our styles using new syntax when browsers support the latest CSS features, while elegantly downgrading browsers that don’t.

CSS is designed to support elegant degradation. CSS syntax that is not supported by the browser will be ignored during browser parsing. Therefore, we simply write styles that satisfy the visual integrity of older browsers and then style them incrementally for browsers that support advanced features. But sometimes that’s not what we want: when we need a range of styles to achieve our visual effects, it’s possible to mess up if the browser doesn’t support one of the CSS features in the range of styles we’re using.

The basic use

The basic syntax of @support is very similar to @media

.selector {
/* property supported in old browsers */
}
@support (property: value) {
/* property supported in new browsers */
}
Copy the code

A feature query statement starts with the @support keyword, plus a conditional statement and CSS rules enclosed in braces. We can write the style supported by the old browser outside the feature query now, and then write the new style in the feature query when the browser supports some new features.

div {
  display: flex;
}
@support (display: grid) {
  div {
    display: grid; }}Copy the code

In this example, we started with the Flex layout to implement the layout style supported by older browsers, and then we took it a step further by supporting display: grid; Properties in new browsers that use grid layouts for fun now.

Detection of combined conditions in conditional statements

We may sometimes need to query the browser’s support for multiple CSS properties at the same time to see how to organize our progressive styles. In this case, we can combine our query conditions with Boolean operations of AND, OR, and not.

Boolean operator

The AND operator can logic and manipulate the results of two expressions, meaning that the resulting expression is true only if both expressions are true, and false otherwise. Multiple logic and expressions can be directly side-by-side in a row, indicating that the evaluation of the whole is true only when all expressions are true.

@support (display: table-cell) and (display: list-item) and (display:run-in) {
/* some style here */
}
Copy the code

The OR operator performs logic or manipulation on the result of two expressions, that is, if either expression is true, the resulting expression is true, and otherwise false. Multiple logic or expressions can also be placed directly in a row, indicating that only one of the expressions is true and the evaluation of the whole is true.

@support (-webkit-mask-image: -webkit-linear-gradient(right,transparent,#000)) or (mask-image: linear-gradient(-90deg,transparent,#000)) {
  /* some style here */
}
Copy the code

The NOT operator is usually placed in front of an expression to indicate the negation of the original expression, that is, the not operator is added to the true expression to indicate false, and the not operator is added to the false expression to indicate true.

@support not (display: flex) {
  div {
    float: left; }}Copy the code

Combined condition detection

Boolean operators can also be used in combination, but must be separated by parentheses to avoid confusion over precedence

@support (display: flexbox) and ( not (display: inline-grid) ) {
/* some style here */
}
Copy the code

CSS.supports

There is an API in JavaScript that corresponds to feature queries, window.css. Supports. This method takes as a parameter a string similar to the query condition in the CSS properties query statement, or two parameters, one for the property name and one for the property value.

CSS.support('(display: flex) and(not(display: line-grid)');
CSS.support('display'.'grid');
Copy the code

This API can be used in conjunction with CSS feature queries to design incremental functionality when our browsers support some of the more advanced features.

compatibility

Every CSS feature is about compatibility. Feature query is in 2011 has been released in the draft, over the years the degree of support has been considerable, in addition to IE series completely wiped out, other mainstream browsers can be very good support.

reference

  • @support
  • CSS.support