CSS3 filter:opacity(X) 回退到 opacity:X，同样适用于 filter:drop-shadow() 到 box-shadow答案

【问题标题】：CSS3 filter:opacity(X) with fallback to opacity:X, same for filter:drop-shadow() to box-shadowCSS3 filter:opacity(X) 回退到 opacity:X，同样适用于 filter:drop-shadow() 到 box-shadow
【发布时间】：2015-10-14 10:55:30
【问题描述】：

我想开始使用当前正在开发的 CSS3 filter:opacity() 和 filter:drop-shadow() 属性，因为我读到它们在某些机器上的某些浏览器中是硬件加速的。但在这个早期阶段，我肯定需要回退到普通的 CSS 属性，如不透明度和框阴影。

问题是，在旧的之后放置新的正常 CSS 后备策略失败了。通常新的（如果支持）会覆盖旧的。但在这种情况下，新旧是完全不同的属性，它们将结合起来！ CSS 声明...

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

...将导致总不透明度为 25% 而不是 50%。

示例：https://jsfiddle.net/uq4ybvk8/

是否有任何方法（最好仅 CSS）来创建从新过滤器属性到完善的 CSS 属性的后备？

【问题讨论】：

没有必要同时使用opacity 和filter:opacity....opacity 不会去任何地方。 filter:opacity 只是另一种选择，它们不能完全互换。如果这确实是一个问题，我怀疑你需要使用像 Modernizr 这样的特征检测。
@Paulie_D：请阅读我的文字。我已经明确表示我想使用 filter:opacity 因为性能优于 opacity（硬件加速）。我有一个真实的用例，在高分辨率图像上施加的不透明度和框阴影确实会在 Android Chrome 浏览器上造成性能问题（这可能会受益于硬件加速）。
那么你需要使用前面提到的特征检测。
我在我的问题中添加了“最好仅 CSS”。我希望有一种纯 CSS 方式。
那么...不，真的没有。如果它们都受支持，则它们都将被使用，因为它们不是相同的属性，即使它们具有几乎相同的效果。

标签： css opacity box-shadow css-filters

【解决方案1】：

对filter（带和不带前缀）的支持应该与对条件规则模块（@supports）的支持很好地重叠，但旧版本的Safari/iOS（Safari 9 之前）除外。如果您将其视为增强功能（即，对于其他浏览器回退到常规 opacity），那应该不是什么大问题。试试这样的，也许？

.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);
  }
}

【讨论】：

这是一个我不知道的非常有趣的选项。不幸的是，它不适用于大量较旧的 Safari 版本，但我仍会将其标记为已接受的答案。