|
56 | 56 | </p> |
57 | 57 | <h1 class="p-name no-ref" id=title>CSS Custom Properties for Cascading Variables Module Level 1</h1> |
58 | 58 | <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> |
60 | 60 | <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> |
61 | 61 | <dt>Feedback:</dt> |
62 | 62 | <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-variables%5D%20feedback">www-style@w3.org</a> |
63 | 63 | with subject line |
64 | 64 | “<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: |
65 | 65 | <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> |
66 | 66 | <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. |
68 | 68 | </p> |
69 | 69 | <hr title="Separator for header"> |
70 | 70 | </div> |
@@ -107,36 +107,45 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=c |
107 | 107 | <div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period: |
108 | 108 | <ul><li>the <a class=idl-code data-link-type=interface href=#dom-cssvariablesmap title=cssvariablesmap>CSSVariablesMap</a> interface</ul></div> |
109 | 109 |
|
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> |
140 | 149 |
|
141 | 150 |
|
142 | 151 |
|
@@ -193,7 +202,7 @@ <h2 class="heading settled heading" data-level=2 id=defining-variables><span cla |
193 | 202 | <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>, |
194 | 203 | which are used to define <a data-link-type=dfn href=#variable title=variables>variables</a>. |
195 | 204 |
|
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>"><any-value></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>"><any-value></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> |
197 | 206 | <p class=issue id=issue-0a68576f><a class=self-link href=#issue-0a68576f></a> |
198 | 207 | Should variables have special animation behavior, |
199 | 208 | such that they just never animate, |
@@ -470,7 +479,7 @@ <h2 class="heading settled heading" data-level=3 id=using-variables><span class= |
470 | 479 | 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. |
471 | 480 | The syntax of <a class=css data-link-type=maybe href=#funcdef-var title=var()>var()</a> is: |
472 | 481 |
|
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>"><ident></a> [, <a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>"><any-value></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>"><custom-ident></a> [, <a class="production css-code" data-link-type=type href=#typedef-any-value title="<any-value>"><any-value></a> ]? ) |
474 | 483 | </pre> |
475 | 484 | <p> A variable can be used in place of any part of a value in any property on an element. |
476 | 485 | Variables can not be used as |
@@ -649,9 +658,9 @@ <h3 class="heading settled heading" data-level=3.1 id=invalid-variables><span cl |
649 | 658 | <h3 class="heading settled heading" data-level=3.2 id=variables-in-shorthands><span class=secno>3.2 </span><span class=content> |
650 | 659 | Variables in Shorthand Properties</span><a class=self-link href=#variables-in-shorthands></a></h3> |
651 | 660 |
|
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. |
653 | 662 |
|
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, |
655 | 664 | 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>, |
656 | 665 | with the shorthand more-or-less discarded. |
657 | 666 | 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 |
697 | 706 | <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> |
698 | 707 | for the <code>CSSVariablesMap</code> assigned to its <code>var</code> attribute. |
699 | 708 |
|
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. |
701 | 710 |
|
702 | 711 | <p class=note> Note: Custom properties do not appear on a CSSStyleDeclaration object in camel-cased form, |
703 | 712 | because their names may have both upper and lower case letters |
|
0 commit comments