[css-backgrounds] Add background-opacity as an alternative to Relative Color (Color Module Level 5)

[mrleblanc101]

Currently, it's impossible to change to opacity of a CSS Custom Propriety without:
a) Wacky hacks with Custom Proprieties
b) Relative Colors from CSS Color Module Level 5 which is unsupported by all browser and pretty complex.
c) Pseudo-elements nesting

Let's say I have this variable on my site.
But somewhere else I need to use this color variable but with opacity:

:root {
  --c-primary: #e2273c;
}
.regular-background {
  background: var(--c-primary);
}

Option A

I could use an intermediate CSS Cutom Propriety, but it's hacky and it would require me to wrap my var in a rgb function for every use:

:root {
  --c-primary: 226, 39, 60;
}
.regular-background {
  background: rgb(var(--c-primary))
}
.regular-background-with-opacity {
  background:  rgba(var(--c-primary), 0.5);
}

Option B

Using relative color from CSS Color Module Level 5

:root {
  --c-primary: #e2273c;
}
.regular-background-with-opacity {
  background:  rgb(from var(--c-primary) r g b / 50%);
}

Option C

:root {
  --c-primary: #e2273c;
}
.regular-background-with-opacity {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:  var(--c-primary);
    opacity: 0.5
  }
}

Proposal

:root {
  --c-primary: #e2273c;
}
.regular-background {
  background: var(--c-primary);
  background-opacity: 0.5;
}

On the plus side, this could also affect background-image which currently require to use Option C and a pseudo-element to change their opacity.
From my very little understanding of how browser engine work, this seem a lot easier to implement than Relative Color and could be implement and shipped much faster.

[svgeesus]

Just to comment on one point:

Relative Colors from CSS Color Module Level 5 which is unsupported by all browser and pretty complex.

Actually no, looking at the results Safari has 100% passes (2076 / 2076) on RCS in the WPT tests, Chrome and Firefox are also working on it.

It is also pre-cleared (before CR) as ready to ship

Your example shows that RCS is pretty simple although there is no need to use rgb() there:

Option B

Using relative color from CSS Color Module Level 5

:root {
  --c-primary: #e2273c;
}
.regular-background-with-opacity {
  background:  rgb(from var(--c-primary) r g b / 50%);
}

what happens if another stylesheet does

:root {
  --c-primary: color(display-p3 0 1 0);
}

You may be assuming that the color space used for the declaration and the one used for RCS have to match? If so, rest assured that they do not. Although your example will still work, there will just be rgb values greater than 1 00% or less than 0.

Either way, this seems like a simple and easy way to alter the alpha value. Your example is not demonstrating the complexity you mention, do you have a better example?

[svgeesus]

In your proposal, would the alpha of the color and the background opacity get multiplied together?

Is this (group) opacity, or an additional alpha value?

[SebastianZ]

Another way to achieve this would be via image manipulation as discussed in #6807.
The syntax and names are still in discussion, though applying the proposed solutions to the given example, it might be expressed like this:

@image-manipulation --o {
  opacity: 0.5;
}

:root {
  --c-primary: #e2273c;
}

.regular-background {
  background: manipulate-image(color(var(--c-primary)), --o);
}

or like this:

:root {
  --c-primary: #e2273c;
}

.regular-background {
  background: image(color(var(--c-primary)), opacity(0.5));
}

Two big benefits of that approach:

1. It can be applied everywhere <image> values are allowed, i.e. background-image, border-image-source, mask-image, list-style-image, etc.
2. It allows a much greater variety of image manipulations than just opacity.

Having said all that, this issue is actually a duplicate of #4996. So I close it in favor of the other one.

Sebastian

[mrleblanc101]

@svgeesus

Actually no, looking at the results Safari has 100% passes (2076 / 2076) on RCS in the WPT tests, Chrome and Firefox are also working on it.

Safari has it under Experimental feature which mean it will probably not ship in the next stable release.

Your example shows that RCS is pretty simple although there is no need to use rgb() there:

I'm not sure what you mean here. You copy pasted the same code block.
Maybe my exemple is wrong, I did not test it. It was more meant to understand my proposal.

What happens if another stylesheet does

I don't know what you mean, this exemple was not part of my proposal.
It's what will eventually ship in CSS Color Module Level 5, so I have no idea what the behavior should be.

In your proposal, would the alpha of the color and the background opacity get multiplied together?
Is this (group) opacity, or an additional alpha value?

I don't know, it would be up to working group to decide, it doesn't matter for me as I would never use it that way.

[mrleblanc101]

@SebastianZ

Another way to achieve this would be via image manipulation

But that would prevent you from using background-color and background-image togerther, I guess you could use the background shorthand with a comma separator, but I hate this confusing shorthand, I pretty much always use longhand so my CSS is clearer even if it's a little bit heavier.

Having said all that, this issue is actually a duplicate of #4996

That ticket hasn't seen any update in 3 years.
But I love the pseudo-element proposal !

::background {
  opacity: 80%;
} 

I feel like much more HTML elements should be pseudo-element instead of unstylable HTML Shadow.

[SebastianZ]

@svgeesus

Actually no, looking at the results Safari has 100% passes (2076 / 2076) on RCS in the WPT tests, Chrome and Firefox are also working on it.

Safari has it under Experimental feature which mean it will probably not ship in the next stable release.

Nor would the property you propose. Though Safari passing all the tests is a good indicator that their implementation is ready to ship.

Having said that, @svgeesus, https://bugs.webkit.org/show_bug.cgi?id=245970 indicates that the WPT tests don't cover system colors or currentcolor yet.

Your example shows that RCS is pretty simple although there is no need to use rgb() there:

I'm not sure what you mean here. You copy pasted the same code block. Maybe my exemple is wrong, I did not test it. It was more meant to understand my proposal.

I guess, @svgeesus' point is that you proved with your example that your claim that the relative color syntax is "pretty complex" isn't true.
It is more to write than your proposed property but also far more powerful.

And the note regarding rgb() was just a hint that there are other color spaces and functions besides rgb() now. Though, as far as I understood, that hint is just a side note and irrelavant to the feature proposal.

@SebastianZ

Another way to achieve this would be via image manipulation

But that would prevent you from using background-color and background-image togerther,

No, you could still use them together. The point is just that the opacity is only applied to the background image and not the color. The example defines a color as image and changes its opacity. The background-color stays unchanged.

Having said all that, this issue is actually a duplicate of #4996

That ticket hasn't seen any update in 3 years. But I love the pseudo-element proposal !

Even when there wasn't any activity for years, it is still about the same topic. And you're welcome to add your comments there to revive the discussion.

A pseudo-element might still be a possible solution for several use cases. Though the use case you outlined for making background colors transparent is already solved via the relative color syntax. And background image transparency (and much more) can be achieved with what I mentioned.

The main point why I am against introducing a background-opacity property is its very restricted use case. Note that there were also suggestions for a background-filter property, a background-rotate property and a background-transform property in the past. All solve a very specific use case for backgrounds. People might then ask for the same capabilities for border images or masks. Adding new properties for each of them would just be overkill.

Approaches that introduce new value syntaxes like the relative color syntax or the image manipulation syntax are far more flexible and cover much more use cases. That comes with the cost of having to write a bit more.

Sebastian