'Could `currentBackgroundColor` become a valid, useful CSS color value keyword?

CSS3 defines currentColor as a color equivalent to an element’s color property. It’s sorta kinda like a CSS variable, but on a per-element basis. When currentColor is used as a color value in any CSS property, it computes to whatever is the color value for the element to which it is applied.

So, my question is not whether something currentBackgroundColor exists—I have combed through the CSS3 Color specification and am fairly confident it does not—but whether it could exist.

Borrowing from the currentColor definition, I presume currentBackgroundColor would be defined as something like:

The value of the ‘background-color’ property. The computed value of the ‘currentBackgroundColor’ keyword is the computed value of the ‘background-color’ property. If the ‘currentBackgroundColor’ keyword is set on the ‘background-color’ property itself, it is treated as ‘background-color: inherit’.

Can anyone point to any implementation issues which I may not be considering?

csscss-color


Solution 1:[1]

Yes it could. For example, it would make it very easy to create an section of your text inverted-colour, ie you could swap the foreground and background colours to highlight something.

However, suggesting this as a CSS feature would be fighting against the tide. There used to be a whole bunch of CSS colour keywords, for things like the scrollbar colour, and the standard button colour, and the colours of the 3D shadows on the buttons... but they were all dropped from CSS some time ago.

There are lots of things in CSS that could be useful that aren't in there. Personally I'm more excited about CSS variables. When they become mainstream we are unlikely to be too worried about colour keywords like this

Solution 2:[2]

Can anyone point to any implementation issues which I may not be considering?

Yes. There could be circular dependencies:

* {
  background-color: currentColor;
  color: currentBackgroundColor;
}

Moreover, currentcolor can be useful because text has a single color. But backgrounds can have additional things like background-images and such, which might counterintuitively leave background-color set to the default of transparent. And then currentBackgroundColor is not much useful.

Solution 3:[3]

There are certainly many cases where currentBackgroundColor would be very useful. Alternative techniques I've used are...

  1. CSS Custom Properties (CSS Variables), eg --backgroundColor.
  2. Make use of currentColor to set background-color. This approach is only possible on containers (and specific children) that are not using the foreground colour. Child elements can inherit color and set background-color:currentColor.

Solution 4:[4]

background: inherit worked for me. Basically inherits parent background color.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Spudley
Solution 2 Jacob Ford
Solution 3 George Adamson
Solution 4 bogdanoff

Related Questions