[csswg-drafts] idea: CSS opacity-override property (#10214)

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

== idea: CSS opacity-override property ==
Sometimes we'd like to make a parent/ancestor have opacity less than one, but would like some child not to be affected or to have a different opacity.

This can sometimes be achieved with `background-color: rgba()` when it is specifically the background content that should have different opacity than children, but it solves the problem only part of the time.

It would be nifty to have a way to override the opacity of a child such that it is not multiplied with any ancestor opacity, but instead starts with a value as if ancestor opacities are all 1.

For example, currently, the following results in an ancestor having visual opacity 0.5, and a descendant having visual opacity of 0.4:

```css
.some-ancestor {
  opacity: 0.5; // we see 0.5 for ancestor content
}

.some-descendant {
  opacity-override: 0.8; // except for this descendant we see 0.4
}
```

With a new property named `opacity-override` (or something) we could force the descendant to have a specific opacity not derived from multiplying with ancestor opacities:

```css
.some-ancestor {
  opacity: 0.5; // we see 0.5 for ancestor content
}

.some-descendant {
  opacity-override: 0.8; // except for this descendant we see 0.8
}
```

This would be very useful for cases when we'd like to dim all content except to highlight a particular piece of the content, without having to resort to drastic changes to DOM structure (someone may only be editing CSS, and does not want to have to refactor code spread across UI components, for example). In this use case, we might want opacity override `1` so that all content except the highlighted item is faded out:

```css
.some-ancestor {
  opacity: 0.5; // we see 0.5 for ancestor content
}

.some-descendant {
  opacity-override: 1; // except for this descendant, it visually has full opacity
}
```

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


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

Received on Tuesday, 16 April 2024 04:40:34 UTC