CODEWITHSUNDEEP
ioscsssafarimobile-safaribackground-color
Nathaniel
Nathaniel

Reputation: 23

How do I make -webkit-backdrop-filter availability by device change background-color?

I absolutely love the way Webkit's backdrop filters look, and I am new to CSS and HTML, but I do know that backdrop filters are only available on Safari, which is not much of the browser population. I want to know how to make it so that devices that do not support backdrop filters default to an opaque background. Here is an example if what I want users with backdrop filter-capable devices to see

.background{background:rgba(255,255,255,0);-webkit-backdrop-filter: blur(10px);}

Here is what I want users without backdrop filter-capable devices to see:

.background{background:rgb(255,255,255);}

What coding would I use to achieve this?

Upvotes: 2

Views: 477

Answers (1)

kaiserkiwi
kaiserkiwi

Reputation: 546

Just use the supports-Media Query to check if the browser is supporting the technique.

In your case it would be look this way:

.background {
    background: rgba(255, 255, 255);
}

@supports ((backdrop-filter: blur(10px))) or (-webkit-backdrop-filter: blur(10px)) {
    .background {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

Upvotes: 3

Related Questions