Search code examples
cssopacitybox-shadowcss-filters

CSS3 filter:opacity(X) with fallback to opacity:X, same for filter:drop-shadow() to box-shadow

I would like to start using the CSS3 filter:opacity() and filter:drop-shadow() properties that are currently under development, as I read that they are hardware accelerated in some browsers on some machines. But at this early point I definitely need a fallback to normal CSS properties like opacity and box-shadow.

Problem is, that the normal CSS fallback strategy of placing new after old fails. Normally new (if supported) would overwrite old. But in this case new and old are completely different properties that will combine! The CSS declaration...

.half-transparent{
    opacity: 0.5;
    -webkit-filter: opacity(0.5);
    filter: opacity(0.5);
}

...will result in a total opacity of 25% instead of 50%.

Example: https://jsfiddle.net/uq4ybvk8/

Is there any way (preferably CSS only) to create a fallback from the new filter properties to well established CSS properties?

Solution

  • The support for filter (with and without prefix) should overlap pretty nicely with support for the Conditional Rules module (@supports), with the exception of older versions of Safari/iOS (before Safari 9). If you treat it as an enhancement (i.e. with a fallback to regular opacity for other browsers), that shouldn't be a big issue. Try something like this, perhaps?

    .half-transparent {
  opacity: 0.5;
}
@supports ((filter: opacity(0.5)) or (-webkit-filter: opacity(0.5))) {
  .half-opacity {
    opacity: 1;
    -webkit-filter: opacity(0.5);
    filter: opacity(0.5);
  }
}