I am interested in incorporating the CSS3 filter:opacity() and filter:drop-shadow() properties into my designs, as they are known to be hardware accelerated in certain browsers on specific machines. However, I want to ensure I have a fallback option to regular CSS properties like opacity and box-shadow while these new features are still in development.
The challenge arises when trying to implement the normal CSS fallback strategy of placing the new properties after the old ones. Typically, if the new property is supported, it would overwrite the old one. But in this case, the new and old properties are completely different and actually combine together! An example of such CSS declaration might lead to unexpected results...
.half-transparent{
opacity: 0.5;
-webkit-filter: opacity(0.5);
filter: opacity(0.5);
}
...which could result in an unintended total opacity level of 25% instead of 50%.
For demonstration purposes, you can view an example here: https://jsfiddle.net/uq4ybvk8/
My question is, is it possible (ideally using only CSS) to create a seamless fallback from the new filter properties to the traditional CSS properties that are well established?