Get ready for some filtered Backdrops in CSS!
Edit: backdrop-filter has now landed in Chrome and we’re just waiting for firefox https://caniuse.com/css-backdrop-filter
I have been waiting a longtime to hearken the arrival of this beautiful CSS feature: backdrop-filter and I may be ahead of the curve a bit here but I think it’s time we put it on our nearby radars!
In case you’ve never heard of it, backdrop-filter is a CSS feature defined in the CSS Filter Effect Level 2 Spec. You can see what it is trying to achieve by looking at the blurred UI elements of [iOS7+, macOS Yosemite+, Windows 10 Fluent Design] etc.
Apple added browser support for this feature alongside their vibrancy/translucency design guideline updates of iOS7 and macOS 10.10…
…with Microsoft adding translucency in their new Fluent Design system spec and the browser feature to the current Edge 17 version.
Chrome has support too. The only major browser to be left out is Firefox who has been playing catch-up in a number of other areas and making leaps and bounds at it.
I’ve been a fan of the design potential of this feature for quite sometime because it is so useful for overlay-situations like modals, alerts, temporarily hiding images and providing a tasteful alternative to the light-box effect being used to add text legibility to overlaid elements.
…providing a tasteful alternative to the light-box effect being used to add text legibility to overlaid elements.
With both Apple and Microsoft’s browsers now supporting this feature it is only a short matter of time before we see Chrome and Firefox provide full support as well. Perhaps as early as the end of the year. CSS Features like these and technical support of Service Workers coupled with the likes of React Native and PWAs draws the line between the cloud and the client even closer and that’s a celebration in itself!
If you think this feature is sweet, please bump its priority by starring the Chrome issue
This spec also allows the other CSS filter parameters to apply effects behind the given element. Apple and Microsoft both use a combination of blur and saturation for their respective UI effects.
Are you excited for these features? Are web technologies becoming too complicated? Let me know what you think!
