基于浏览器对CSS属性的支持区分背景颜色

Question

我通过在纯CSS中创建了一个圆点背景

.polka-gr{

background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}

<div class="polka-gr" style="background-color:#77FFD1;width:600px;height:200px;></div>

如您所见，背景颜色为绿色阴影(十六进制值为#77FFD1)。

此代码提供的某些客户端不支持radial-gradient(例如，使用Opera Mini浏览器的客户端)。所有这样的客户端目前都返回到没有圆点的普通#77FFD1背景。很公平。

但是，有没有任何纯粹的CSS方法可以让这些不支持的浏览器恢复到完全不同的颜色，例如#FFFF99？

支持的浏览器应该仍然可以看到带圆点的绿色背景色(#77FFD1)。

这样的安排可能吗？如果是这样的话，一个说明性的例子就太好了。

Answer 1

.polka-gr{
background: yellow;
}
@supports (background: radial-gradient(#F1C3CB 20%, transparent 0)) {
.polka-gr{
background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-color:#77FFD1;
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
}

<div class="polka-gr" style="width:600px;height:200px;></div>

要针对不同的浏览器，可以使用@supports

https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports

在您的情况下：

@supports (background: radial-gradient(white, black)) {
/* relevant styles here */
}