CSS 根据属性的可用性有条件地应用样式答案

【问题标题】：CSS conditionally apply style based on availability of a propertyCSS 根据属性的可用性有条件地应用样式
【发布时间】：2016-09-03 11:18:50
【问题描述】：

CSS 是否有类似@media 的查询，允许我根据浏览器是否实现单独的样式有条件地应用样式？

您可以有条件地应用一种样式，该样式会覆盖另一个样式

background-color: #fff;
background-color: rgba(255,255,255,0);

只有在浏览器中实现时才会应用第二种样式，否则使用第一个定义的后备。

我想根据-webkit-background-filter 属性是否可用来做类似的事情。如果我也可以给它一个-webkit-backdrop-filter，我只想对一个元素应用透明度，否则让它不透明。这在纯 CSS 甚至 JavaScript 中是否可行？

【问题讨论】：

正常写 CSS，然后看这里：stackoverflow.com/questions/15552082/…
@RichardHowell 关闭，但截至目前，Safari 支持 -webkit-background-filter 而 Chrome 不支持。不过，这总比没有好，因为它将涵盖 IE 和 Firefox。
使用 javascript，这几乎是不费吹灰之力：看看Modernizr。
你也可以使用@supports查询，这样你就不用使用JS了
@Terry 如果您将其作为答案发布，我会接受。我喜欢这样。

【解决方案1】：

您可以通过

测试大多数 CSS 属性

document.body.style.hasOwnProperty(`prop name`)

属性名称的文本会像标准样式属性一样发生变化，即

css -webkit-background-filter webkitBackgroundFilter js

关于样式的应用，取决于你是添加/更改元素的样式还是添加/更改 CSS 规则...

【讨论】：