W3C home > Mailing lists > Public > www-style@w3.org > February 2013

[css-variables] fallback value handling needs better definition

From: John Daggett <jdaggett@mozilla.com>
Date: Tue, 26 Feb 2013 19:15:52 -0800 (PST)
To: www-style list <www-style@w3.org>
Message-ID: <684618225.5394736.1361934952294.JavaMail.root@mozilla.com>

The current ED of CSS Variables defines syntax for a fallback value [1].
It defines the use of the fallback value this way:

  If the variable named by the first argument is valid, the
  variable's value is substituted as normal. If it's invalid, and
  a <fallback> was provided, the <fallback> is substituted
  instead. Otherwise, the variable is an invalid variable. 

Does this mean that undefined variables cause the <fallback> to be substituted?


:root {
  /* no variables defined */
  font-weight: normal;

div.test1 {
  font-weight: var(foobar, bold);

Will the text in the div above be bold or not?  I'm assuming yes because an
"invalid variable" evaluates to invalid.

What's the exact way that a variable is determined to be "valid"?  Simply that
the resulting property value expression doesn't parse?  What happens when 
several variables are combined and the resulting combined expression is invalid?
Are all fallback values used or is there some iterative process? 

:root {
  var-x1: underline;
  var-x2: underline;
  var-x3: overline;

div.test2 {
  text-decoration: var(x1, var(x3)) var(x2, var(x3));

text-decoration: underline underline; ==> invalid (i.e. x1 & x2)
text-decoration: overline underline;  ==> valid   (i.e. x3 & x2)
text-decoration: overline overline;   ==> invalid (i.e. x3 & x3)

Next, what happens when fallback values are nested?

div.test3 {
  text-decoration: var(x1, var(x3, var(x1))) var(x2, var(x3));

Will the resulting value of text-decoration be valid?  Given nesting level n, 
does the user agent continue evaluating the expression n times until it finds
one that is valid?

In other words, do the evaluated expressions look like this:

1. text-decoration: underline underline; ==> invalid (i.e. x1 & x2)
2. text-decoration: overline overline;   ==> invalid (i.e. x3 & x3)
3. text-decoration: underline overline;  ==> valid   (i.e. x1 & x3)

I think the definition of "valid" here needs to be more rigorously
specified, especially given that the notation allows for nested
fallback values.


John Daggett
[1] http://dev.w3.org/csswg/css-variables/#using-variables
Received on Wednesday, 27 February 2013 03:16:19 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:26 UTC