[csswg-drafts] [css-bg-opacity] Add `background-opacity` as an alternative to Relative Color (Color Module Level 5) (#8465)

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

== [css-bg-opacity] Add `background-opacity` as an alternative to Relative Color (Color Module Level 5) ==
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](https://bugs.chromium.org/p/chromium/issues/detail?id=1274133#c3) 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:
```css
: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:
```css
: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
```css
:root {
  --c-primary: #e2273c;
}
.regular-background-with-opacity {
  background:  rgb(from var(--c-primary) r g b / 50%);
}
```

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

#### Proposal
```css
: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.


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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 17 February 2023 19:47:56 UTC