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 to design apps with Apple Intelligence in mind

How to design apps with Apple Intelligence in mind

Apple Intelligence is here. What does it mean for frontend dev and UX? Explore the core features of the update, do’s and don’ts for designing with Apple Intelligence in mind, and reflect on the future of AI design.

Murat YĂĽksel
Jun 24, 2025 â‹… 10 min read
How To Optimize Your Next.js App With After()

How to optimize your Next.js app with after()

Next.js’ after() is a new API that lets you run logic after your route has finished rendering, without blocking the client.

Temitope Oyedele
Jun 24, 2025 â‹… 11 min read
JavaScript Loops Explained, And Best Practices

JavaScript loops explained, and best practices

JavaScript loops like for, for...of, and for...in are constructs that help run a piece of code multiple times.

Rahul Padalkar
Jun 23, 2025 â‹… 8 min read
8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 â‹… 16 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