CODEWITHSUNDEEP
javascriptcssif-statementconditional-statements
Luke Taylor
Luke Taylor

Reputation: 9561

CSS conditionally apply style based on availability of a property

Does CSS have something like @media queries that would allow me to conditionally apply styles based on whether the browser implements a separate style?

You can conditionally apply a style that would override another like

background-color: #fff;
background-color: rgba(255,255,255,0);

which will only apply the second style if it is implemented in the browser, otherwise use the first-defined fallback.

I'd like to do something similar with a fallback based on whether the -webkit-background-filter property is available. I'd like to only apply transparency to an element if I can also give it a -webkit-backdrop-filter, otherwise make it opaque. Is this possible in pure CSS, or even with JavaScript?

Upvotes: 1

Views: 448

Answers (1)

Greg
Greg

Reputation: 46

You can test for most CSS properties via

document.body.style.hasOwnProperty(`prop name`)

The text of the property name changes like standard style properties, i.e.

css -webkit-background-filter <=> webkitBackgroundFilter js

As to applying the styles, depends on whether you add/change the styles of elements or add/change the CSS rules...

Upvotes: 2

Related Questions