[csswg-drafts] [css-color] Fallback lists for color properties

henrikhelmers has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color] Fallback lists for color properties ==
https://drafts.csswg.org/css-color/
https://drafts.csswg.org/css-backgrounds/#background-color
https://drafts.csswg.org/css-backgrounds/#border-color
https://www.w3.org/TR/fill-stroke-3/#fill-color
https://www.w3.org/TR/fill-stroke-3/#stroke-color

With the addition of CSS variables I often end up in situations where a color is not available. The variables are generated with JavaScript. To inform CSS that the color variable is available there I am adding class names.

If CSS colors could be specified with a fallback the classname juggling could be avoided and code would be more precise.

**New functionality:**
```
.bg {
  background-color: var(--customBackground), hotpink;
}

```

**Current situation:**
```
.bg {
  background-color: hotpink;
}
.hasCustomBackground .bg {
  background-color: var(--customBackground);
}
```

In addition to the CSS above, there is also some extra Javascript needed to handle the classnames. The code example above is very short, in practice there are often many lines (or even pages) separating the two background color declarations, making it much easier to make mistakes.

I am unsure how this could be added to background-image gradient or box-shadow syntax without complicating it.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2618 using your GitHub account

Received on Friday, 27 April 2018 08:32:17 UTC