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

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

From: Chris Harvey via GitHub <sysbot+gh@w3.org>
Date: Mon, 18 Jun 2018 12:34:09 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-333250355-1529325248-sysbot+gh@w3.org>
chharvey has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-variables][css-cascade] When are variables computed? ==
I’m a bit confused by [“`var()` functions are substituted at computed-value time”](https://drafts.csswg.org/css-variables/#substitute-a-var) and how it relates to inheritance.

div {
  --color-accent: lime;
  --color-text: var(--color-base);
  --color-bg: var(--color-accent);
figure {
  --color-base: red;
  --color-accent: blue;
p {
  /* isn’t --color-text: var(--color-base); inherited here? */
  /* isn’t --color-bg: var(--color-accent); inherited here? */
  color: var(--color-text);
  background-color: var(--color-bg);
    <p>My text should be red, and my background should be blue.</p>
    <!-- They’re not. The text is black (inherited) and the background is lime. -->


I thought all custom properties inherit, so wouldn’t the paragraph inherit the `--color-text` and `--color-bg` properties from the div? Since it also inherits the `--color-base` and `--color-accent` from the figure, shouldn’t the color be red and the background-color be blue?

- https://drafts.csswg.org/css-cascade/#value-stages
- https://drafts.csswg.org/css-variables/#substitute-a-var

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2793 using your GitHub account
Received on Monday, 18 June 2018 12:34:12 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:50 UTC