2019-07-31
787
#chrome#web design#what's new
Facundo Corradini
4338
Jul 31, 2019 â‹… 2 min read

New in Chrome 76: The frosted glass effect with backdrop-filter

Facundo Corradini Frontend developer, CSS specialist, best cebador de mates ever.

Recent posts:

how and when to use JavaScript arrow functions

How and when to use JavaScript arrow functions

Arrow functions have a simpler syntax than standard functions, and there are some important differences in how they behave.

Joe Attardi
Feb 17, 2025 â‹… 5 min read
javascript is null or empty function

How to check for null, undefined, or empty values in JavaScript

In most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?

Lewis Cianci
Feb 14, 2025 â‹… 4 min read
MERN Stack: Overview With Examples

What is the MERN stack? Overview with examples

Discover how the MERN stack (MongoDB, Express.js, React, Node.js) enables developers to build dynamic, performant, modern websites and apps.

Nefe Emadamerho-Atori
Feb 13, 2025 â‹… 20 min read
Leveraging Parallel Computing In Node.js

Leveraging parallel computing in Node.js

Use parallel computing in Node.js with worker threads to optimize performance, handle CPU-intensive tasks, and utilize multi-core processors.

David Omotayo
Feb 13, 2025 â‹… 8 min read
View all posts

2 Replies to "New in Chrome 76: The frosted glass effect with backdrop-filter"

  1. Instead of writing

    @supports (backdrop-filter: none) {

    backdrop-filter: blur(8px);

    }

    one should be writing

    @supports (backdrop-filter: blur(8px)) {

    backdrop-filter: blur(8px);

    }

    because you’re not in fact interested if the browser supports “backdrop-filter: none”, right?

    This is especially important once you realize that the same property (e.g. display) supports values with wide range of support by different UAs.

  2. Hi Mikko,

    The idea is to query the support of the property instead of the value. Querying for “backdrop-filter: none” will throw the same true / false result as querying for “backdrop-filter: 8px”, but allow us to change the value in a single place if for whatever reason we decide to do that in the future.

    It might not be such a dramatic impact in the small scale, but going with a query for property+value can lead to issues as the codebase grows and we start to have a lot of repetition and forgotten queries that doesn’t really make sense.

    Your point is certainly valid for properties such as display or position, but for most others, querying for property instead of property+value is a better approach in my opinion.

Leave a Reply