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:

Getting Started With Claude 4 API: A Developer's Walkthrough

Getting started with Claude 4 API: A developer’s walkthrough

This guide explores how to use Anthropic’s Claude 4 models, including Opus 4 and Sonnet 4, to build AI-powered applications.

Andrew Baisden
Jul 3, 2025 â‹… 16 min read
ai dev tool power rankings

AI dev tool power rankings & comparison [July 2025 edition]

Which AI frontend dev tool reigns supreme in July 2025? Check out our power rankings and use our interactive comparison tool to find out.

Chizaram Ken
Jul 2, 2025 â‹… 3 min read
how API client automation can save you hours in development

How API client automation can save you hours in development

Learn how OpenAPI can automate API client generation to save time, reduce bugs, and streamline how your frontend app talks to backend APIs.

Lewis Cianci
Jul 1, 2025 â‹… 7 min read
Interface Segregation Principle

SOLID series: Understanding the Interface Segregation Principle (ISP)

Discover how the Interface Segregation Principle (ISP) keeps your code lean, modular, and maintainable using real-world analogies and practical examples.

Oyinkansola Awosan
Jun 30, 2025 â‹… 7 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