根据 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 */
}

根据 CSS 属性的浏览器支持区分背景颜色

Differentiating background-color based on browser support of CSS properties

css

progressive-enhancement