- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 26 Oct 2011 01:16:11 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-variables
In directory hutz:/tmp/cvs-serv27753
Modified Files:
Overview.html Overview.src.html
Log Message:
Start replacing the @var syntax with the data-* syntax.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-variables/Overview.html,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -d -r1.14 -r1.15
--- Overview.html 3 Oct 2011 22:24:29 -0000 1.14
+++ Overview.html 26 Oct 2011 01:16:09 -0000 1.15
@@ -22,13 +22,14 @@
<h1>CSS Variables Module Level 1</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 October 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 October
+ 2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css-variables-20111003/">http://dev.w3.org/csswg/css-variables/</a>
+ href="http://www.w3.org/TR/2011/ED-css-variables-20111026/">http://dev.w3.org/csswg/css-variables/</a>
<!--<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css-variables/">http://www.w3.org/TR/css-variables/</a>-->
@@ -206,18 +207,19 @@
error-prone, since it's scattered throughout the CSS file (and possibly
across multiple files), and may not be amenable to Find-and-Replace.
- <p>This module introduces <b>Variables</b>, which allow a value to be
- assigned to a name, which may then be used in place of the value elsewhere
- in the document. This makes it easier to read large files, as
- seemingly-arbitrary values now have informative names, and makes editting
- such files much easier and less error-prone, as one only has to change the
- value once, at the variable definition site, and the change will propagate
- to all uses of that variable automatically.
+ <p>This module introduces a family of custom user-defined properties known
+ collectively as <b>Variables</b>, which allow an author to assign values
+ to a property with an author-chosen name, and then use those values in
+ other properties elsewhere in the document. This makes it easier to read
+ large files, as seemingly-arbitrary values now have informative names, and
+ makes editting such files much easier and less error-prone, as one only
+ has to change the value once, at the variable definition site, and the
+ change will propagate to all uses of that variable automatically.
<h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
- <p>This module defines a new type of primitive value, the <b>Variable</b>,
- which is accepted by all properties.
+ <p>This module defines a new type of primitive value, the <a
+ href="#variable"><b>Variable</b></a>, which is accepted by all properties.
<h3 id=values><span class=secno>1.2. </span> Values</h3>
@@ -234,39 +236,81 @@
<h2 id=defining-variables><span class=secno>2. </span> Defining Variables</h2>
- <p>A ‘<code class=css>@var</code>’ rule defines a variable and
- assigns a value to it. It consists of the at-keyword ‘<code
- class=css>@var</code>’ followed by a variable name (an identifier
- starting with the "$" character), followed by the value and finally
- terminated with a semi-colon. The result of this rule is that the given
- value is assigned to the given variable name.
+ <p>A <dfn id=variable>variable</dfn> is defined by assigning a value to a
+ property whose name starts with the prefix "data-" (this class of
+ properties will be referred to <a href="#data-property"><i>data
+ properties</i></a>). <em>Any</em> property with the "data-" prefix is
+ defined to be valid but meaningless, and will never be given a specific
+ meaning or effect by a CSS specification or user agent; this is similar to
+ the <code>data-*</code> family of custom attributes in HTML.
- <p>
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
- <p class=note>I chose the $ prefix over the var() function for terseness.
- We should try to avoid nesting functions as much as reasonable, as it's
- hard to read. The $ is required in the variable definition as well as the
- variable use for consistency - every instance of the variable name within
- CSS has the same form.
+ <td><dfn id=data-property
+ title="data property|data properties">data-*</dfn>
+
+ <tr>
+ <th>Values:
+
+ <td>
+ <div class=issue>Figure this out - restricted or wide-open</div>
+
+ <tr>
+ <th>Initial:
+
+ <td>
+ <div class=issue>???</div>
+
+ <tr>
+ <th>Applies To:
+
+ <td>all elements
+
+ <tr>
+ <th>Inherited:
+
+ <td>yes
+
+ <tr>
+ <th>Computed Value:
+
+ <td>specified value
+
+ <tr>
+ <th>Media:
+
+ <td>all
+ </table>
<div class=example>
<p>This variables declaration:</p>
- <pre>@var $header-color #06c;</pre>
+ <pre>
+:root {
+ data-header-color: #06c;
+}</pre>
- <p>declares a variable named "$header-color", and assigns to it the value
- "#06c". This can then be used in any place where that value would be
- valid, such as:
+ <p>declares a <a href="#data-property"><i>data property</i></a> named
+ "data-header-color" on the root element, and assigns to it the value
+ "#06c". This property is then inherited to the elements in the rest of
+ the document, and its value can then be used in any place where it would
+ be valid, such as:
- <pre>h1 { background-color: $header-color; }</pre>
+ <pre>h1 { background-color: data(header-color); }</pre>
<p>The preceding rule is equivalent to writing ‘<code
class=css>background-color: #06c;</code>’, except that the variable
- name makes the origin of the color clearer, and if $header-color is used
- elsewhere in the stylesheet, all of the uses can be updated at once by
- changing the variable declaration.</p>
+ name makes the origin of the color clearer, and if ‘<code
+ class=css>data(header-color)</code>’ is used elsewhere in the
+ stylesheet, all of the uses can be updated at once by changing the
+ variable declaration.</p>
</div>
+ <p class=issue>Finish replacing the rest of this section.
+
<p>Defined variables are available to all stylesheets in the document.
Thus, using ‘<code class=css>@import</code>’ to include a
stylesheet also includes all variables defined in the stylesheet (and
@@ -278,14 +322,6 @@
imported within scoped stylesheets are only available within the scoped
stylesheet and any imported stylesheets.
- <p class=note>Making all variables global is the simplest solution that
- works, and is consistent with other at-rules that define names, like
- @font-face and @counter-style - the web seems to get by great on "ad-hoc
- scoping" via adding short prefixes. If it is shown that we need a more
- complex scoping solution in the future, I believe we can do so via a
- general scoping/namespacing mechanism that applies to all the at-rules
- that define names.
-
<p>A ‘<code class=css>@var</code>’ rule is <dfn
id=inactive-var-rule>inactive</dfn> if it's present in a disabled or
alternate stylesheet, a stylesheet with a media query that evaluates to
@@ -898,6 +934,12 @@
<li>authoring tool, <a href="#authoring-tool"
title="authoring tool"><strong>6.2.</strong></a>
+ <li>data properties, <a href="#data-property"
+ title="data properties"><strong>2.</strong></a>
+
+ <li>data property, <a href="#data-property"
+ title="data property"><strong>2.</strong></a>
+
<li>inactive, <a href="#inactive-var-rule"
title=inactive><strong>2.</strong></a>
@@ -920,6 +962,8 @@
title="style sheet, as conformance class"><strong>6.2.</strong></a>
</ul>
+ <li>variable, <a href="#variable" title=variable><strong>2.</strong></a>
+
<li><a href="#variablerule"><code>VARIABLE_RULE</code></a>, <a
href="#variablerule" title="VARIABLE_RULE"><strong>4.2.1.</strong></a>
</ul>
@@ -946,6 +990,20 @@
<th>Media
<tbody>
+ <tr>
+ <th><span class=property>data-*</span>
+
+ <td>Figure this out - restricted or wide-open
+
+ <td>???
+
+ <td>all elements
+
+ <td>yes
+
+ <td>specified value
+
+ <td>all
</table>
<!--end-properties-->
</html>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-variables/Overview.src.html,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -d -r1.14 -r1.15
--- Overview.src.html 3 Oct 2011 22:24:29 -0000 1.14
+++ Overview.src.html 26 Oct 2011 01:16:09 -0000 1.15
@@ -61,7 +61,7 @@
<p>Large documents or applications (and even small ones) can contain quite a bit of CSS. Many of the values in the CSS file will be duplicate data; for example, a site may establish a color scheme and reuse three or four colors throughout the site. Altering this data can be difficult and error-prone, since it's scattered throughout the CSS file (and possibly across multiple files), and may not be amenable to Find-and-Replace.</p>
- <p>This module introduces <b>Variables</b>, which allow a value to be assigned to a name, which may then be used in place of the value elsewhere in the document. This makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editting such files much easier and less error-prone, as one only has to change the value once, at the variable definition site, and the change will propagate to all uses of that variable automatically.</p>
+ <p>This module introduces a family of custom user-defined properties known collectively as <b>Variables</b>, which allow an author to assign values to a property with an author-chosen name, and then use those values in other properties elsewhere in the document. This makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editting such files much easier and less error-prone, as one only has to change the value once, at the variable definition site, and the change will propagate to all uses of that variable automatically.</p>
<h3 id="placement">
Module Interactions</h3>
@@ -82,25 +82,50 @@
<h2 id="defining-variables">
Defining Variables</h2>
- <p>A ''@var'' rule defines a variable and assigns a value to it. It consists of the at-keyword ''@var'' followed by a variable name (an identifier starting with the "$" character), followed by the value and finally terminated with a semi-colon. The result of this rule is that the given value is assigned to the given variable name.<p>
+ <p>A <dfn>variable</dfn> is defined by assigning a value to a property whose name starts with the prefix "data-" (this class of properties will be referred to <i>data properties</i>). <em>Any</em> property with the "data-" prefix is defined to be valid but meaningless, and will never be given a specific meaning or effect by a CSS specification or user agent; this is similar to the <code>data-*</code> family of custom attributes in HTML.</p>
- <p class='note'>I chose the $ prefix over the var() function for terseness. We should try to avoid nesting functions as much as reasonable, as it's hard to read. The $ is required in the variable definition as well as the variable use for consistency - every instance of the variable name within CSS has the same form.</p>
+ <table class='propdef'>
+ <tr>
+ <th>Name:</th>
+ <td><dfn id='data-property' title='data property|data properties'>data-*</dfn>
+ <tr>
+ <th>Values:
+ <td><div class='issue'>Figure this out - restricted or wide-open</div>
+ <tr>
+ <th>Initial:
+ <td><div class='issue'>???</div>
+ <tr>
+ <th>Applies To:
+ <td>all elements
+ <tr>
+ <th>Inherited:
+ <td>yes
+ <tr>
+ <th>Computed Value:
+ <td>specified value
+ <tr>
+ <th>Media:
+ <td>all
+ </table>
<div class=example>
<p>This variables declaration:</p>
- <pre>@var $header-color #06c;</pre>
+ <pre>
+:root {
+ data-header-color: #06c;
+}</pre>
- <p>declares a variable named "$header-color", and assigns to it the value "#06c". This can then be used in any place where that value would be valid, such as:
+ <p>declares a <i>data property</i> named "data-header-color" on the root element, and assigns to it the value "#06c". This property is then inherited to the elements in the rest of the document, and its value can then be used in any place where it would be valid, such as:
- <pre>h1 { background-color: $header-color; }</pre>
+ <pre>h1 { background-color: data(header-color); }</pre>
- <p>The preceding rule is equivalent to writing ''background-color: #06c;'', except that the variable name makes the origin of the color clearer, and if $header-color is used elsewhere in the stylesheet, all of the uses can be updated at once by changing the variable declaration.</p>
+ <p>The preceding rule is equivalent to writing ''background-color: #06c;'', except that the variable name makes the origin of the color clearer, and if ''data(header-color)'' is used elsewhere in the stylesheet, all of the uses can be updated at once by changing the variable declaration.</p>
</div>
- <p>Defined variables are available to all stylesheets in the document. Thus, using ''@import'' to include a stylesheet also includes all variables defined in the stylesheet (and makes all variables declared outside available within the stylesheet, if applicable). ''@var'' rules present in disabled or alternate stylesheets do not define variables. Scoped stylesheets are an exception to this: variables defined in the global scope are available within a scoped stylesheet, but variables defined or imported within scoped stylesheets are only available within the scoped stylesheet and any imported stylesheets.</p>
+ <p class='issue'>Finish replacing the rest of this section.</p>
- <p class='note'>Making all variables global is the simplest solution that works, and is consistent with other at-rules that define names, like @font-face and @counter-style - the web seems to get by great on "ad-hoc scoping" via adding short prefixes. If it is shown that we need a more complex scoping solution in the future, I believe we can do so via a general scoping/namespacing mechanism that applies to all the at-rules that define names.</p>
+ <p>Defined variables are available to all stylesheets in the document. Thus, using ''@import'' to include a stylesheet also includes all variables defined in the stylesheet (and makes all variables declared outside available within the stylesheet, if applicable). ''@var'' rules present in disabled or alternate stylesheets do not define variables. Scoped stylesheets are an exception to this: variables defined in the global scope are available within a scoped stylesheet, but variables defined or imported within scoped stylesheets are only available within the scoped stylesheet and any imported stylesheets.</p>
<p>A ''@var'' rule is <dfn id='inactive-var-rule'>inactive</dfn> if it's present in a disabled or alternate stylesheet, a stylesheet with a media query that evaluates to false, or is present within a conditional rule group [[CSS3CONDITIONAL]] whose condition evaluates to false. <i>Inactive</i> ''@var'' rules do not define variables. All other ''@var'' rules are <dfn id='active-var-rule'>active</dfn>.</p>
Received on Wednesday, 26 October 2011 01:16:13 UTC