W3C home > Mailing lists > Public > public-css-commits@w3.org > September 2011

csswg/css-variables Overview.html,1.2,1.3 Overview.src.html,1.2,1.3

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
Message-Id: <E1R939g-0000sO-05@lionel-hutz.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 &lsquo;<code
-    class=css>red</code>&rsquo;), a dimension (like &lsquo;<code
-    class=css>20px</code>&rsquo;), or a function (like &lsquo;<code
-    class=css>linear-gradient(red,blue)</code>&rsquo;).
-
-   <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 &lsquo;<code class=css>20px 30px
-    black</code>&rsquo;.
-
-   <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 &lsquo;<code class=css>red,
-    blue, white</code>&rsquo;.
-  </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 &lt;p> elements will have transparent backgrounds (the initial
     value for &lsquo;<code class=property>background-color</code>&rsquo;),
-    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 &lt;p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red text.</p>
+		<p>the &lt;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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 28 September 2011 23:03:11 GMT