A quick post on @supports rule which although I know about I rarely use. This is described by MDN as allowing you to "specify declarations that depend on a browsers support for specific CSS features".
A couple of simple examples to check if a single feature is supported or not:
@supports (display:grid){
main { display: grid; }
}
@supports not (display:grid){
main { display: block; }
}
These simple examples can be made more complex through the use of not
, and
and or
operators. Firstly the not
operator is used to check if a property/value is not supported e.g. display grid in the example above will be matched in Internet Explorer but ignored in modern browsers. The and
operator will only be matched when all expressions evaluate to true - multiple options can be chained together e.g.
@supports (display:grid) and (display:inline-grid) {
// do something
}
The or
operator will match if any of the given expressions are matched e.g.
@supports (display:grid) or (display: flex){
// do something
}
I also learnt it is possible to check for support of custom properties e.g.
@supports (--bgcolor: red){
body {
background-color: var(--bgcolor);
}
}
Top comments (0)