preface

@support is a relatively new CSS3 attribute. A few years ago, when @support was first introduced, people didn’t feel much about this attribute. At that time, CSS3 compatibility was not very good on browsers, and some browsers did not support @support. But now I think you can actually use it!

@support

Allows us to test whether the browser supports specific attributes before applying style blocks: value combinations; This is a bit like @media, in that when the width of the browser falls between each range, the matching CSS takes effect. For example, @media queries how to match a browser window when its width is smaller than a specified size and then the CSS inside takes effect.

grammar

@supports (attribute: attribute value) {style to be in effect}

Set div layout to grid if grid is supported.

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

Logical operations

not:

@supports not (display: grid) {

}
Copy the code

and:


@supports (display: grid) and (-webkit-display:grid) {

}
Copy the code

or:

@supports (display:grid) or (-webkit-display:grid ) {

}
Copy the code

Mixing:

@supports ((display:grid) or
          (-webkit-display:grid) ) and (display:-webkit-grid) {

}
Copy the code

JS support

Check whether the CSS is saved

if (window.CSS && window.CSS.supports) {

}
Copy the code

You can separate attributes from values

let supportsGrid = CSS.supports("display", "grid");

Copy the code

You can keep it together

let supportsGrid = CSS.supports("(display: grid)");

Copy the code

Scenario 1

There are three divs like this.

.child{ width:100px; margin:0 10px; display: inline-block; vertical-align: middle; background-color: pink; } <div style="width:400px; height: 100px; border: 1px solid #000;" > <div class="child">div1</div> <div class="child">div2</div> <div class="child">div3<br />div3</div> </div>Copy the code

When we want to set the three child divs to equal height, the first reaction is to set the child height:100px; However, we are not allowed to use specific values, so this is where fill-available comes in!

  @supports (height: fill-available) or (height: -webkit-fill-available) {
  .child {
    height: -webkit-fill-available;
    height: fill-available;
  }
}
.child {
    width: 100px;
    height: fill-available;
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
    background-color: pink;
  }
Copy the code

Scenario 2

Tests whether custom attributes are supported

div { color: red; } @supports (--css: variables) { div { --my-color: blue; color: var(--my-color, "blue"); }} <div> <h1> </h1> </div>Copy the code