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.