8000 First attempt at defining the syntax of a data property. · w3c/csswg-drafts@596cdc0 · GitHub
Skip to content

Commit 596cdc0

Browse files
tabatkinstabatkins
committed
First attempt at defining the syntax of a data property.
1 parent 01cd7d6 commit 596cdc0

2 files changed

Lines changed: 55 additions & 16 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@
2222

2323
<h1>CSS Variables Module Level 1</h1>
2424

25-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 November
25+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 November
2626
2011</h2>
2727

2828
<dl>
2929
<dt>This version:
3030

3131
<dd><a
32-
href="http://www.w3.org/TR/2011/ED-css-variables-20111108/">http://dev.w3.org/csswg/css-variables/</a>
32+
href="http://www.w3.org/TR/2011/ED-css-variables-20111110/">http://dev.w3.org/csswg/css-variables/</a>
3333
<!--<dt>Latest version:
3434
<dd><a href="http://www.w3.org/TR/css-variables/">http://www.w3.org/TR/css-variables/</a>-->
3535

@@ -242,8 +242,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
242242
<tr>
243243
<th>Values:
244244

245-
<td>
246-
<div class=issue>Figure this out - restricted or wide-open</div>
245+
<td>see prose
247246

248247
<tr>
249248
<th>Initial:
@@ -273,16 +272,47 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
273272
</table>
274273

275274
<p><em>Any</em> property name starting with the prefix "data-" is a <a
276-
href="#data-property"><i>data property</i></a>. <span class=issue>Spec
277-
what values a data property can have.</span> Data properties are defined
278-
to be valid but meaningless as they are meant solely for allowing authors
279-
to pass custom data around their page, similar to the <a
275+
href="#data-property"><i>data property</i></a>. Data properties are
276+
defined to be valid but meaningless as they are meant solely for allowing
277+
authors to pass custom data around their page, similar to the <a
280278
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom
281279
data attributes</a> in HTML. Other specifications and user agents must not
282280
assign a particular meaning to data properties or attach a specific effect
283281
to them beyond the bare minimum that comes from them being valid
284282
properties.
285283

284+
<p>The valid possible values of a data property are almost completely
285+
unrestricted. A data property can contain anything that is valid according
286+
to the <code>value</code> production in the <a
287+
href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS Core
288+
Grammar</a>. The values do not have to correspond to any existing CSS
289+
values, as they are not evaluated except to replace variables occuring
290+
within them until they are actually referenced in a normal property with a
291+
variable.
292+
293+
<p>This specification reserves the use of all function tokens starting with
294+
the prefix "data" within data properties. Authors must not use any such
295+
functions except as defined in this specification or future updates. If a
296+
data property contains such a function, it must match the grammar defined
297+
in this specification or future updates; the use of such a function that
298+
does not follow the grammar, or that utilizes such a function that is not
299+
yet defined, makes the data property invalid and it must be ignored.
300+
301+
<div class=example>
302+
<p>For example, even though this spec doesn't define a &lsquo;<code
303+
class=css>data-inherit()</code>&rsquo; function, that name is reserved by
304+
default and cannot be used. Similarly, the &lsquo;<code
305+
class=css>data()</code>&rsquo; function <em>is</em> defined by this spec,
306+
so any use of it must match the definition in the spec. The following
307+
property declarations are thus invalid:</p>
308+
309+
<pre>
310+
:root {
311+
data-foo: data-inherit(bar); /* Use of reserved, but undefined, function. */
312+
data-foo: data(bar, baz, qux); /* Invalid use of data() function. */
313+
}</pre>
314+
</div>
315+
286316
<p>For each <a href="#data-property"><i>data property</i></a>, there is an
287317
associated variable with the same name save for the "data-" prefix. For
288318
example, a data property named "data-foo" is associated with the variable
@@ -468,9 +498,6 @@ <h2 id=using-variables><span class=secno>3. </span> Using Variables: the
468498
function is replaced by the value of the referenced <a
469499
href="#data-property"><i>data property</i></a>.
470500

471-
<p class=issue>What about variable variables? Should &lsquo;<code
472-
class=css>data(data(foo))</code>&rsquo; be valid? (Probably not.)
473-
474501
<p>A variable can be used anywhere a value is expected in CSS. Variables
475502
can not be used as property names, selectors, or anything else besides
476503
property values - doing so either produces an invalid value or, in some
@@ -895,7 +922,7 @@ <h2 class=no-num id=property-index>Property index</h2>
895922
<tr>
896923
<th><span class=property>data-*</span>
897924

898-
<td>Figure this out - restricted or wide-open
925+
<td>see prose
899926

900927
<td>invalid (a keyword, but see prose)
901928

‎css-variables/Overview.src.html‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ <h2 id="defining-variables">
9393
<td><dfn id='data-property' title='data property|data properties'>data-*</dfn>
9494
<tr>
9595
<th>Values:
96-
<td><div class='issue'>Figure this out - restricted or wide-open</div>
96+
<td>see prose
9797
<tr>
9898
<th>Initial:
9999
<td>invalid (a keyword, but see prose)
@@ -111,7 +111,21 @@ <h2 id="defining-variables">
111111
<td>all
112112
</table>
113113

114-
<p><em>Any</em> property name starting with the prefix "data-" is a <i>data property</i>. <span class='issue'>Spec what values a data property can have.</span> Data properties are defined to be valid but meaningless as they are meant solely for allowing authors to pass custom data around their page, similar to the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom data attributes</a> in HTML. Other specifications and user agents must not assign a particular meaning to data properties or attach a specific effect to them beyond the bare minimum that comes from them being valid properties.</p>
114+
<p><em>Any</em> property name starting with the prefix "data-" is a <i>data property</i>. Data properties are defined to be valid but meaningless as they are meant solely for allowing authors to pass custom data around their page, similar to the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom data attributes</a> in HTML. Other specifications and user agents must not assign a particular meaning to data properties or attach a specific effect to them beyond the bare minimum that comes from them being valid properties.</p>
115+
116+
<p>The valid possible values of a data property are almost completely unrestricted. A data property can contain anything that is valid according to the <code>value</code> production in the <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS Core Grammar</a>. The values do not have to correspond to any existing CSS values, as they are not evaluated except to replace variables occuring within them until they are actually referenced in a normal property with a variable.</p>
117+
118+
<p>This specification reserves the use of all function tokens starting with the prefix "data" within data properties. Authors must not use any such functions except as defined in this specification or future updates. If a data property contains such a function, it must match the grammar defined in this specification or future updates; the use of such a function that does not follow the grammar, or that utilizes such a function that is not yet defined, makes the data property invalid and it must be ignored.</p>
119+
120+
<div class='example'>
121+
<p>For example, even though this spec doesn't define a ''data-inherit()'' function, that name is reserved by default and cannot be used. Similarly, the ''data()'' function <em>is</em> defined by this spec, so any use of it must match the definition in the spec. The following property declarations are thus invalid:</p>
122+
123+
<pre>
124+
:root {
125+
data-foo: data-inherit(bar); /* Use of reserved, but undefined, function. */
126+
data-foo: data(bar, baz, qux); /* Invalid use of data() function. */
127+
}</pre>
128+
</div>
115129

116130
<p>For each <i>data property</i>, there is an associated variable with the same name save for the "data-" prefix. For example, a data property named "data-foo" is associated with the variable named "foo". See the next chapter for details on how to use variables.</p>
117131

@@ -216,8 +230,6 @@ <h2 id='using-variables'>
216230

217231
<p>The ''data()'' function references the <i>data property</i> with the name obtained by prepending "data-" to the function's argument. <span class='note'>Note that all possible <i>data properties</i> exist; if one with the given name has not yet been defined in the document, it simply takes its initial value.</span> When a property resolves its computed value, a ''data()'' function is replaced by the value of the referenced <i>data property</i>.</p>
218232

219-
<p class='issue'>What about variable variables? Should ''data(data(foo))'' be valid? (Probably not.)</p>
220-
221233
<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>
222234

223235
<p>A variable is substituted for its value in the property value at computed-value time. If a declaration, once all variables are substituted in, is invalid, the declaration is <i>invalid at computed-value time</i>.</p>

0 commit comments

Comments
 (0)