- From: Romain Menke via GitHub <sysbot+gh@w3.org>
- Date: Tue, 11 Oct 2022 17:12:13 +0000
- To: public-css-archive@w3.org
I think you can do this today with `:has()` but the ergonomics might not be ideal.
_At least it is possible to polyfill/downgrade_
```css
/* using :where() for 0 specificity */
:root:has(:where(#darkmode:checked)) {
--color-bg: black; /* ⬛️ */
--color-text: white; /* ⬜️ */
}
/* using :where() for 0 specificity */
:where(#darkmode:checked) {
background-color: var(--color-bg); /* <-- 🟥 red, set via the style below */
}
:root:has(#page) {
--color-bg: red; /* <-- 🟥 this would be used (greater specificity) */
}
#page {
background-color: var(--color-bg); /* 🟥 */
color: var(--color-text); /* ⬜️ */
}
```
-----
I am unsure if custom key/values with `env()` had a CSS only part.
But `env()` might be interesting to avoid author confusion.
Keeping track of which custom props are global or not will be tricky.
`env()` has the benefit of being understood as global.
--
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7866#issuecomment-1275015641 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 11 October 2022 17:12:15 UTC