CSS3 filter:opacity(X) 回退到 opacity:X，与 filter:drop-shadow() 到 box-shadow 相同

Question

我想开始使用目前正在开发的 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 属性的回退？

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

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

css

opacity

box-shadow

css-filters