CSS + @supports
Aug 31, 2018 · 1 min read
Native feature detection a.k.a feature query
Yip, this is going to become your new best friend — using @supports lets you specify declarations to run if, or not, a feature is supported by a browser.. and all in just CSS!
JS feature detection libraries like modernizr have got us by, but jumping at the chance to remove my JS dependancy for something native and performant.
I recently used it to support a fallback style for the handy new addition, backdrop-filter.
.some-class {
background-color: rgba(255,255,255,0.97); @supports (backdrop-filter: blur() or
-webkit-backdrop-filter:blur()) {
background-color: rgba(255,255,255,0.6);
backdrop-filter: blur(5px);
}
}
Just a note though;
- Browser support is growing but not completely there so double check where you want to use it is covered
- Make sure you reference browser prefixes for new attributes like backdrop-filter
