javascript - CSS 根据属性的可用性有条件地应用样式

Question

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

你可以有条件地应用一个样式来覆盖另一个样式

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

如果它在浏览器中实现，它将只应用第二种样式，否则使用第一个定义的回退。

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

Answer 1

您可以通过以下方式测试大多数 CSS 属性

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

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

css -webkit-background-filter <=> webkitBackgroundFilter js

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