Skip to content

Commit 070beea

Browse files
committed
[css-variables] Use <custom-ident>.
--HG-- extra : rebase_source : 1a080cc76360405b9124f70ea729b2f19823b461
1 parent 543bcf7 commit 070beea

2 files changed

Lines changed: 47 additions & 38 deletions

File tree

css-variables/Overview.bs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ Using Cascading Variables: the ''var()'' notation</h2>
395395
The syntax of ''var()'' is:
396396

397397
<pre class='prod'>
398-
<dfn>var()</dfn> = var( <<ident>> [, <<any-value>> ]? )
398+
<dfn>var()</dfn> = var( <<custom-ident>> [, <<any-value>> ]? )
399399
</pre>
400400

401401
A variable can be used in place of any part of a value in any property on an element.

css-variables/Overview.html

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@
5656
</p>
5757
<h1 class="p-name no-ref" id=title>CSS Custom Properties for Cascading Variables Module Level 1</h1>
5858
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
59-
<span class=dt-updated><span class=value-title title=20140205>5 February 2014</span></span></span></h2>
59+
<span class=dt-updated><span class=value-title title=20140307>7 March 2014</span></span></span></h2>
6060
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-variables/>http://dev.w3.org/csswg/css-variables/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-variables-1/>http://www.w3.org/TR/css-variables-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-variables/>http://dev.w3.org/csswg/css-variables/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css-variables-20130312/ rel=previous>http://www.w3.org/TR/2013/WD-css-variables-20130312/</a><dd><a href=http://www.w3.org/TR/2012/WD-css-variables-20120410/ rel=previous>http://www.w3.org/TR/2012/WD-css-variables-20120410/</a>
6161
<dt>Feedback:</dt>
6262
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-variables%5D%20feedback">www-style@w3.org</a>
6363
with subject line
6464
<kbd>[css-variables] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
6565
<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)</dl></div>
6666
<div data-fill-with=warning></div>
67-
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
67+
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
6868
</p>
6969
<hr title="Separator for header">
7070
</div>
@@ -107,36 +107,45 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=c
107107
<div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period:
108108
<ul><li>the <a class=idl-code data-link-type=interface href=#dom-cssvariablesmap title=cssvariablesmap>CSSVariablesMap</a> interface</ul></div>
109109

110-
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
111-
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>
112-
Introduction</a><ul class=toc><li><a href=#module-interactions><span class=secno>1.1</span>
113-
Module Interactions</a><li><a href=#module-values><span class=secno>1.2</span>
114-
Values</a></ul><li><a href=#defining-variables><span class=secno>2</span>
115-
Defining Custom Properties: the <span class=property data-link-type=propdesc title=var-*>var-*</span> family of properties</a><ul class=toc><li><a href=#syntax><span class=secno>2.1</span>
116-
Custom Property Value Syntax</a><li><a href=#using><span class=secno>2.2</span>
117-
Using Custom Properties</a><li><a href=#cycles><span class=secno>2.3</span>
118-
Resolving Dependency Cycles</a></ul><li><a href=#using-variables><span class=secno>3</span>
119-
Using Cascading Variables: the <span class=css data-link-type=maybe title=var()>var()</span> notation</a><ul class=toc><li><a href=#invalid-variables><span class=secno>3.1</span>
120-
Invalid Variables</a><li><a href=#variables-in-shorthands><span class=secno>3.2</span>
121-
Variables in Shorthand Properties</a></ul><li><a href=#cssom><span class=secno>4</span>
122-
APIs</a><ul class=toc><li><a href=#the-cssstyledeclaration-interface><span class=secno>4.1</span>
123-
Extensions to the <code>CSSStyleDeclaration</code> Interface</a><ul class=toc><li><a href=#serializing-custom-props><span class=secno>4.1.1</span>
124-
Serializing Custom Properties</a></ul><li><a href=#the-CSSVariablesMap-interface><span class=secno>4.2</span>
125-
The <code>CSSVariablesMap</code> Interface</a><ul class=toc><li><a href=#cssvariablesmap-methods><span class=secno>4.2.1</span>
126-
<code>CSSVariablesMap Methods</code></a></ul></ul><li><a href=#changes><span class=secno>5</span>
127-
Changes from 10 April 2012 Working Draft</a><li><a href=#acks><span class=secno>6</span>
128-
Acknowledgments</a><li><a href=#conformance><span class=secno></span>
129-
Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span>
130-
Document conventions</a><li><a href=#conformance-classes><span class=secno></span>
131-
Conformance classes</a><li><a href=#partial><span class=secno></span>
132-
Partial implementations</a><li><a href=#experimental><span class=secno></span>
133-
Experimental implementations</a><li><a href=#testing><span class=secno></span>
134-
Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span>
135-
References</a><ul class=toc><li><a href=#normative><span class=secno></span>
136-
Normative References</a><li><a href=#informative><span class=secno></span>
137-
Informative References</a></ul><li><a href=#index><span class=secno></span>
138-
Index</a><li><a href=#property-index><span class=secno></span>
139-
Property index</a><li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
110+
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2>
111+
<div data-fill-with=table-of-contents><ul class=toc>
112+
<li><a href=#intro><span class=secno>1</span> Introduction</a>
113+
<ul class=toc>
114+
<li><a href=#module-interactions><span class=secno>1.1</span> Module Interactions</a>
115+
<li><a href=#module-values><span class=secno>1.2</span> Values</a></ul>
116+
<li><a href=#defining-variables><span class=secno>2</span> Defining Custom Properties: the <span class=property data-link-type=propdesc title=var-*>var-*</span> family of properties</a>
117+
<ul class=toc>
118+
<li><a href=#syntax><span class=secno>2.1</span> Custom Property Value Syntax</a>
119+
<li><a href=#using><span class=secno>2.2</span> Using Custom Properties</a>
120+
<li><a href=#cycles><span class=secno>2.3</span> Resolving Dependency Cycles</a></ul>
121+
<li><a href=#using-variables><span class=secno>3</span> Using Cascading Variables: the <span class=css data-link-type=maybe title=var()>var()</span> notation</a>
122+
<ul class=toc>
123+
<li><a href=#invalid-variables><span class=secno>3.1</span> Invalid Variables</a>
124+
<li><a href=#variables-in-shorthands><span class=secno>3.2</span> Variables in Shorthand Properties</a></ul>
125+
<li><a href=#cssom><span class=secno>4</span> APIs</a>
126+
<ul class=toc>
127+
<li><a href=#the-cssstyledeclaration-interface><span class=secno>4.1</span> Extensions to the <code>CSSStyleDeclaration</code> Interface</a>
128+
<ul class=toc>
129+
<li><a href=#serializing-custom-props><span class=secno>4.1.1</span> Serializing Custom Properties</a></ul>
130+
<li><a href=#the-CSSVariablesMap-interface><span class=secno>4.2</span> The <code>CSSVariablesMap</code> Interface</a>
131+
<ul class=toc>
132+
<li><a href=#cssvariablesmap-methods><span class=secno>4.2.1</span> <code>CSSVariablesMap Methods</code></a></ul></ul>
133+
<li><a href=#changes><span class=secno>5</span> Changes from 10 April 2012 Working Draft</a>
134+
<li><a href=#acks><span class=secno>6</span> Acknowledgments</a>
135+
<li><a href=#conformance><span class=secno></span> Conformance</a>
136+
<ul class=toc>
137+
<li><a href=#conventions><span class=secno></span> Document conventions</a>
138+
<li><a href=#conformance-classes><span class=secno></span> Conformance classes</a>
139+
<li><a href=#partial><span class=secno></span> Partial implementations</a>
140+
<li><a href=#experimental><span class=secno></span> Experimental implementations</a>
141+
<li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul>
142+
<li><a href=#references><span class=secno></span> References</a>
143+
<ul class=toc>
144+
<li><a href=#normative><span class=secno></span> Normative References</a>
145+
<li><a href=#informative><span class=secno></span> Informative References</a></ul>
146+
<li><a href=#index><span class=secno></span> Index</a>
147+
<li><a href=#property-index><span class=secno></span> Property index</a>
148+
<li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
140149

141150

142151

@@ -193,7 +202,7 @@ <h2 class="heading settled heading" data-level=2 id=defining-variables><span cla
193202
<p> This specification defines an open-ended set of properties called <a data-link-type=dfn href=#custom-property title="custom properties">custom properties</a>,
194203
which are used to define <a data-link-type=dfn href=#variable title=variables>variables</a>.
195204

196-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-var->var-*<a class=self-link href=#propdef-var-></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>">&lt;any-value&gt;</a><tr><th>Initial:<td>(nothing, see prose)<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value with variables substituted (but see prose for "invalid variables")<tr><th>Animatable:<td>no</table>
205+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-var->var-*<a class=self-link href=#propdef-var-></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>">&lt;any-value&gt;</a><tr><th>Initial:<td>(nothing, see prose)<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value with variables substituted (but see prose for "invalid variables")<tr><th>Animatable:<td>no</table>
197206
<p class=issue id=issue-0a68576f><a class=self-link href=#issue-0a68576f></a>
198207
Should variables have special animation behavior,
199208
such that they just never animate,
@@ -470,7 +479,7 @@ <h2 class="heading settled heading" data-level=3 id=using-variables><span class=
470479
which can then be substituted into another property with the <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> function.
471480
The syntax of <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> is:
472481

473-
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-var>var()<a class=self-link href=#funcdef-var></a></dfn> = var( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#ltident title="<ident>">&lt;ident&gt;</a> [, <a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>">&lt;any-value&gt;</a> ]? )
482+
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-var>var()<a class=self-link href=#funcdef-var></a></dfn> = var( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> [, <a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>">&lt;any-value&gt;</a> ]? )
474483
</pre>
475484
<p> A variable can be used in place of any part of a value in any property on an element.
476485
Variables can not be used as
@@ -649,9 +658,9 @@ <h3 class="heading settled heading" data-level=3.1 id=invalid-variables><span cl
649658
<h3 class="heading settled heading" data-level=3.2 id=variables-in-shorthands><span class=secno>3.2 </span><span class=content>
650659
Variables in Shorthand Properties</span><a class=self-link href=#variables-in-shorthands></a></h3>
651660

652-
<p> The use of <a data-link-type=dfn href=#variable title=variables>variables</a> in <a data-link-type=dfn href=http://dev.w3.org/csswg/css-cascade-3/#shorthand-property--shorthand title="shorthand properties">shorthand properties</a> presents some unique difficulties.
661+
<p> The use of <a data-link-type=dfn href=#variable title=variables>variables</a> in <a data-link-type=dfn href=http://dev.w3.org/csswg/css-cascade-3/#shorthand-property- title="shorthand properties">shorthand properties</a> presents some unique difficulties.
653662

654-
<p> Ordinarily, the value of a shorthand property is separated out into its component <a data-link-type=dfn href=http://dev.w3.org/csswg/css-cascade-3/#longhand--longhand-property--sub-property title="longhand properties">longhand properties</a> at parse time,
663+
<p> Ordinarily, the value of a shorthand property is separated out into its component <a data-link-type=dfn href=http://dev.w3.org/csswg/css-cascade-3/#longhand- title="longhand properties">longhand properties</a> at parse time,
655664
and then the longhands themselves participate in the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-cascade-3/#cascade title=cascade>cascade</a>,
656665
with the shorthand more-or-less discarded.
657666
If a <a data-link-type=dfn href=#variable title=variable>variable</a> is used in a shorthand, however,
@@ -697,7 +706,7 @@ <h3 class="heading settled heading" data-level=4.1 id=the-cssstyledeclaration-in
697706
<p> A <code>CSSStyleDeclaration</code> is the <dfn data-dfn-type=dfn data-noexport="" id=associated-style-declaration>associated style declaration<a class=self-link href=#associated-style-declaration></a></dfn>
698707
for the <code>CSSVariablesMap</code> assigned to its <code>var</code> attribute.
699708

700-
<p> All <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> <a data-link-type=dfn title=declarations>declarations</a> have the <a data-link-type=dfn title=case-insensitive>case-insensitive</a> flag set.
709+
<p> All <a data-link-type=dfn href=#custom-property title="custom property">custom property</a> <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#declaration title=declarations>declarations</a> have the <a data-link-type=dfn title=case-insensitive>case-insensitive</a> flag set.
701710

702711
<p class=note> Note: Custom properties do not appear on a CSSStyleDeclaration object in camel-cased form,
703712
because their names may have both upper and lower case letters

0 commit comments

Comments
 (0)