CSS + @supports

itsvicki__
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
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade