CSS Feature Flags

CSS has Feature Queries that you can use to experiment new CSS features. If you would like to add custom styles when the browser supports CSS Grid, you write:

@supports (display: grid) {
  div {
    display: grid;
  }
}

Or add custom styles when browser support ::marker:

@supports selector(::marker) {
  li {
    padding-left: .5em;
  }
}

Note that some feature may have better support then @supports selector, that is, ::marker has better support than @supports selector.

I am excited for Feature Query because we can experiment new ideas without breaking legacy browsers.