W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2018

Re: [csswg-drafts] [css-variables][css-cascade] When are variables computed?

From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
Date: Mon, 18 Jun 2018 18:05:31 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-398143846-1529345129-sysbot+gh@w3.org>
What's happening is:

1. On the `div`, `--color-text` becomes "invalid at computed value time", because `--color-base` doesn't exist on the `div`, and so it doesn't define a variable.  `--color-bg` is set to `lime`, the current value of `--color-accent`.

2. On the `figure`, `--color-base` and `--color-accent` get set.

3. On the `p`, `--color-text` is still not set to anything, so `color` is "invalid at computed value time" and becomes the initial value (black).  `--color-bg` is still `lime`, which it was set to on the `div`, so `background-color` is set to `lime`.

Remember that inheritance uses computed values, and variables are substituted as part of the computed-value stage, so the child elements don't see any variables.  There's no way to set up a property on a parent element so that it'll inherit and grab a variable in a child.

GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2793#issuecomment-398143846 using your GitHub account
Received on Monday, 18 June 2018 18:05:37 UTC

This archive was generated by hypermail 2.3.1 : Monday, 18 June 2018 18:05:45 UTC