- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 28 Sep 2011 23:03:07 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-variables
In directory hutz:/tmp/cvs-serv3345
Modified Files:
Overview.html Overview.src.html
Log Message:
Removed the special rules about variable usage, per convo with Hyatt.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-variables/Overview.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -d -r1.2 -r1.3
--- Overview.html 28 Sep 2011 22:51:32 -0000 1.2
+++ Overview.html 28 Sep 2011 23:03:05 -0000 1.3
@@ -144,10 +144,6 @@
<li><a href="#defining-variables"><span class=secno>2. </span> Defining
Variables</a>
- <ul class=toc>
- <li><a href="#variable-classes"><span class=secno>2.1. </span> Variable
- Classes</a>
- </ul>
<li><a href="#using-variables"><span class=secno>3. </span> Using
Variables</a>
@@ -348,40 +344,6 @@
<p>Before they are defined, all variables are <a
href="#invalid-variable"><i>invalid variables</i></a>.
- <h3 id=variable-classes><span class=secno>2.1. </span> Variable Classes</h3>
-
- <p>Variables fall into a few different classes which affect where and how
- they can be used, depending on the value they're defined as.
-
- <dl>
- <dt><dfn id=singular-variable title="singular variable|singular
- variables">singular variable</dfn>
-
- <dd>A variable whose value is a single <a
- href="#cssfoo"><i>CSSFOO</i></a>, such as a keyword (like ‘<code
- class=css>red</code>’), a dimension (like ‘<code
- class=css>20px</code>’), or a function (like ‘<code
- class=css>linear-gradient(red,blue)</code>’).
-
- <dt><dfn id=compound-variable title="compound variable|compound
- variables">compound variable</dfn>
-
- <dd>A variable whose value is a space-separated list of <a
- href="#cssfoo"><i>CSSFOO</i></a>s, like ‘<code class=css>20px 30px
- black</code>’.
-
- <dt><dfn id=list-variable title="list variable|list variables">list
- variable</dfn>
-
- <dd>A variable whose value is multiple <a
- href="#cssfoo"><i>CSSFOO</i></a>s separated by spaces or other
- separators, such as commas or slashes, like ‘<code class=css>red,
- blue, white</code>’.
- </dl>
-
- <p class=issue>What term can I use for <dfn id=cssfoo>CSSFOO</dfn>? It
- looks like it corresponds to "term" in the 2.1 grammar.
-
<h2 id=using-variables><span class=secno>3. </span> Using Variables</h2>
<p>A variable can be used anywhere a value is expected in CSS. Variables
@@ -391,77 +353,10 @@
value that nonetheless has no relation to the variable of that name.
<p>A variable is substituted for its value in the property value at
- computed-value time.
-
- <p><a href="#singular-variable"><i>Singular variables</i></a> can be used
- anywhere as a value. They can be an entire property's value, a component
- value in a larger property value, an argument to a function, etc.. <a
- href="#compound-variable"><i>Compound variables</i></a> are somewhat more
- restricted - they can only be used as an entire property value, a whole
- component of a list-valued property, or a whole function argument. <a
- href="#list-variable"><i>List variables</i></a> are the most restricted -
- they can only be used as an entire property value, as one or more whole
- components of a list-valued property, or as a whole series of function
- arguments.
-
- <div class=example>
- <p>Here are some examples of valid and invalid use of a <a
- href="#compound-variable"><i>compound variable</i></a>:</p>
-
- <pre>
-@var $compound 20px 30px;
-div {
- margin: $compound;
- /* Valid, as it's used as a whole property value */
- /* Equivalent to "margin: 20px 30px;" */
-
- text-shadow: $compound blue;
- /* Invalid, as it's not used as a whole property value */
-
- background-position: 10px 10px, $compound, 50px;
- /* Valid, as it's used as a whole component of a list-valued property */
- /* Equivalent to "background-position: 10px 10px, 20px 30px, 50px;" */
-
- background-image: radial-gradient($compound, red, blue);
- /* Valid, as it's used as a whole function argument */
- /* Equivalent to "background-image: radial-gradient(20px 30px, red, blue);" */
-}</pre>
-
- <p>Here are some examples of valid and invalid uses of a <a
- href="#list-variable"><i>list variable</i></a>:</p>
-
- <pre>
-@var $list 20px, 30px 40px;
-div {
- background-position: $list;
- /* Valid, as it's used as a whole property value */
- /* Equivalent to "background-position: 20px, 30px" */
-
- background-position: 10px $list;
- /* Invalid, as it's not used as a whole property value or component of a list. */
- /* NOT equivalent to "background-position: 10px 20px, 30px 40px;" */
-
- background-position: 10px, $list, 50px;
- /* Valid, as it's used as a whole sequence of components of a list. */
- /* Equivalent to "background-position: 10px, 20px, 30px 40px, 50px;" */
-
- background-image: radial-gradient($list, red, blue);
- /* Valid, as it's used as a whole sequence of function arguments. */
- /* Equivalent to "background-image: radial-gradient(20px, 30px 40px, red, blue);" */
-
- background-image: radial-gradient(10px $list, red, blue);
- /* Invalid, as it's not used as a whole sequence of function arguments */
-}</pre>
- </div>
-
- <p>Using a <a href="#compound-variable"><i>compound variable</i></a> or <a
- href="#list-variable"><i>list variable</i></a> in an invalid way is an <a
+ computed-value time. If the property value, once all variables are
+ substituted in, is invalid for the property, that is an <a
href="#invalid-variable-use"><i>invalid variable use</i></a>.
- <p>Similarly, if a property containing a variable in its property value
- ends up being invalid when the variable's value is substituted in, that is
- an <a href="#invalid-variable-use"><i>invalid variable use</i></a>.
-
<div class=example>
<p>For example, the following usage is fine from a syntax standpoint, but
results in nonsense when the variable is substituted in:</p>
@@ -482,16 +377,15 @@
<p>An <dfn id=invalid-variable title="invalid variable|invalid
variables">invalid variable</dfn> results from having variables directly
- or indirectly refer to themselves. Using an <a
- href="#invalid-variable"><i>invalid variable</i></a> results in an <a
- href="#invalid-variable-use"><i>invalid variable use</i></a>.
+ or indirectly refer to themselves, or from using an undefined variable.
+ Using an <a href="#invalid-variable"><i>invalid variable</i></a> results
+ in an <a href="#invalid-variable-use"><i>invalid variable use</i></a>.
<p>An <dfn id=invalid-variable-use>invalid variable use</dfn> results from
- either using an <a href="#invalid-variable"><i>invalid variable</i></a>,
- or using a <a href="#compound-variable"><i>compound variable</i></a> or <a
- href="#list-variable"><i>list variable</i></a> in an invalid way. When
- this happens, the property the variable is used in must compute to the
- property's initial value.
+ either using an <a href="#invalid-variable"><i>invalid variable</i></a> in
+ a property value, or using a valid variable that produces an invalid
+ property value when it is substituted in. When this happens, the property
+ the variable is used in must compute to the property's initial value.
<div class=example>
<p>For example, in the following code:</p>
@@ -503,13 +397,13 @@
<p>the <p> elements will have transparent backgrounds (the initial
value for ‘<code class=property>background-color</code>’),
- rather than red text.</p>
+ rather than red backgrounds.</p>
</div>
<p class=note>The <a href="#invalid-variable-use"><i>invalid variable
use</i></a> concept exists because variables can't "fail early" like other
- syntax errors can, so by the time the user agent realizes a variable is
- invalid, it's already thrown away the other cascaded values.
+ syntax errors can, so by the time the user agent realizes a property value
+ is invalid, it's already thrown away the other cascaded values.
<h2 id=cssom><span class=secno>4. </span> APIs</h2>
@@ -818,14 +712,6 @@
<li>authoring tool, <a href="#authoring-tool" title="authoring
tool"><strong>6.2.</strong></a>
- <li>compound variable, <a href="#compound-variable" title="compound
- variable"><strong>2.1.</strong></a>
-
- <li>compound variables, <a href="#compound-variable" title="compound
- variables"><strong>2.1.</strong></a>
-
- <li>CSSFOO, <a href="#cssfoo" title=CSSFOO><strong>2.1.</strong></a>
-
<li>inactive, <a href="#inactive-var-rule"
title=inactive><strong>2.</strong></a>
@@ -838,21 +724,9 @@
<li>invalid variable use, <a href="#invalid-variable-use" title="invalid
variable use"><strong>3.1.</strong></a>
- <li>list variable, <a href="#list-variable" title="list
- variable"><strong>2.1.</strong></a>
-
- <li>list variables, <a href="#list-variable" title="list
- variables"><strong>2.1.</strong></a>
-
<li>renderer, <a href="#renderer" title=renderer><strong>6.2.</strong></a>
- <li>singular variable, <a href="#singular-variable" title="singular
- variable"><strong>2.1.</strong></a>
-
- <li>singular variables, <a href="#singular-variable" title="singular
- variables"><strong>2.1.</strong></a>
-
<li>style sheet
<ul>
<li>as conformance class, <a href="#style-sheet" title="style sheet, as
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-variables/Overview.src.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -d -r1.2 -r1.3
--- Overview.src.html 28 Sep 2011 22:51:32 -0000 1.2
+++ Overview.src.html 28 Sep 2011 23:03:05 -0000 1.3
@@ -150,86 +150,14 @@
<p>Before they are defined, all variables are <i>invalid variables</i>.</p>
-<h3 id='variable-classes'>
-Variable Classes</h3>
-
- <p>Variables fall into a few different classes which affect where and how they can be used, depending on the value they're defined as.</p>
-
- <dl>
- <dt><dfn title="singular variable|singular variables">singular variable</dfn></dt>
- <dd>A variable whose value is a single <i>CSSFOO</i>, such as a keyword (like ''red''), a dimension (like ''20px''), or a function (like ''linear-gradient(red,blue)'').</dd>
-
- <dt><dfn title="compound variable|compound variables">compound variable</dfn></dt>
- <dd>A variable whose value is a space-separated list of <i>CSSFOO</i>s, like ''20px 30px black''.</dd>
-
- <dt><dfn title="list variable|list variables">list variable</dfn></dt>
- <dd>A variable whose value is multiple <i>CSSFOO</i>s separated by spaces or other separators, such as commas or slashes, like ''red, blue, white''.</dd>
- </dl>
-
- <p class='issue'>What term can I use for <dfn>CSSFOO</dfn>? It looks like it corresponds to "term" in the 2.1 grammar.</p>
-
<h2 id='using-variables'>
Using Variables</h2>
<p>A variable can be used anywhere a value is expected in CSS. Variables can not be used as property names, selectors, or anything else besides property values - doing so either produces an invalid value or, in some situations like the attribute value of an attribute selector, a valid value that nonetheless has no relation to the variable of that name.</p>
- <p>A variable is substituted for its value in the property value at computed-value time.</p>
-
- <p><i>Singular variables</i> can be used anywhere as a value. They can be an entire property's value, a component value in a larger property value, an argument to a function, etc.. <i>Compound variables</i> are somewhat more restricted - they can only be used as an entire property value, a whole component of a list-valued property, or a whole function argument. <i>List variables</i> are the most restricted - they can only be used as an entire property value, as one or more whole components of a list-valued property, or as a whole series of function arguments.</p>
-
- <div class='example'>
- <p>Here are some examples of valid and invalid use of a <i>compound variable</i>:</p>
-
- <pre>
-@var $compound 20px 30px;
-div {
- margin: $compound;
- /* Valid, as it's used as a whole property value */
- /* Equivalent to "margin: 20px 30px;" */
-
- text-shadow: $compound blue;
- /* Invalid, as it's not used as a whole property value */
-
- background-position: 10px 10px, $compound, 50px;
- /* Valid, as it's used as a whole component of a list-valued property */
- /* Equivalent to "background-position: 10px 10px, 20px 30px, 50px;" */
-
- background-image: radial-gradient($compound, red, blue);
- /* Valid, as it's used as a whole function argument */
- /* Equivalent to "background-image: radial-gradient(20px 30px, red, blue);" */
-}</pre>
-
- <p>Here are some examples of valid and invalid uses of a <i>list variable</i>:</p>
-
- <pre>
-@var $list 20px, 30px 40px;
-div {
- background-position: $list;
- /* Valid, as it's used as a whole property value */
- /* Equivalent to "background-position: 20px, 30px" */
-
- background-position: 10px $list;
- /* Invalid, as it's not used as a whole property value or component of a list. */
- /* NOT equivalent to "background-position: 10px 20px, 30px 40px;" */
-
- background-position: 10px, $list, 50px;
- /* Valid, as it's used as a whole sequence of components of a list. */
- /* Equivalent to "background-position: 10px, 20px, 30px 40px, 50px;" */
-
- background-image: radial-gradient($list, red, blue);
- /* Valid, as it's used as a whole sequence of function arguments. */
- /* Equivalent to "background-image: radial-gradient(20px, 30px 40px, red, blue);" */
-
- background-image: radial-gradient(10px $list, red, blue);
- /* Invalid, as it's not used as a whole sequence of function arguments */
-}</pre>
- </div>
-
- <p>Using a <i>compound variable</i> or <i>list variable</i> in an invalid way is an <i>invalid variable use</i>.</p>
-
- <p>Similarly, if a property containing a variable in its property value ends up being invalid when the variable's value is substituted in, that is an <i>invalid variable use</i>.</p>
+ <p>A variable is substituted for its value in the property value at computed-value time. If the property value, once all variables are substituted in, is invalid for the property, that is an <i>invalid variable use</i>.</p>
- <div class='example'>
+ <div class='example'>
<p>For example, the following usage is fine from a syntax standpoint, but results in nonsense when the variable is substituted in:</p>
<pre>
@@ -242,9 +170,9 @@
<h3 id='using-invalid-variables'>
Using Invalid Variables</h3>
- <p>An <dfn title="invalid variable|invalid variables">invalid variable</dfn> results from having variables directly or indirectly refer to themselves. Using an <i>invalid variable</i> results in an <i>invalid variable use</i>.</p>
+ <p>An <dfn title="invalid variable|invalid variables">invalid variable</dfn> results from having variables directly or indirectly refer to themselves, or from using an undefined variable. Using an <i>invalid variable</i> results in an <i>invalid variable use</i>.</p>
- <p>An <dfn>invalid variable use</dfn> results from either using an <i>invalid variable</i>, or using a <i>compound variable</i> or <i>list variable</i> in an invalid way. When this happens, the property the variable is used in must compute to the property's initial value.</p>
+ <p>An <dfn>invalid variable use</dfn> results from either using an <i>invalid variable</i> in a property value, or using a valid variable that produces an invalid property value when it is substituted in. When this happens, the property the variable is used in must compute to the property's initial value.</p>
<div class='example'>
<p>For example, in the following code:</p>
@@ -254,10 +182,10 @@
p { background-color: red; }
p { background-color: $invalid; }</pre>
- <p>the <p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red text.</p>
+ <p>the <p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red backgrounds.</p>
</div>
- <p class='note'>The <i>invalid variable use</i> concept exists because variables can't "fail early" like other syntax errors can, so by the time the user agent realizes a variable is invalid, it's already thrown away the other cascaded values.</p>
+ <p class='note'>The <i>invalid variable use</i> concept exists because variables can't "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it's already thrown away the other cascaded values.</p>
<h2 id='cssom'>
APIs</h2>
Received on Wednesday, 28 September 2011 23:03:10 UTC