You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-variables/Overview.src.html
+35-10Lines changed: 35 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -61,7 +61,7 @@ <h2 id="intro">
61
61
62
62
<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>
63
63
64
-
<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>
64
+
<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>
65
65
66
66
<h3id="placement">
67
67
Module Interactions</h3>
@@ -82,25 +82,50 @@ <h3 id="values">
82
82
<h2id="defining-variables">
83
83
Defining Variables</h2>
84
84
85
-
<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>
86
-
87
-
<pclass='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>
85
+
<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>
<td><divclass='issue'>Figure this out - restricted or wide-open</div>
94
+
<tr>
95
+
<th>Initial:
96
+
<td><divclass='issue'>???</div>
97
+
<tr>
98
+
<th>Applies To:
99
+
<td>all elements
100
+
<tr>
101
+
<th>Inherited:
102
+
<td>yes
103
+
<tr>
104
+
<th>Computed Value:
105
+
<td>specified value
106
+
<tr>
107
+
<th>Media:
108
+
<td>all
109
+
</table>
88
110
89
111
<divclass=example>
90
112
<p>This variables declaration:</p>
91
113
92
-
<pre>@var $header-color #06c;</pre>
114
+
<pre>
115
+
:root {
116
+
data-header-color: #06c;
117
+
}</pre>
93
118
94
-
<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:
119
+
<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:
<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>
123
+
<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>
99
124
</div>
100
125
101
-
<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>
126
+
<pclass='issue'>Finish replacing the rest of this section.</p>
102
127
103
-
<pclass='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>
128
+
<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>
104
129
105
130
<p>A ''@var'' rule is <dfnid='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 <dfnid='active-var-rule'>active</dfn>.</p>
0 commit comments