Luke Taylor Luke Taylor - 6 months ago 9
Javascript Question

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?

Answer

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, ie

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...

Comments