CODEWITHSUNDEEP
csscolorsw3c
Jacob Ford
Jacob Ford

Reputation: 5193

Could currentBackgroundColor become a valid CSS color-value keyword?

CSS defines currentColor as a color equivalent to an element’s color property. It’s similar to 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 CSS 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?

Upvotes: 29

Views: 25184

Answers (4)

Adam Katz
Adam Katz

Reputation: 16176

Yes, a currentBackgroundColor keyword could exist and was proposed in 2020. However, it does not yet exist.

Here are three ways to get close to this concept:

You can use non-root CSS variables rather than the currentColor keyword. Since these variables can be scoped, you can change them on a per-element basis, though this approach can't navigate colored children like <a> tags. (The question mentions CSS variables in a manner that appears to miss that these can be redefined throughout the stylesheet cascade.)

The Canvas system color, which is defined as the "background of application content or documents". Just to be safe, I also set the text color to CanvasColor to ensure I'm not accidentally implementing white-on-white or black-on-black.

However, this will not reflect the page's CSS—even body { background-color:purple; }. All it does is key on the system's configuration. It does seem to match the default "dark mode" coloring scheme, which solves my particular problem.

Finally, you can invert the currentColor using a color function's relative value syntax like rgb(from currentColor calc(255 - r) calc(255 - g) calc(255 - b) / alpha)

Example implementations:

:root   { color-scheme:light dark; } /* enable dark mode if so configured */
p       { padding:1ex; }
.purple { background-color:rebeccapurple; color:#fff;
  --bg:rebeccapurple; --fg:#fff; }
.var    { background-color:var(--fg, CanvasText); color:var(--bg, Canvas); }
.canvas { background-color:Canvas; color:CanvasText; }
.invert { background-color:#fff; color:
  rgb(from currentColor calc(255 - r) calc(255 - g) calc(255 - b) / alpha);
}
<p class="purple">
  This block is white on purple.
  <span class="var">This sentence swaps fg & bg using variables.</span> 
  This sentence reverts to white-on-purple.
  <span class="canvas">This sentence uses "Canvas" coloring.</span> 
  This sentence again reverts back.
  <span class="invert">This sentence inverts the currentColor.</span>
</p>
<p>This is normal text.</p>

Upvotes: 2

Oriol
Oriol

Reputation: 288470

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.

Upvotes: 12

George Adamson
George Adamson

Reputation: 29

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.

Upvotes: 2

Spudley
Spudley

Reputation: 168755

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

Upvotes: 4

Related Questions