- From: Sébastien LeBlanc via GitHub <sysbot+gh@w3.org>
- Date: Fri, 17 Feb 2023 19:47:54 +0000
- To: public-css-archive@w3.org
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