Differentiating background-color based on browser support of CSS properties

Question

I have created a polka dotted background in pure CSS via:

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

As you can see, the background color is a greenish shade (of hex value #77FFD1).

Some of the clients this code is being served to do not support radial-gradient (e.g. those using Opera Mini browser). All such clients currently fall back to a plain #77FFD1 background without polka dots. Fair enough.

But is there any pure CSS way to get these non-supporting browsers to fall back to a different color entirely, e.g. #FFFF99?

Supporting browsers should still see the greenish background-color (#77FFD1) with polka dots.

Is such an arrangement possible? If so, an illustrative example would be great.

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>

To target different browsers you can use @supports

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

In your case:

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