changeset
[css-values] Rewrite url() to recognize that it's now an ordinary function most of the time.
Thu, 18 Sep 2014 13:25:17 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Thu, 18 Sep 2014 13:25:17 -0700
- changeset 14541
- 8c03d09fbf5f
- parent 14540
- 6f00ba0f95ab
- child 14542
- dea25bf8160f
[css-values] Rewrite url() to recognize that it's now an ordinary function most of the time.
| css-values/Overview.bs | file | annotate | diff | comparison | revisions | |
| css-values/Overview.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-values/Overview.bs Thu Sep 18 14:18:50 2014 +0200 1.2 +++ b/css-values/Overview.bs Thu Sep 18 13:25:17 2014 -0700 1.3 @@ -138,7 +138,7 @@ 1.4 If commas were not implicitly omittable, 1.5 the grammar would have to be much more complicated 1.6 to properly express the ways that the arguments can be omitted, 1.7 - greatly obscuring the simplicity of the feature. 1.8 + greatly obscURLng the simplicity of the feature. 1.9 </div> 1.10 1.11 All CSS properties also accept the <a href="#common-keywords">CSS-wide keyword values</a> 1.12 @@ -450,41 +450,52 @@ 1.13 Resource Locators: the <<url>> type</h3> 1.14 1.15 A <dfn>URL</dfn> is a pointer to a resource 1.16 - and is a <a title="consume a url token" spec=css-syntax>specially-parsed</a> <a href="#functional-notation">functional notation</a> 1.17 - denoted by <dfn id="url-value"><url></dfn>. 1.18 - It corresponds to the <<url-token>> production 1.19 - in the <a href="http://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]]. 1.20 + and is a <a href="#functional-notation">functional notation</a> 1.21 + denoted by <<url>>. 1.22 + The syntax of a <<url>> is: 1.23 + 1.24 + <pre class="prod"><dfn id="url-value"><url></dfn> = url( <<string>> <<url-modifier>>* )</pre> 1.25 + 1.26 1.27 <div class="example"> 1.28 Below is an example of a URL being used as a background image: 1.29 1.30 <pre>body { background: url("http://www.example.com/pinkish.gif") }</pre> 1.31 - 1.32 - The same example can be written without quotes: 1.33 - 1.34 - <pre>body { background: url(http://www.example.com/pinkish.gif) }</pre> 1.35 </div> 1.36 1.37 - Note: Note that in some CSS syntactic contexts (as defined by that context), 1.38 - a URL can be represented as a <<string>> rather than by <<url>>. 1.39 - An example of this is the ''@import'' rule. 1.40 + In addition to the syntax defined above, 1.41 + a <<url>> can sometimes be written in other ways: 1.42 1.43 - Parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL 1.44 - must be escaped with a backslash 1.45 - so that the resulting value is a valid <<url-token>>, 1.46 + * For legacy reasons, 1.47 + a <<url>> can be written without quotation marks around the URL itself. 1.48 + This syntax is <a title="consume a url token" spec=css-syntax>specially-parsed</a>, 1.49 + and produces a <<url-token>> rather than a <a>function</a> syntactically. [[!CSS3SYN]] 1.50 + * Some CSS contexts, such as ''@import'', allow a <<url>> to be represented by a <<string>> instead. 1.51 + This behaves identically to writing a ''url()'' function containing that string. 1.52 + 1.53 + Because these alternate ways of writing a <<url>> are not <a>functional notations</a>, 1.54 + they cannot accept any <<url-modifier>>s. 1.55 + 1.56 + Note: The special parsing rules for the legacy quotation mark-less <<url>> syntax 1.57 + means that parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL 1.58 + must be escaped with a backslash, 1.59 e.g. ''url(open\(parens)'', ''url(close\)parens)''. 1.60 Depending on the type of URL, 1.61 - it might also be possible to write these characters as URI-escapes 1.62 + it might also be possible to write these characters as URL-escapes 1.63 (e.g. ''url(open%28parens)'' or ''url(close%29parens)'') 1.64 - as described in [[URI]]. 1.65 - Alternatively a URL containing such characters may be represented as a quoted <a>string</a> within the ''url()'' notation. 1.66 + as described in [[URL]]. 1.67 + (If written as a normal function containing a string, ordinary string escaping rules apply; 1.68 + only newlines and the character used to quote the string need to be escaped.) 1.69 + 1.70 +<h4 id="relative-urls"> 1.71 +Relative URLs</h4> 1.72 1.73 In order to create modular style sheets that are not dependent on 1.74 - the absolute location of a resource, authors should use relative URIs. 1.75 - Relative URIs (as defined in [[!URI]]) are resolved to full URIs 1.76 - using a base URI. RFC 3986, section 3, defines the normative 1.77 + the absolute location of a resource, authors should use relative URLs. 1.78 + Relative URLs (as defined in [[!URL]]) are resolved to full URLs 1.79 + using a base URL. RFC 3986, section 3, defines the normative 1.80 algorithm for this process. 1.81 - For CSS style sheets, the base URI is that of the style sheet itself, 1.82 + For CSS style sheets, the base URL is that of the style sheet itself, 1.83 not that of the styled source document. 1.84 Style sheets embedded within a document have 1.85 the base URL associated with their container. 1.86 @@ -492,7 +503,7 @@ 1.87 When a <<url>> appears in the computed value of a property, 1.88 it is resolved to an absolute URL, 1.89 as described in the preceding paragraph. 1.90 - The computed value of a URI that the UA cannot resolve to an absolute URI is the specified value. 1.91 + The computed value of a URL that the UA cannot resolve to an absolute URL is the specified value. 1.92 1.93 <div class="example"> 1.94 For example, suppose the following rule: 1.95 @@ -511,6 +522,17 @@ 1.96 The same image will be used regardless of the URL of the source document containing the <code><body></code>. 1.97 </div> 1.98 1.99 +<h4 id='url-modifiers'> 1.100 +URL Modifiers</h4> 1.101 + 1.102 + The ''url()'' function supports specifying additional <dfn><url-modifier></dfn>s, 1.103 + which change the meaning or the interpretation of the URL somehow. 1.104 + A <<url-modifier>> is either an <<ident>> or a <a>function</a>. 1.105 + 1.106 + This specification does not define any <<url-modifier>>s, 1.107 + but other specs may do so. 1.108 + 1.109 + 1.110 <h2 id="numeric-types"> 1.111 Numeric Data Types</h2> 1.112 1.113 @@ -681,7 +703,7 @@ 1.114 The x-height of a font can be found in different ways. Some fonts 1.115 contain reliable metrics for the x-height. If reliable font metrics 1.116 are not available, UAs may determine the x-height from the height 1.117 - of a lowercase glyph. One possible heuristic is to look at how far 1.118 + of a lowercase glyph. One possible heURLstic is to look at how far 1.119 the glyph for the lowercase "o" extends below the baseline, and 1.120 subtract that value from the top of its bounding box. In the cases 1.121 where it is impossible or impractical to determine the x-height, 1.122 @@ -993,22 +1015,22 @@ 1.123 <h2 id="functional-notation"> 1.124 Functional Notations</h2> 1.125 1.126 - A <dfn>functional notation</dfn> is a type of component value 1.127 - that can represent more complex types or invoke special processing. 1.128 - The syntax starts with the name of the function 1.129 - immediately followed by a left parenthesis 1.130 - (i.e. a <<function-token>>) 1.131 - followed by the argument(s) to the notation 1.132 - followed by a right parenthesis. 1.133 - White space is allowed, but optional, immediately inside the parentheses. 1.134 - Functions can take multiple arguments, 1.135 - which are formatted similarly to a CSS property value. 1.136 + A <dfn>functional notation</dfn> is a type of component value 1.137 + that can represent more complex types or invoke special processing. 1.138 + The syntax starts with the name of the function 1.139 + immediately followed by a left parenthesis 1.140 + (i.e. a <<function-token>>) 1.141 + followed by the argument(s) to the notation 1.142 + followed by a right parenthesis. 1.143 + White space is allowed, but optional, immediately inside the parentheses. 1.144 + Functions can take multiple arguments, 1.145 + which are formatted similarly to a CSS property value. 1.146 1.147 - Some legacy functional notations, such as ''rgba()'', use commas unnecessarily, 1.148 - but generally commas are only used to separate items in a list, 1.149 - or pieces of a grammar that would be ambiguous otherwise. 1.150 - If a comma is used to separate arguments, 1.151 - whitespace is optional before and after the comma. 1.152 + Some legacy functional notations, such as ''rgba()'', use commas unnecessarily, 1.153 + but generally commas are only used to separate items in a list, 1.154 + or pieces of a grammar that would be ambiguous otherwise. 1.155 + If a comma is used to separate arguments, 1.156 + whitespace is optional before and after the comma. 1.157 1.158 <div class="example"> 1.159 <pre> 1.160 @@ -1059,7 +1081,7 @@ 1.161 1.162 <div class="example"> 1.163 The following sets the 'font-size' so that exactly 40em fits within the viewport, 1.164 - ensuring that roughly the same amount of text always fills the screen no matter the screen size. 1.165 + ensURLng that roughly the same amount of text always fills the screen no matter the screen size. 1.166 1.167 <pre> 1.168 :root { 1.169 @@ -1482,7 +1504,7 @@ 1.170 <dd> 1.171 The attribute value is taken as the contents of a CSS <<string>>. 1.172 It is interpreted as a quoted string within the ''url()'' notation. 1.173 - The default is ''about:invalid'', which is a URI defined (<a href="#about-invalid">in Appendix A</a>) to point 1.174 + The default is ''about:invalid'', which is a URL defined (<a href="#about-invalid">in Appendix A</a>) to point 1.175 to a non-existent document with a generic error condition. 1.176 Relative URLs must be made absolute 1.177 according to the rules of the document language as applied to URLs originating from the element; 1.178 @@ -1698,11 +1720,11 @@ 1.179 <h3 id='about-invalid'> 1.180 Registration for the <code>about:invalid</code> URL scheme</h3> 1.181 1.182 - This sections defines and registers the <code>about:invalid</code> URI, 1.183 + This sections defines and registers the <code>about:invalid</code> URL, 1.184 in accordance with the registration procedure defined in [[RFC6694]]. 1.185 1.186 1.187 - The official record of this registration can be found at <a href="http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml">http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml</a>. 1.188 + The official record of this registration can be found at <a href="http://www.iana.org/assignments/about-URL-tokens/about-URL-tokens.xml">http://www.iana.org/assignments/about-URL-tokens/about-URL-tokens.xml</a>. 1.189 1.190 <table class="data define"> 1.191 <tr> 1.192 @@ -1711,8 +1733,8 @@ 1.193 <tr> 1.194 <th>Intended Usage 1.195 <td> 1.196 - The <code>about:invalid</code> URI references a non-existent document with a generic error condition. 1.197 - It can be used when a URI is necessary, but the default value shouldn't be resolveable as any type of document. 1.198 + The <code>about:invalid</code> URL references a non-existent document with a generic error condition. 1.199 + It can be used when a URL is necessary, but the default value shouldn't be resolveable as any type of document. 1.200 <tr> 1.201 <th>Contact/Change controller 1.202 <td>CSS WG <<a href="mailto:www-style@w3.org">www-style@w3.org</a>> (on behalf of W3C)
2.1 --- a/css-values/Overview.html Thu Sep 18 14:18:50 2014 +0200 2.2 +++ b/css-values/Overview.html Thu Sep 18 13:25:17 2014 -0700 2.3 @@ -63,29 +63,49 @@ 2.4 </a> 2.5 </p> 2.6 <h1 class="p-name no-ref" id=title>CSS Values and Units Module Level 3</h1> 2.7 - <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, 2.8 - <span class=dt-updated><span class=value-title title=20140622>22 June 2014</span></span></span></h2> 2.9 - <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-values/>http://dev.w3.org/csswg/css-values/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-values/>http://www.w3.org/TR/css-values/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/ rel=previous>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dd><a href=http://www.w3.org/TR/2013/CR-css3-values-20130404/ rel=previous>http://www.w3.org/TR/2013/CR-css3-values-20130404/</a><dd><a href=http://www.w3.org/TR/2012/CR-css3-values-20120828/ rel=previous>http://www.w3.org/TR/2012/CR-css3-values-20120828/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-values-20120308/ rel=previous>http://www.w3.org/TR/2012/WD-css3-values-20120308/</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-values-20110906/ rel=previous>http://www.w3.org/TR/2011/WD-css3-values-20110906/</a><dd><a href=http://www.w3.org/TR/2006/WD-css3-values-20060919 rel=previous>http://www.w3.org/TR/2006/WD-css3-values-20060919</a><dd><a href=http://www.w3.org/TR/2005/WD-css3-values-20050726 rel=previous>http://www.w3.org/TR/2005/WD-css3-values-20050726</a><dd><a href=http://www.w3.org/TR/2001/WD-css3-values-20010713/ rel=previous>http://www.w3.org/TR/2001/WD-css3-values-20010713/</a> 2.10 - <dt>Feedback:</dt> 2.11 - <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-values%5D%20feedback">www-style@w3.org</a> 2.12 + <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft, 2.13 + <span class=dt-updated><span class=value-title title=20140918>18 September 2014</span></span></span></h2> 2.14 + <div data-fill-with=spec-metadata><dl> 2.15 + <dt>This version: 2.16 + <dd><a class=u-url href=http://dev.w3.org/csswg/css-values/>http://dev.w3.org/csswg/css-values/</a> 2.17 + <dt>Latest version: 2.18 + <dd><a href=http://www.w3.org/TR/css-values/>http://www.w3.org/TR/css-values/</a> 2.19 + <dt>Previous Versions: 2.20 + <dd><a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/ rel=previous>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a> 2.21 + <dd><a href=http://www.w3.org/TR/2013/CR-css3-values-20130404/ rel=previous>http://www.w3.org/TR/2013/CR-css3-values-20130404/</a> 2.22 + <dd><a href=http://www.w3.org/TR/2012/CR-css3-values-20120828/ rel=previous>http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> 2.23 + <dd><a href=http://www.w3.org/TR/2012/WD-css3-values-20120308/ rel=previous>http://www.w3.org/TR/2012/WD-css3-values-20120308/</a> 2.24 + <dd><a href=http://www.w3.org/TR/2011/WD-css3-values-20110906/ rel=previous>http://www.w3.org/TR/2011/WD-css3-values-20110906/</a> 2.25 + <dd><a href=http://www.w3.org/TR/2006/WD-css3-values-20060919 rel=previous>http://www.w3.org/TR/2006/WD-css3-values-20060919</a> 2.26 + <dd><a href=http://www.w3.org/TR/2005/WD-css3-values-20050726 rel=previous>http://www.w3.org/TR/2005/WD-css3-values-20050726</a> 2.27 + <dd><a href=http://www.w3.org/TR/2001/WD-css3-values-20010713/ rel=previous>http://www.w3.org/TR/2001/WD-css3-values-20010713/</a> 2.28 + <dt>Feedback: 2.29 + <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-values%5D%20feedback">www-style@w3.org</a> 2.30 with subject line 2.31 - “<kbd>[css-values] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Editors: 2.32 -<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a><dt>Former Editors: 2.33 -<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:howcome@opera.com>Håkon Wium Lie</a> (<span class="p-org org">Opera Software</span>)<dt>Issue Tracking:<dd><a href=http://www.w3.org/Style/CSS/Tracker/products/33 rel=issues>http://www.w3.org/Style/CSS/Tracker/products/33</a></dl></div> 2.34 + “<kbd>[css-values] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>) 2.35 + <dt>Editors: 2.36 + <dd><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins</a> (<span class="p-org org">Google</span>)</div> 2.37 + <dd><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a></div> 2.38 + <dt>Former Editors: 2.39 + <dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:howcome@opera.com>Håkon Wium Lie</a> (<span class="p-org org">Opera Software</span>)</div> 2.40 + <dt>Issue Tracking: 2.41 + <dd><a href=http://www.w3.org/Style/CSS/Tracker/products/33 rel=issues>http://www.w3.org/Style/CSS/Tracker/products/33</a> 2.42 +</dl> 2.43 +</div> 2.44 <div data-fill-with=warning></div> 2.45 <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. 2.46 </p> 2.47 <hr title="Separator for header"> 2.48 </div> 2.49 2.50 -<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2> 2.51 -<p class=p-summary data-fill-with=abstract><p>This CSS3 module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions.</p> 2.52 +<h2 class="no-num no-toc no-ref heading settled" id=abstract><span class=content>Abstract</span></h2> 2.53 +<div class=p-summary data-fill-with=abstract><p>This CSS3 module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions.</p> 2.54 2.55 <a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents 2.56 (such as HTML and XML) 2.57 -on screen, on paper, in speech, etc.</p> 2.58 +on screen, on paper, in speech, etc.</div> 2.59 2.60 -<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2> 2.61 +<h2 class="no-num no-toc no-ref heading settled" id=status><span class=content>Status of this document</span></h2> 2.62 <div data-fill-with=status><p> 2.63 This is a public copy of the editors’ draft. 2.64 It is provided for discussion only and may change at any moment. 2.65 @@ -117,135 +137,137 @@ 2.66 <div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period: 2.67 <ul><li><a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a>, <a class=css data-link-type=maybe href=#funcdef-toggle title=toggle()>toggle()</a>, <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a></ul></div> 2.68 2.69 -<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2> 2.70 +<h2 class="no-num no-toc no-ref heading settled" id=contents><span class=content>Table of Contents</span></h2> 2.71 <div data-fill-with=table-of-contents><ul class=toc> 2.72 - <li><a href=#intro><span class=secno>1</span> Introduction</a> 2.73 + <li><a href=#intro><span class=secno>1</span> Introduction</a> 2.74 <ul class=toc> 2.75 - <li><a href=#placement><span class=secno>1.1</span> Module Interactions</a></ul> 2.76 - <li><a href=#value-defs><span class=secno>2</span> Value Definition Syntax</a> 2.77 + <li><a href=#placement><span class=secno>1.1</span> Module Interactions</a></ul> 2.78 + <li><a href=#value-defs><span class=secno>2</span> Value Definition Syntax</a> 2.79 <ul class=toc> 2.80 - <li><a href=#component-types><span class=secno>2.1</span> Component value types</a> 2.81 - <li><a href=#component-combinators><span class=secno>2.2</span> Component value combinators</a> 2.82 - <li><a href=#component-multipliers><span class=secno>2.3</span> Component value multipliers</a> 2.83 - <li><a href=#combinator-multiplier-patterns><span class=secno>2.4</span> Combinator and Multiplier Patterns</a> 2.84 - <li><a href=#component-whitespace><span class=secno>2.5</span> Component values and white space</a> 2.85 - <li><a href=#value-examples><span class=secno>2.6</span> Property value examples</a></ul> 2.86 - <li><a href=#textual-values><span class=secno>3</span> Textual Data Types</a> 2.87 + <li><a href=#component-types><span class=secno>2.1</span> Component value types</a> 2.88 + <li><a href=#component-combinators><span class=secno>2.2</span> Component value combinators</a> 2.89 + <li><a href=#component-multipliers><span class=secno>2.3</span> Component value multipliers</a> 2.90 + <li><a href=#combinator-multiplier-patterns><span class=secno>2.4</span> Combinator and Multiplier Patterns</a> 2.91 + <li><a href=#component-whitespace><span class=secno>2.5</span> Component values and white space</a> 2.92 + <li><a href=#value-examples><span class=secno>2.6</span> Property value examples</a></ul> 2.93 + <li><a href=#textual-values><span class=secno>3</span> Textual Data Types</a> 2.94 <ul class=toc> 2.95 - <li><a href=#keywords><span class=secno>3.1</span> Pre-defined Keywords</a> 2.96 + <li><a href=#keywords><span class=secno>3.1</span> Pre-defined Keywords</a> 2.97 <ul class=toc> 2.98 - <li><a href=#common-keywords><span class=secno>3.1.1</span> CSS-wide keywords: <span class=css data-link-type=maybe title=initial>initial</span> and <span class=css data-link-type=maybe title=inherit>inherit</span></a></ul> 2.99 - <li><a href=#custom-idents><span class=secno>3.2</span> Author-defined Identifiers: the <span class=production data-link-type=type title="<custom-ident>"><custom-ident></span> type</a> 2.100 - <li><a href=#strings><span class=secno>3.3</span> Quoted Strings: the <span class=production data-link-type=type title="<string>"><string></span> type</a> 2.101 - <li><a href=#urls><span class=secno>3.4</span> Resource Locators: the <span class=production data-link-type=type title="<url>"><url></span> type</a></ul> 2.102 - <li><a href=#numeric-types><span class=secno>4</span> Numeric Data Types</a> 2.103 + <li><a href=#common-keywords><span class=secno>3.1.1</span> CSS-wide keywords: <span class=css>initial</span> and <span class=css>inherit</span></a></ul> 2.104 + <li><a href=#custom-idents><span class=secno>3.2</span> Author-defined Identifiers: the <span class=production data-link-type=type title="<custom-ident>"><custom-ident></span> type</a> 2.105 + <li><a href=#strings><span class=secno>3.3</span> Quoted Strings: the <span class=production data-link-type=type title="<string>"><string></span> type</a> 2.106 + <li><a href=#urls><span class=secno>3.4</span> Resource Locators: the <span class=production data-link-type=type title="<url>"><url></span> type</a> 2.107 + <ul class=toc> 2.108 + <li><a href=#relative-urls><span class=secno>3.4.1</span> Relative URLs</a> 2.109 + <li><a href=#url-modifiers><span class=secno>3.4.2</span> URL Modifiers</a></ul></ul> 2.110 + <li><a href=#numeric-types><span class=secno>4</span> Numeric Data Types</a> 2.111 <ul class=toc> 2.112 - <li><a href=#integers><span class=secno>4.1</span> Integers: the <span class=production data-link-type=type title="<integer>"><integer></span> type</a> 2.113 - <li><a href=#numbers><span class=secno>4.2</span> Real Numbers: the <span class=production data-link-type=type title="<number>"><number></span> type</a> 2.114 - <li><a href=#percentages><span class=secno>4.3</span> Percentages: the <span class=production data-link-type=type title="<percentage>"><percentage></span> type</a> 2.115 - <li><a href=#dimensions><span class=secno>4.4</span> Numbers with Units: <span data-link-type=dfn title=dimensions>dimensions</span></a></ul> 2.116 - <li><a href=#lengths><span class=secno>5</span> Distance Units: the <span class=production data-link-type=type title="<length>"><length></span> type</a> 2.117 + <li><a href=#integers><span class=secno>4.1</span> Integers: the <span class=production data-link-type=type title="<integer>"><integer></span> type</a> 2.118 + <li><a href=#numbers><span class=secno>4.2</span> Real Numbers: the <span class=production data-link-type=type title="<number>"><number></span> type</a> 2.119 + <li><a href=#percentages><span class=secno>4.3</span> Percentages: the <span class=production data-link-type=type title="<percentage>"><percentage></span> type</a> 2.120 + <li><a href=#dimensions><span class=secno>4.4</span> Numbers with Units: <span data-link-type=dfn title=dimensions>dimensions</span></a></ul> 2.121 + <li><a href=#lengths><span class=secno>5</span> Distance Units: the <span class=production data-link-type=type title="<length>"><length></span> type</a> 2.122 <ul class=toc> 2.123 - <li><a href=#relative-lengths><span class=secno>5.1</span> Relative lengths</a> 2.124 + <li><a href=#relative-lengths><span class=secno>5.1</span> Relative lengths</a> 2.125 <ul class=toc> 2.126 - <li><a href=#font-relative-lengths><span class=secno>5.1.1</span> Font-relative lengths: the <span class=css data-link-type=maybe title=em>em</span>, <span class=css data-link-type=maybe title=ex>ex</span>, <span class=css data-link-type=maybe title=ch>ch</span>, <span class=css data-link-type=maybe title=rem>rem</span> units</a> 2.127 - <li><a href=#viewport-relative-lengths><span class=secno>5.1.2</span> Viewport-percentage lengths: the <span class=css data-link-type=maybe title=vw>vw</span>, <span class=css data-link-type=maybe title=vh>vh</span>, <span class=css data-link-type=maybe title=vmin>vmin</span>, <span class=css data-link-type=maybe title=vmax>vmax</span> units</a></ul> 2.128 - <li><a href=#absolute-lengths><span class=secno>5.2</span> Absolute lengths: the <span class=css data-link-type=maybe title=cm>cm</span>, <span class=css data-link-type=maybe title=mm>mm</span>, <span class=css data-link-type=maybe title=q>q</span>, <span class=css data-link-type=maybe title=in>in</span>, <span class=css data-link-type=maybe title=pt>pt</span>, <span class=css data-link-type=maybe title=pc>pc</span>, <span class=css data-link-type=maybe title=px>px</span> units</a></ul> 2.129 - <li><a href=#other-units><span class=secno>6</span> Other Quantities</a> 2.130 + <li><a href=#font-relative-lengths><span class=secno>5.1.1</span> Font-relative lengths: the <span class=css>em</span>, <span class=css>ex</span>, <span class=css>ch</span>, <span class=css>rem</span> units</a> 2.131 + <li><a href=#viewport-relative-lengths><span class=secno>5.1.2</span> Viewport-percentage lengths: the <span class=css>vw</span>, <span class=css>vh</span>, <span class=css>vmin</span>, <span class=css>vmax</span> units</a></ul> 2.132 + <li><a href=#absolute-lengths><span class=secno>5.2</span> Absolute lengths: the <span class=css>cm</span>, <span class=css>mm</span>, <span class=css>q</span>, <span class=css>in</span>, <span class=css>pt</span>, <span class=css>pc</span>, <span class=css>px</span> units</a></ul> 2.133 + <li><a href=#other-units><span class=secno>6</span> Other Quantities</a> 2.134 <ul class=toc> 2.135 - <li><a href=#angles><span class=secno>6.1</span> Angle Units: the <span class=production data-link-type=type title="<angle>"><angle></span> type and <span class=css data-link-type=maybe title=deg>deg</span>, <span class=css data-link-type=maybe title=grad>grad</span>, <span class=css data-link-type=maybe title=rad>rad</span>, <span class=css data-link-type=maybe title=turn>turn</span> units</a> 2.136 - <li><a href=#time><span class=secno>6.2</span> Duration Units: the <span class=production data-link-type=type title="<time>"><time></span> type and <span class=css data-link-type=maybe title=s>s</span>, <span class=css data-link-type=maybe title=ms>ms</span> units</a> 2.137 - <li><a href=#frequency><span class=secno>6.3</span> Frequency Units: the <span class=production data-link-type=type title="<frequency>"><frequency></span> type and <span class=css data-link-type=maybe title=hz>Hz</span>, <span class=css data-link-type=maybe title=khz>kHz</span> units</a> 2.138 - <li><a href=#resolution><span class=secno>6.4</span> Resolution Units: the <span class=production data-link-type=type title="<resolution>"><resolution></span> type and <span class=css data-link-type=maybe title=dpi>dpi</span>, <span class=css data-link-type=maybe title=dpcm>dpcm</span>, <span class=css data-link-type=maybe title=dppx>dppx</span> units</a></ul> 2.139 - <li><a href=#defined-elsewhere><span class=secno>7</span> Data Types Defined Elsewhere</a> 2.140 + <li><a href=#angles><span class=secno>6.1</span> Angle Units: the <span class=production data-link-type=type title="<angle>"><angle></span> type and <span class=css>deg</span>, <span class=css>grad</span>, <span class=css>rad</span>, <span class=css>turn</span> units</a> 2.141 + <li><a href=#time><span class=secno>6.2</span> Duration Units: the <span class=production data-link-type=type title="<time>"><time></span> type and <span class=css>s</span>, <span class=css>ms</span> units</a> 2.142 + <li><a href=#frequency><span class=secno>6.3</span> Frequency Units: the <span class=production data-link-type=type title="<frequency>"><frequency></span> type and <span class=css>Hz</span>, <span class=css>kHz</span> units</a> 2.143 + <li><a href=#resolution><span class=secno>6.4</span> Resolution Units: the <span class=production data-link-type=type title="<resolution>"><resolution></span> type and <span class=css>dpi</span>, <span class=css>dpcm</span>, <span class=css>dppx</span> units</a></ul> 2.144 + <li><a href=#defined-elsewhere><span class=secno>7</span> Data Types Defined Elsewhere</a> 2.145 <ul class=toc> 2.146 - <li><a href=#colors><span class=secno>7.1</span> Colors: the <span class=production data-link-type=type title="<color>"><color></span> type</a> 2.147 - <li><a href=#images><span class=secno>7.2</span> Images: the <span class=production data-link-type=type title="<image>"><image></span> type</a> 2.148 - <li><a href=#position><span class=secno>7.3</span> 2D Positioning: the <span class=production data-link-type=type title="<position>"><position></span> type</a></ul> 2.149 - <li><a href=#functional-notation><span class=secno>8</span> Functional Notations</a> 2.150 + <li><a href=#colors><span class=secno>7.1</span> Colors: the <span class=production data-link-type=type title="<color>"><color></span> type</a> 2.151 + <li><a href=#images><span class=secno>7.2</span> Images: the <span class=production data-link-type=type title="<image>"><image></span> type</a> 2.152 + <li><a href=#position><span class=secno>7.3</span> 2D Positioning: the <span class=production data-link-type=type title="<position>"><position></span> type</a></ul> 2.153 + <li><a href=#functional-notation><span class=secno>8</span> Functional Notations</a> 2.154 <ul class=toc> 2.155 - <li><a href=#calc-notation><span class=secno>8.1</span> Mathematical Expressions: <span class=css data-link-type=maybe title=calc()>calc()</span></a> 2.156 + <li><a href=#calc-notation><span class=secno>8.1</span> Mathematical Expressions: <span class=css data-link-type=maybe title=calc()>calc()</span></a> 2.157 <ul class=toc> 2.158 - <li><a href=#calc-syntax><span class=secno>8.1.1</span> Syntax</a> 2.159 - <li><a href=#calc-type-checking><span class=secno>8.1.2</span> Type Checking</a> 2.160 - <li><a href=#calc-computed-value><span class=secno>8.1.3</span> Computed Value</a> 2.161 - <li><a href=#calc-range><span class=secno>8.1.4</span> Range Checking</a></ul> 2.162 - <li><a href=#toggle-notation><span class=secno>8.2</span> Toggling Between Values: <span class=css data-link-type=maybe title=toggle()>toggle()</span></a> 2.163 - <li><a href=#attr-notation><span class=secno>8.3</span> Attribute References: <span class=css data-link-type=maybe title=attr()>attr()</span></a></ul> 2.164 - <li><a href=#iana><span class=secno>9</span> Appendix A: IANA Considerations</a> 2.165 + <li><a href=#calc-syntax><span class=secno>8.1.1</span> Syntax</a> 2.166 + <li><a href=#calc-type-checking><span class=secno>8.1.2</span> Type Checking</a> 2.167 + <li><a href=#calc-computed-value><span class=secno>8.1.3</span> Computed Value</a> 2.168 + <li><a href=#calc-range><span class=secno>8.1.4</span> Range Checking</a></ul> 2.169 + <li><a href=#toggle-notation><span class=secno>8.2</span> Toggling Between Values: <span class=css data-link-type=maybe title=toggle()>toggle()</span></a> 2.170 + <li><a href=#attr-notation><span class=secno>8.3</span> Attribute References: <span class=css data-link-type=maybe title=attr()>attr()</span></a></ul> 2.171 + <li><a href=#iana><span class=secno>9</span> Appendix A: IANA Considerations</a> 2.172 <ul class=toc> 2.173 - <li><a href=#about-invalid><span class=secno>9.1</span> Registration for the <code>about:invalid</code> URL scheme</a></ul> 2.174 - <li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a> 2.175 - <li><a href=#changes><span class=secno></span> Changes</a> 2.176 - <li><a href=#conformance><span class=secno></span> Conformance</a> 2.177 + <li><a href=#about-invalid><span class=secno>9.1</span> Registration for the <code>about:invalid</code> URL scheme</a></ul> 2.178 + <li><a href=#acknowledgments><span class=secno></span> Acknowledgments</a> 2.179 + <li><a href=#changes><span class=secno></span> Changes</a> 2.180 + <li><a href=#conformance><span class=secno></span> Conformance</a> 2.181 <ul class=toc> 2.182 - <li><a href=#conventions><span class=secno></span> Document conventions</a> 2.183 - <li><a href=#conformance-classes><span class=secno></span> Conformance classes</a> 2.184 - <li><a href=#partial><span class=secno></span> Partial implementations</a> 2.185 - <li><a href=#experimental><span class=secno></span> Experimental implementations</a> 2.186 - <li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul> 2.187 - <li><a href=#references><span class=secno></span> References</a> 2.188 + <li><a href=#conventions><span class=secno></span> Document conventions</a> 2.189 + <li><a href=#conformance-classes><span class=secno></span> Conformance classes</a> 2.190 + <li><a href=#partial><span class=secno></span> Partial implementations</a> 2.191 + <li><a href=#experimental><span class=secno></span> Experimental implementations</a> 2.192 + <li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul> 2.193 + <li><a href=#references><span class=secno></span> References</a> 2.194 <ul class=toc> 2.195 - <li><a href=#normative><span class=secno></span> Normative References</a> 2.196 - <li><a href=#informative><span class=secno></span> Informative References</a></ul> 2.197 - <li><a href=#index><span class=secno></span> Index</a> 2.198 - <li><a href=#property-index><span class=secno></span> Property index</a></ul></div> 2.199 + <li><a href=#normative><span class=secno></span> Normative References</a> 2.200 + <li><a href=#informative><span class=secno></span> Informative References</a></ul> 2.201 + <li><a href=#index><span class=secno></span> Index</a> 2.202 + <li><a href=#property-index><span class=secno></span> Property index</a></ul></div> 2.203 2.204 2.205 2.206 - 2.207 -<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content> 2.208 +<h2 class="heading settled" data-level=1 id=intro><span class=secno>1 </span><span class=content> 2.209 Introduction</span><a class=self-link href=#intro></a></h2> 2.210 2.211 <p>The value definition field of each CSS property can contain keywords, 2.212 - data types (which appear between <span class=css data-link-type=maybe title=<><</span> and <span class=css data-link-type=maybe title=">">></span>), and information on how 2.213 + data types (which appear between <span class=css><</span> and <span class=css>></span>), and information on how 2.214 they can be combined. 2.215 - Generic data types (<a class="production css-code" data-link-type=type href=#length-value title="<length>"><length></a> being the most widely used) 2.216 + Generic data types (<a class="production css" data-link-type=type href=#length-value title="<length>"><length></a> being the most widely used) 2.217 that can be used by many properties are described in this specification, 2.218 - while more specific data types (e.g., <a class="production css-code" data-link-type=type title="<spacing-limit>"><spacing-limit></a>) 2.219 + while more specific data types (e.g., <a class="production css" data-link-type=type title="<spacing-limit>"><spacing-limit></a>) 2.220 are described in the corresponding modules.</p> 2.221 2.222 -<h3 class="heading settled heading" data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content> 2.223 +<h3 class="heading settled" data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content> 2.224 Module Interactions</span><a class=self-link href=#placement></a></h3> 2.225 2.226 -<p>This module replaces and extends the data type definitions in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a> 2.227 +<p>This module replaces and extends the data type definitions in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a> 2.228 sections 2.229 <a href=http://www.w3.org/TR/CSS21/about.html#value-defs>1.4.2.1</a>, 2.230 <a href=http://www.w3.org/TR/CSS21/syndata.html#values>4.3</a>, 2.231 and <a href=http://www.w3.org/TR/CSS21/aural.html#aural-intro>A.2</a>.</p> 2.232 2.233 2.234 -<h2 class="heading settled heading" data-level=2 id=value-defs><span class=secno>2 </span><span class=content> 2.235 +<h2 class="heading settled" data-level=2 id=value-defs><span class=secno>2 </span><span class=content> 2.236 Value Definition Syntax</span><a class=self-link href=#value-defs></a></h2> 2.237 2.238 <p>The syntax described here is used to define the set of valid values 2.239 for CSS properties. A property value can have one or more components.</p> 2.240 2.241 -<h3 class="heading settled heading" data-level=2.1 id=component-types><span class=secno>2.1 </span><span class=content> 2.242 +<h3 class="heading settled" data-level=2.1 id=component-types><span class=secno>2.1 </span><span class=content> 2.243 Component value types</span><a class=self-link href=#component-types></a></h3> 2.244 2.245 <p>Component value types are designated in several ways:</p> 2.246 2.247 <ol> 2.248 <li> 2.249 - <a href=#keywords>keyword</a> values (such as <span class=css data-link-type=maybe title=auto>auto</span>, <span class=css data-link-type=maybe title=disc>disc</span>, etc.), 2.250 + <a href=#keywords>keyword</a> values (such as <span class=css>auto</span>, <span class=css>disc</span>, etc.), 2.251 which appear literally, without quotes (e.g. <code>auto</code>) 2.252 2.253 <li> 2.254 - basic data types, which appear between <span class=css data-link-type=maybe title=<><</span> and <span class=css data-link-type=maybe title=">">></span> 2.255 - (e.g., <a class="production css-code" data-link-type=type href=#length-value title="<length>"><length></a>, <a class="production css-code" data-link-type=type href=#percentage-value title="<percentage>"><percentage></a>, etc.). 2.256 + basic data types, which appear between <span class=css><</span> and <span class=css>></span> 2.257 + (e.g., <a class="production css" data-link-type=type href=#length-value title="<length>"><length></a>, <a class="production css" data-link-type=type href=#percentage-value title="<percentage>"><percentage></a>, etc.). 2.258 2.259 <li> 2.260 types that have the same range of values as a property bearing the same name 2.261 (e.g., <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-width title=border-width><‘border-width’></a>, <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#background-attachment title=background-attachment><‘background-attachment’></a>, etc.). 2.262 In this case, the type name is the property name (complete with quotes) between the brackets. 2.263 - Such a type does <em>not</em> include <a href=#common-keywords>CSS-wide keywords</a> such as <span class=css data-link-type=maybe title=inherit>inherit</span>. 2.264 + Such a type does <em>not</em> include <a href=#common-keywords>CSS-wide keywords</a> such as <span class=css>inherit</span>. 2.265 2.266 <li> 2.267 non-terminals that do not share the same name as a property. 2.268 - In this case, the non-terminal name appears between <span class=css data-link-type=maybe title=<><</span> and <span class=css data-link-type=maybe title=">">></span>, 2.269 - as in <a class="production css-code" data-link-type=type title="<spacing-limit>"><spacing-limit></a>. 2.270 - Notice the distinction between <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css2/box.html#value-def-border-width title="<border-width>"><border-width></a> and <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-width title=border-width><‘border-width’></a>: 2.271 + In this case, the non-terminal name appears between <span class=css><</span> and <span class=css>></span>, 2.272 + as in <a class="production css" data-link-type=type title="<spacing-limit>"><spacing-limit></a>. 2.273 + Notice the distinction between <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css2/box.html#value-def-border-width title="<border-width>"><border-width></a> and <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-width title=border-width><‘border-width’></a>: 2.274 the latter is defined as the value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-width title=border-width>border-width</a> property, 2.275 the former requires an explicit expansion elsewhere. 2.276 The definition of a non-terminal is typically located near its first appearance in the specification. 2.277 @@ -287,17 +309,17 @@ 2.278 </pre> 2.279 2.280 <p>Given this grammar, 2.281 - writing <span class=css data-link-type=maybe title="example(first, second, third)">example(first, second, third)</span> is valid, 2.282 - as is <span class=css data-link-type=maybe title="example(first, second)">example(first, second)</span> or <span class=css data-link-type=maybe title="example(first, third)">example(first, third)</span> or <span class=css data-link-type=maybe title=example(second)>example(second)</span>. 2.283 - However, <span class=css data-link-type=maybe title="example(first, , third)">example(first, , third)</span> is invalid, as one of those commas are no longer separating two options; 2.284 - similarly, <span class=css data-link-type=maybe title=example(,second)>example(,second)</span> and <span class=css data-link-type=maybe title=example(first,)>example(first,)</span> are invalid. 2.285 - <span class=css data-link-type=maybe title="example(first second)">example(first second)</span> is also invalid, 2.286 + writing <span class=css>example(first, second, third)</span> is valid, 2.287 + as is <span class=css>example(first, second)</span> or <span class=css>example(first, third)</span> or <span class=css>example(second)</span>. 2.288 + However, <span class=css>example(first, , third)</span> is invalid, as one of those commas are no longer separating two options; 2.289 + similarly, <span class=css>example(,second)</span> and <span class=css>example(first,)</span> are invalid. 2.290 + <span class=css>example(first second)</span> is also invalid, 2.291 as commas are still required to actually separate the options.</p> 2.292 2.293 <p>If commas were not implicitly omittable, 2.294 the grammar would have to be much more complicated 2.295 to properly express the ways that the arguments can be omitted, 2.296 - greatly obscuring the simplicity of the feature.</p> 2.297 + greatly obscURLng the simplicity of the feature.</p> 2.298 </div> 2.299 2.300 <p>All CSS properties also accept the <a href=#common-keywords>CSS-wide keyword values</a> 2.301 @@ -313,7 +335,7 @@ 2.302 For example, 2.303 <a class=css data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#background title=background>background: url(corner.png) no-repeat, inherit;</a> is invalid.</p> 2.304 2.305 -<h3 class="heading settled heading" data-level=2.2 id=component-combinators><span class=secno>2.2 </span><span class=content> 2.306 +<h3 class="heading settled" data-level=2.2 id=component-combinators><span class=secno>2.2 </span><span class=content> 2.307 Component value combinators</span><a class=self-link href=#component-combinators></a></h3> 2.308 2.309 <p>Component values can be arranged into property values as follows:</p> 2.310 @@ -334,8 +356,8 @@ 2.311 ampersand is stronger than the double bar, and the double bar 2.312 is stronger than the bar. Thus, the following lines are equivalent:</p> 2.313 2.314 - <pre>a b | c || d && e f 2.315 - [ a b ] | [ c || [ d && [ e f ]]] 2.316 + <pre> a b | c || d && e f 2.317 +[ a b ] | [ c || [ d && [ e f ]]] 2.318 </pre> 2.319 2.320 <p>For re-orderable combinators (||, &&), 2.321 @@ -347,7 +369,7 @@ 2.322 b || a || c 2.323 </pre> 2.324 2.325 -<h3 class="heading settled heading" data-level=2.3 id=component-multipliers><span class=secno>2.3 </span><span class=content> 2.326 +<h3 class="heading settled" data-level=2.3 id=component-multipliers><span class=secno>2.3 </span><span class=content> 2.327 Component value multipliers</span><a class=self-link href=#component-multipliers></a></h3> 2.328 2.329 <p>Every type, keyword, or bracketed group may be followed by one of 2.330 @@ -378,7 +400,7 @@ 2.331 (which may optionally be surrounded by white space and/or comments). 2.332 It may optionally be followed by the curly brace forms, above, 2.333 to indicate precisely how many times the repetition occurs, 2.334 - like <span class=css data-link-type=maybe title="<length>#{1,4}"><length>#{1,4}</span>. 2.335 + like <span class=css><length>#{1,4}</span>. 2.336 2.337 <li>An exclamation point (<dfn data-dfn-type=grammar data-export="" id=mult-req>!<a class=self-link href=#mult-req></a></dfn>) after a group indicates that the group is required 2.338 and must produce at least one value; 2.339 @@ -386,12 +408,12 @@ 2.340 at least one component value must not be omitted. 2.341 </ul> 2.342 2.343 -<p>For repeated component values (indicated by <span class=css data-link-type=maybe title=*>*</span>, <span class=css data-link-type=maybe title=+>+</span>, or <span class=css data-link-type=maybe title=#>#</span>), 2.344 +<p>For repeated component values (indicated by <span class=css>*</span>, <span class=css>+</span>, or <span class=css>#</span>), 2.345 UAs must support at least 20 repetitions of the component. 2.346 If a property value contains more than the supported number of repetitions, 2.347 the declaration must be ignored as if it were invalid.</p> 2.348 2.349 -<h3 class="heading settled heading" data-level=2.4 id=combinator-multiplier-patterns><span class=secno>2.4 </span><span class=content> 2.350 +<h3 class="heading settled" data-level=2.4 id=combinator-multiplier-patterns><span class=secno>2.4 </span><span class=content> 2.351 Combinator and Multiplier Patterns</span><a class=self-link href=#combinator-multiplier-patterns></a></h3> 2.352 2.353 <p>There are a small set of common ways to combine multiple independent <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#component-value title="component values">component values</a> in particular numbers and orders. 2.354 @@ -428,7 +450,7 @@ 2.355 <p>Note that all of the "any order" possibilities are expressed using combinators, 2.356 while the "in order" possibilities are all variants on juxtaposition.</p> 2.357 2.358 -<h3 class="heading settled heading" data-level=2.5 id=component-whitespace><span class=secno>2.5 </span><span class=content> 2.359 +<h3 class="heading settled" data-level=2.5 id=component-whitespace><span class=secno>2.5 </span><span class=content> 2.360 Component values and white space</span><a class=self-link href=#component-whitespace></a></h3> 2.361 2.362 <p>Unless otherwise specified, 2.363 @@ -439,13 +461,13 @@ 2.364 2.365 <p class=note>Note: In many cases, spaces will in fact be <em>required</em> between components 2.366 in order to distinguish them from each other. 2.367 - For example, the value <span class=css data-link-type=maybe title=1em2em>1em2em</span> would be parsed as a single <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-dimension-token title="<dimension-token>"><dimension-token></a> 2.368 - with the number <span class=css data-link-type=maybe title=1>1</span> and the identifier <span class=css data-link-type=maybe title=em2em>em2em</span>, 2.369 + For example, the value <span class=css>1em2em</span> would be parsed as a single <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-dimension-token title="<dimension-token>"><dimension-token></a> 2.370 + with the number <span class=css>1</span> and the identifier <span class=css>em2em</span>, 2.371 which is an invalid unit. 2.372 - In this case, a space would be required before the <span class=css data-link-type=maybe title=2>2</span> 2.373 - to get this parsed as the two lengths <span class=css data-link-type=maybe title=1em>1em</span>and <span class=css data-link-type=maybe title=2em>2em</span>.</p> 2.374 + In this case, a space would be required before the <span class=css>2</span> 2.375 + to get this parsed as the two lengths <span class=css>1em</span>and <span class=css>2em</span>.</p> 2.376 2.377 -<h3 class="heading settled heading" data-level=2.6 id=value-examples><span class=secno>2.6 </span><span class=content> 2.378 +<h3 class="heading settled" data-level=2.6 id=value-examples><span class=secno>2.6 </span><span class=content> 2.379 Property value examples</span><a class=self-link href=#value-examples></a></h3> 2.380 2.381 <p>Below are some examples of properties with their corresponding value 2.382 @@ -461,46 +483,46 @@ 2.383 <tbody> 2.384 <tr><td><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#orphans title=orphans>orphans</a> 2.385 <td><integer> 2.386 - <td><span class=css data-link-type=maybe title=3>3</span> 2.387 + <td><span class=css>3</span> 2.388 <tr><td><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#propdef-text-align title=text-align>text-align</a> 2.389 <td>left | right | center | justify 2.390 - <td><span class=css data-link-type=maybe title=center>center</span> 2.391 + <td><span class=css>center</span> 2.392 <tr><td><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/box.html#propdef-padding-top title=padding-top>padding-top</a> 2.393 <td><length> | <percentage> 2.394 - <td><span class=css data-link-type=maybe title=5%>5%</span> 2.395 + <td><span class=css>5%</span> 2.396 <tr><td><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-ui-3/#outline-color0 title=outline-color>outline-color</a> 2.397 <td><color> | invert 2.398 - <td><span class=css data-link-type=maybe title=#fefefe>#fefefe</span> 2.399 + <td><span class=css>#fefefe</span> 2.400 <tr><td><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-decoration title=text-decoration>text-decoration</a> 2.401 <td>none | underline || overline || line-through || blink 2.402 - <td><span class=css data-link-type=maybe title="overline underline">overline underline</span> 2.403 - <tr><td><a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-family title=font-family>font-family</a> 2.404 + <td><span class=css>overline underline</span> 2.405 + <tr><td><a class=css data-link-type=property href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-family title=font-family>font-family</a> 2.406 <td>[ <family-name> | <generic-family> ]# 2.407 - <td><span class=css data-link-type=maybe title='"gill sans", futura, sans-serif'>"Gill Sans", Futura, sans-serif</span> 2.408 + <td><span class=css>"Gill Sans", Futura, sans-serif</span> 2.409 <tr><td><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#border-width title=border-width>border-width</a> 2.410 <td>[ <length> | thick | medium | thin ]{1,4} 2.411 - <td><span class=css data-link-type=maybe title="2px medium 4px">2px medium 4px</span> 2.412 + <td><span class=css>2px medium 4px</span> 2.413 <tr><td><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-shadow title=text-shadow>text-shadow</a> 2.414 <td>[ inset? && [ <length>{2,4} && <color>? ] ]# | none 2.415 - <td><span class=css data-link-type=maybe title="3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset">3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset</span> 2.416 + <td><span class=css>3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset</span> 2.417 </tbody> 2.418 </table> 2.419 </div> 2.420 2.421 -<h2 class="heading settled heading" data-level=3 id=textual-values><span class=secno>3 </span><span class=content> 2.422 +<h2 class="heading settled" data-level=3 id=textual-values><span class=secno>3 </span><span class=content> 2.423 Textual Data Types</span><a class=self-link href=#textual-values></a></h2> 2.424 2.425 -<p>An <dfn data-dfn-type=dfn data-noexport="" id=identifier>identifier<a class=self-link href=#identifier></a></dfn> is a sequence of characters conforming to the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-ident-token title="<ident-token>"><ident-token></a> grammar. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a> 2.426 +<p>An <dfn data-dfn-type=dfn data-noexport="" id=identifier>identifier<a class=self-link href=#identifier></a></dfn> is a sequence of characters conforming to the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-ident-token title="<ident-token>"><ident-token></a> grammar. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a> 2.427 Identifiers cannot be quoted; 2.428 otherwise they would be interpreted as a string.</p> 2.429 2.430 -<h3 class="heading settled heading" data-level=3.1 id=keywords><span class=secno>3.1 </span><span class=content> 2.431 +<h3 class="heading settled" data-level=3.1 id=keywords><span class=secno>3.1 </span><span class=content> 2.432 Pre-defined Keywords</span><a class=self-link href=#keywords></a></h3> 2.433 2.434 <p>In the value definition fields, 2.435 keywords with a pre-defined meaning appear literally. 2.436 Keywords are CSS <a data-link-type=dfn href=#identifier title=identifiers>identifiers</a> 2.437 - and are interpreted <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#ascii-case-insensitive title="ascii case-insensitive">ASCII case-insensitively</a> 2.438 + and are interpreted <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#ascii-case-insensitive title="ASCII case-insensitive">ASCII case-insensitively</a> 2.439 (i.e., [a-z] and [A-Z] are equivalent).</p> 2.440 2.441 <div class=example> 2.442 @@ -514,60 +536,60 @@ 2.443 <pre>table { border-collapse: separate }</pre> 2.444 </div> 2.445 2.446 -<h4 class="heading settled heading" data-level=3.1.1 id=common-keywords><span class=secno>3.1.1 </span><span class=content> 2.447 -CSS-wide keywords: <span class=css data-link-type=maybe title=initial>initial</span> and <span class=css data-link-type=maybe title=inherit>inherit</span></span><a class=self-link href=#common-keywords></a></h4> 2.448 +<h4 class="heading settled" data-level=3.1.1 id=common-keywords><span class=secno>3.1.1 </span><span class=content> 2.449 +CSS-wide keywords: <span class=css>initial</span> and <span class=css>inherit</span></span><a class=self-link href=#common-keywords></a></h4> 2.450 2.451 <p>As defined <a href=#component-types>above</a>, 2.452 all properties accept the <dfn data-dfn-type=dfn data-noexport="" id=css-wide-keywords>CSS-wide keywords<a class=self-link href=#css-wide-keywords></a></dfn>, 2.453 which represent value computations common to all CSS properties.</p> 2.454 2.455 -<p>The <span class=css data-link-type=maybe title=initial>initial</span> keyword represents the value specified as the property’s initial value. 2.456 - The <span class=css data-link-type=maybe title=inherit>inherit</span> keyword represents the computed value of the property on the element’s parent. 2.457 - The <span class=css data-link-type=maybe title=unset>unset</span> keyword acts as either <span class=css data-link-type=maybe title=inherit>inherit</span> or <span class=css data-link-type=maybe title=initial>initial</span>, 2.458 +<p>The <span class=css>initial</span> keyword represents the value specified as the property’s initial value. 2.459 + The <span class=css>inherit</span> keyword represents the computed value of the property on the element’s parent. 2.460 + The <span class=css>unset</span> keyword acts as either <span class=css>inherit</span> or <span class=css>initial</span>, 2.461 depending on whether the property is inherited or not. 2.462 - All of these keywords are normatively defined in the Cascade module. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3cascade title=biblio-css3cascade>[CSS3CASCADE]</a></p> 2.463 + All of these keywords are normatively defined in the Cascade module. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3cascade title=CSS3CASCADE>[CSS3CASCADE]</a></p> 2.464 2.465 <p>Other CSS specifications can define additional CSS-wide keywords.</p> 2.466 2.467 2.468 2.469 -<h3 class="heading settled heading" data-level=3.2 id=custom-idents><span class=secno>3.2 </span><span class=content> 2.470 -Author-defined Identifiers: the <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> type</span><a class=self-link href=#custom-idents></a></h3> 2.471 +<h3 class="heading settled" data-level=3.2 id=custom-idents><span class=secno>3.2 </span><span class=content> 2.472 +Author-defined Identifiers: the <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> type</span><a class=self-link href=#custom-idents></a></h3> 2.473 2.474 <p>Some properties accept arbitrary author-defined identifiers as a component value. 2.475 - This generic data type is denoted by <dfn class=css-code data-dfn-type=type data-export="" id=identifier-value><custom-ident><a class=self-link href=#identifier-value></a></dfn>, 2.476 + This generic data type is denoted by <dfn class=css data-dfn-type=type data-export="" id=identifier-value><custom-ident><a class=self-link href=#identifier-value></a></dfn>, 2.477 and represents any valid CSS <a data-link-type=dfn href=#identifier title=identifier>identifier</a> 2.478 that would not be misinterpreted as a pre-defined keyword in that property’s value definition. 2.479 Such identifiers are fully case-sensitive, 2.480 even in the ASCII range 2.481 - (e.g. <span class=css data-link-type=maybe title=example>example</span> and <span class=css data-link-type=maybe title=example>EXAMPLE</span> are two different, unrelated user-defined identifiers).</p> 2.482 + (e.g. <span class=css>example</span> and <span class=css>EXAMPLE</span> are two different, unrelated user-defined identifiers).</p> 2.483 2.484 -<p>The <a data-link-type=dfn href=#css-wide-keywords title="css-wide keywords">CSS-wide keywords</a> are not valid <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>s. 2.485 - The <span class=css data-link-type=maybe title=default>default</span> keyword is reserved 2.486 - and is also not a valid <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>.</p> 2.487 +<p>The <a data-link-type=dfn href=#css-wide-keywords title="CSS-wide keywords">CSS-wide keywords</a> are not valid <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>s. 2.488 + The <span class=css>default</span> keyword is reserved 2.489 + and is also not a valid <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>.</p> 2.490 2.491 -<p>Specifications using <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> should specify clearly 2.492 - what other keywords are excluded from <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>—for 2.493 +<p>Specifications using <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> should specify clearly 2.494 + what other keywords are excluded from <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>—for 2.495 example by saying that any pre-defined keywords in that property’s value definition are excluded. 2.496 As a general rule, an identifier that could be interpreted as a pre-defined keyword 2.497 - in any position or multiplication of the <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> component value 2.498 + in any position or multiplication of the <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> component value 2.499 is excluded, 2.500 - and is invalid as a <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> matching to that component value 2.501 + and is invalid as a <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> matching to that component value 2.502 even in positions where its use would be technically unambiguous. 2.503 For example, if a keyword could be misparsed when specified 2.504 - as the first item of a ''<a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>+'' list, 2.505 + as the first item of a ''<a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>+'' list, 2.506 it is invalid when specified in any position in that list.</p> 2.507 2.508 <p>Excluded keywords are excluded in all ASCII case permutations.</p> 2.509 2.510 2.511 -<h3 class="heading settled heading" data-level=3.3 id=strings><span class=secno>3.3 </span><span class=content> 2.512 -Quoted Strings: the <a class="production css-code" data-link-type=type href=#string-value title="<string>"><string></a> type</span><a class=self-link href=#strings></a></h3> 2.513 +<h3 class="heading settled" data-level=3.3 id=strings><span class=secno>3.3 </span><span class=content> 2.514 +Quoted Strings: the <a class="production css" data-link-type=type href=#string-value title="<string>"><string></a> type</span><a class=self-link href=#strings></a></h3> 2.515 2.516 -<p><dfn data-dfn-type=dfn data-export="" id=string title=string>Strings<a class=self-link href=#string></a></dfn> are denoted by <dfn class=css-code data-dfn-type=type data-export="" id=string-value><string><a class=self-link href=#string-value></a></dfn> 2.517 +<p><dfn data-dfn-type=dfn data-export="" id=string title=string>Strings<a class=self-link href=#string></a></dfn> are denoted by <dfn class=css data-dfn-type=type data-export="" id=string-value><string><a class=self-link href=#string-value></a></dfn> 2.518 and consist of a sequence of characters delimited by double quotes or 2.519 - single quotes. They correspond to the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-string-token title="<string-token>"><string-token></a> production 2.520 - in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>.</p> 2.521 + single quotes. They correspond to the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-string-token title="<string-token>"><string-token></a> production 2.522 + in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a>.</p> 2.523 2.524 <div class=example> 2.525 Double quotes cannot occur inside double quotes, unless 2.526 @@ -601,53 +623,64 @@ 2.527 feed character in Unicode (U+000A), but represents the generic notion 2.528 of "newline" in CSS.)</p> 2.529 2.530 -<h3 class="heading settled heading" data-level=3.4 id=urls><span class=secno>3.4 </span><span class=content> 2.531 -Resource Locators: the <a class="production css-code" data-link-type=type href=#url-value title="<url>"><url></a> type</span><a class=self-link href=#urls></a></h3> 2.532 +<h3 class="heading settled" data-level=3.4 id=urls><span class=secno>3.4 </span><span class=content> 2.533 +Resource Locators: the <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> type</span><a class=self-link href=#urls></a></h3> 2.534 2.535 <p>A <dfn data-dfn-type=dfn data-noexport="" id=url>URL<a class=self-link href=#url></a></dfn> is a pointer to a resource 2.536 - and is a <a data-link-spec=css-syntax data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#consume-a-url-token0 title="consume a url token">specially-parsed</a> <a href=#functional-notation>functional notation</a> 2.537 - denoted by <dfn class=css-code data-dfn-type=type data-export="" id=url-value><url><a class=self-link href=#url-value></a></dfn>. 2.538 - It corresponds to the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-url-token title="<url-token>"><url-token></a> production 2.539 - in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>.</p> 2.540 + and is a <a href=#functional-notation>functional notation</a> 2.541 + denoted by <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a>. 2.542 + The syntax of a <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> is:</p> 2.543 + 2.544 +<pre class=prod><dfn data-dfn-type=type data-export="" id=url-value><url><a class=self-link href=#url-value></a></dfn> = url( <a class=production data-link-type=type href=#string-value title="<string>"><string></a> <a class=production data-link-type=type href=#typedef-url-modifier title="<url-modifier>"><url-modifier></a><a class=prod-punc data-link-type=grammar href=#mult-zero-plus title=*>*</a> )</pre> 2.545 + 2.546 2.547 <div class=example> 2.548 Below is an example of a URL being used as a background image: 2.549 2.550 <pre>body { background: url("http://www.example.com/pinkish.gif") }</pre> 2.551 - 2.552 -<p>The same example can be written without quotes:</p> 2.553 - 2.554 -<pre>body { background: url(http://www.example.com/pinkish.gif) }</pre> 2.555 </div> 2.556 2.557 -<p class=note>Note: Note that in some CSS syntactic contexts (as defined by that context), 2.558 - a URL can be represented as a <a class="production css-code" data-link-type=type href=#string-value title="<string>"><string></a> rather than by <a class="production css-code" data-link-type=type href=#url-value title="<url>"><url></a>. 2.559 - An example of this is the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-cascade-3/#at-ruledef-import title=@import>@import</a> rule.</p> 2.560 +<p>In addition to the syntax defined above, 2.561 + a <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> can sometimes be written in other ways:</p> 2.562 2.563 -<p>Parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL 2.564 - must be escaped with a backslash 2.565 - so that the resulting value is a valid <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-url-token title="<url-token>"><url-token></a>, 2.566 - e.g. <span class=css data-link-type=maybe title=url(open\(parens)>url(open\(parens)</span>, <span class=css data-link-type=maybe title=url(close\)parens)>url(close\)parens)</span>. 2.567 +<ul><li data-md=""><p>For legacy reasons, 2.568 +a <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> can be written without quotation marks around the URL itself. 2.569 +This syntax is <a data-link-spec=css-syntax data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#consume-a-url-token0 title="consume a url token">specially-parsed</a>, 2.570 +and produces a <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-url-token title="<url-token>"><url-token></a> rather than a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#function title=function>function</a> syntactically. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a></p> 2.571 +<li data-md=""><p>Some CSS contexts, such as <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-cascade-3/#at-ruledef-import title=@import>@import</a>, allow a <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> to be represented by a <a class="production css" data-link-type=type href=#string-value title="<string>"><string></a> instead. 2.572 +This behaves identically to writing a <span class=css>url()</span> function containing that string.</p> 2.573 +</ul> 2.574 +<p>Because these alternate ways of writing a <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> are not <a data-link-type=dfn href=#functional-notation title="functional notations">functional notations</a>, 2.575 + they cannot accept any <a class="production css" data-link-type=type href=#typedef-url-modifier title="<url-modifier>"><url-modifier></a>s.</p> 2.576 + 2.577 +<p class=note>Note: The special parsing rules for the legacy quotation mark-less <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> syntax 2.578 + means that parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL 2.579 + must be escaped with a backslash, 2.580 + e.g. <span class=css>url(open\(parens)</span>, <span class=css>url(close\)parens)</span>. 2.581 Depending on the type of URL, 2.582 - it might also be possible to write these characters as URI-escapes 2.583 - (e.g. <span class=css data-link-type=maybe title=url(open%28parens)>url(open%28parens)</span> or <span class=css data-link-type=maybe title=url(close%29parens)>url(close%29parens)</span>) 2.584 - as described in <a data-biblio-type=informative data-link-type=biblio href=#biblio-uri title=biblio-uri>[URI]</a>. 2.585 - Alternatively a URL containing such characters may be represented as a quoted <a data-link-type=dfn href=#string title=string>string</a> within the <span class=css data-link-type=maybe title=url()>url()</span> notation.</p> 2.586 + it might also be possible to write these characters as URL-escapes 2.587 + (e.g. <span class=css>url(open%28parens)</span> or <span class=css>url(close%29parens)</span>) 2.588 + as described in <a data-biblio-type=informative data-link-type=biblio href=#biblio-url title=URL>[URL]</a>. 2.589 + (If written as a normal function containing a string, ordinary string escaping rules apply; 2.590 + only newlines and the character used to quote the string need to be escaped.)</p> 2.591 + 2.592 +<h4 class="heading settled" data-level=3.4.1 id=relative-urls><span class=secno>3.4.1 </span><span class=content> 2.593 +Relative URLs</span><a class=self-link href=#relative-urls></a></h4> 2.594 2.595 <p>In order to create modular style sheets that are not dependent on 2.596 - the absolute location of a resource, authors should use relative URIs. 2.597 - Relative URIs (as defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-uri title=biblio-uri>[URI]</a>) are resolved to full URIs 2.598 - using a base URI. RFC 3986, section 3, defines the normative 2.599 + the absolute location of a resource, authors should use relative URLs. 2.600 + Relative URLs (as defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-url title=URL>[URL]</a>) are resolved to full URLs 2.601 + using a base URL. RFC 3986, section 3, defines the normative 2.602 algorithm for this process. 2.603 - For CSS style sheets, the base URI is that of the style sheet itself, 2.604 + For CSS style sheets, the base URL is that of the style sheet itself, 2.605 not that of the styled source document. 2.606 Style sheets embedded within a document have 2.607 the base URL associated with their container.</p> 2.608 2.609 -<p>When a <a class="production css-code" data-link-type=type href=#url-value title="<url>"><url></a> appears in the computed value of a property, 2.610 +<p>When a <a class="production css" data-link-type=type href=#url-value title="<url>"><url></a> appears in the computed value of a property, 2.611 it is resolved to an absolute URL, 2.612 as described in the preceding paragraph. 2.613 - The computed value of a URI that the UA cannot resolve to an absolute URI is the specified value.</p> 2.614 + The computed value of a URL that the UA cannot resolve to an absolute URL is the specified value.</p> 2.615 2.616 <div class=example> 2.617 For example, suppose the following rule: 2.618 @@ -666,7 +699,18 @@ 2.619 <p>The same image will be used regardless of the URL of the source document containing the <code><body></code>.</p> 2.620 </div> 2.621 2.622 -<h2 class="heading settled heading" data-level=4 id=numeric-types><span class=secno>4 </span><span class=content> 2.623 +<h4 class="heading settled" data-level=3.4.2 id=url-modifiers><span class=secno>3.4.2 </span><span class=content> 2.624 +URL Modifiers</span><a class=self-link href=#url-modifiers></a></h4> 2.625 + 2.626 +<p>The <span class=css>url()</span> function supports specifying additional <dfn class=css data-dfn-type=type data-export="" id=typedef-url-modifier><url-modifier><a class=self-link href=#typedef-url-modifier></a></dfn>s, 2.627 + which change the meaning or the interpretation of the URL somehow. 2.628 + A <a class="production css" data-link-type=type href=#typedef-url-modifier title="<url-modifier>"><url-modifier></a> is either an <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/mediaqueries-4/#typedef-ident title="<ident>"><ident></a> or a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#function title=function>function</a>.</p> 2.629 + 2.630 +<p>This specification does not define any <a class="production css" data-link-type=type href=#typedef-url-modifier title="<url-modifier>"><url-modifier></a>s, 2.631 + but other specs may do so.</p> 2.632 + 2.633 + 2.634 +<h2 class="heading settled" data-level=4 id=numeric-types><span class=secno>4 </span><span class=content> 2.635 Numeric Data Types</span><a class=self-link href=#numeric-types></a></h2> 2.636 2.637 <p>Properties may restrict numeric values to some range. 2.638 @@ -678,37 +722,37 @@ 2.639 UAs should support reasonably useful ranges and precisions.</p> 2.640 2.641 2.642 -<h3 class="heading settled heading" data-level=4.1 id=integers><span class=secno>4.1 </span><span class=content> 2.643 -Integers: the <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a> type</span><a class=self-link href=#integers></a></h3> 2.644 +<h3 class="heading settled" data-level=4.1 id=integers><span class=secno>4.1 </span><span class=content> 2.645 +Integers: the <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a> type</span><a class=self-link href=#integers></a></h3> 2.646 2.647 -<p>Integer values are denoted by <dfn class=css-code data-dfn-type=type data-export="" id=integer-value><integer><a class=self-link href=#integer-value></a></dfn>. 2.648 - An <dfn data-dfn-type=dfn data-noexport="" id=integer>integer<a class=self-link href=#integer></a></dfn> is one or more decimal digits <span class=css data-link-type=maybe title=0>0</span> through <span class=css data-link-type=maybe title=9>9</span> 2.649 - and corresponds to a subset of the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>"><number-token></a> production 2.650 - in the CSS Syntax Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>. 2.651 - The first digit of an integer may be immediately preceded by <span class=css data-link-type=maybe title=->-</span> or <span class=css data-link-type=maybe title=+>+</span> 2.652 +<p>Integer values are denoted by <dfn class=css data-dfn-type=type data-export="" id=integer-value><integer><a class=self-link href=#integer-value></a></dfn>. 2.653 + An <dfn data-dfn-type=dfn data-noexport="" id=integer>integer<a class=self-link href=#integer></a></dfn> is one or more decimal digits <span class=css>0</span> through <span class=css>9</span> 2.654 + and corresponds to a subset of the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>"><number-token></a> production 2.655 + in the CSS Syntax Module <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a>. 2.656 + The first digit of an integer may be immediately preceded by <span class=css>-</span> or <span class=css>+</span> 2.657 to indicate the integer’s sign.</p> 2.658 2.659 -<h3 class="heading settled heading" data-level=4.2 id=numbers><span class=secno>4.2 </span><span class=content> 2.660 -Real Numbers: the <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> type</span><a class=self-link href=#numbers></a></h3> 2.661 +<h3 class="heading settled" data-level=4.2 id=numbers><span class=secno>4.2 </span><span class=content> 2.662 +Real Numbers: the <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a> type</span><a class=self-link href=#numbers></a></h3> 2.663 2.664 -<p>Number values are denoted by <dfn class=css-code data-dfn-type=type data-export="" id=number-value><number><a class=self-link href=#number-value></a></dfn>. 2.665 - A <dfn data-dfn-type=dfn data-noexport="" id=number>number<a class=self-link href=#number></a></dfn> is either an <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a> 2.666 +<p>Number values are denoted by <dfn class=css data-dfn-type=type data-export="" id=number-value><number><a class=self-link href=#number-value></a></dfn>. 2.667 + A <dfn data-dfn-type=dfn data-noexport="" id=number>number<a class=self-link href=#number></a></dfn> is either an <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a> 2.668 or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits 2.669 and optionally an exponent composed of "e" or "E" and an integer. 2.670 - It corresponds to the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>"><number-token></a> production 2.671 - in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>. 2.672 - As with integers, the first character of a number may be immediately preceded by <span class=css data-link-type=maybe title=->-</span> or <span class=css data-link-type=maybe title=+>+</span> 2.673 + It corresponds to the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>"><number-token></a> production 2.674 + in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a>. 2.675 + As with integers, the first character of a number may be immediately preceded by <span class=css>-</span> or <span class=css>+</span> 2.676 to indicate the number’s sign.</p> 2.677 2.678 -<h3 class="heading settled heading" data-level=4.3 id=percentages><span class=secno>4.3 </span><span class=content> 2.679 -Percentages: the <a class="production css-code" data-link-type=type href=#percentage-value title="<percentage>"><percentage></a> type</span><a class=self-link href=#percentages></a></h3> 2.680 +<h3 class="heading settled" data-level=4.3 id=percentages><span class=secno>4.3 </span><span class=content> 2.681 +Percentages: the <a class="production css" data-link-type=type href=#percentage-value title="<percentage>"><percentage></a> type</span><a class=self-link href=#percentages></a></h3> 2.682 2.683 <p>A <dfn data-dfn-type=dfn data-noexport="" id=percentage>percentage<a class=self-link href=#percentage></a></dfn> value is denoted by 2.684 - <dfn class=css-code data-dfn-type=type data-export="" id=percentage-value><percentage><a class=self-link href=#percentage-value></a></dfn>, 2.685 - and consists of a <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> 2.686 - immediately followed by a percent sign <span class=css data-link-type=maybe title=%>%</span>. 2.687 - It corresponds to the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-percentage-token title="<percentage-token>"><percentage-token></a> production 2.688 - in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>.</p> 2.689 + <dfn class=css data-dfn-type=type data-export="" id=percentage-value><percentage><a class=self-link href=#percentage-value></a></dfn>, 2.690 + and consists of a <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a> 2.691 + immediately followed by a percent sign <span class=css>%</span>. 2.692 + It corresponds to the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-percentage-token title="<percentage-token>"><percentage-token></a> production 2.693 + in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a>.</p> 2.694 2.695 <p>Percentage values are always relative to another value, 2.696 for example a length. 2.697 @@ -716,17 +760,17 @@ 2.698 The value may be that of another property for the same element, 2.699 a property for an ancestor element, 2.700 or a value of the formatting context 2.701 - (e.g., the width of a <i data-link-type=dfn title="containing block">containing block</i>).</p> 2.702 + (e.g., the width of a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-display-3/#containing-block title="containing block">containing block</a>).</p> 2.703 2.704 -<h3 class="heading settled heading" data-level=4.4 id=dimensions><span class=secno>4.4 </span><span class=content> 2.705 +<h3 class="heading settled" data-level=4.4 id=dimensions><span class=secno>4.4 </span><span class=content> 2.706 Numbers with Units: <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a></span><a class=self-link href=#dimensions></a></h3> 2.707 2.708 2.709 -<p>A <dfn data-dfn-type=dfn data-noexport="" id=dimension>dimension<a class=self-link href=#dimension></a></dfn> is a <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> 2.710 +<p>A <dfn data-dfn-type=dfn data-noexport="" id=dimension>dimension<a class=self-link href=#dimension></a></dfn> is a <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a> 2.711 immediately followed by a unit identifier. 2.712 - It corresponds to the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-dimension-token title="<dimension-token>"><dimension-token></a> production 2.713 - in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>. 2.714 - Like keywords, unit identifiers are <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#ascii-case-insensitive title="ascii case-insensitive">ASCII case-insensitive</a>.</p> 2.715 + It corresponds to the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-dimension-token title="<dimension-token>"><dimension-token></a> production 2.716 + in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=CSS3SYN>[CSS3SYN]</a>. 2.717 + Like keywords, unit identifiers are <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#ascii-case-insensitive title="ASCII case-insensitive">ASCII case-insensitive</a>.</p> 2.718 2.719 <p>CSS uses <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> to specify 2.720 distances (<var><length></var>), 2.721 @@ -735,14 +779,14 @@ 2.722 resolutions (<var><resolution></var>), 2.723 and other quantities. 2.724 2.725 -<h2 class="heading settled heading" data-level=5 id=lengths><span class=secno>5 </span><span class=content> 2.726 -Distance Units: the <a class="production css-code" data-link-type=type href=#length-value title="<length>"><length></a> type</span><a class=self-link href=#lengths></a></h2> 2.727 +<h2 class="heading settled" data-level=5 id=lengths><span class=secno>5 </span><span class=content> 2.728 +Distance Units: the <a class="production css" data-link-type=type href=#length-value title="<length>"><length></a> type</span><a class=self-link href=#lengths></a></h2> 2.729 2.730 <p>Lengths refer to distance measurements 2.731 - and are denoted by <dfn class=css-code data-dfn-type=type data-export="" id=length-value><length><a class=self-link href=#length-value></a></dfn> in the property definitions. 2.732 + and are denoted by <dfn class=css data-dfn-type=type data-export="" id=length-value><length><a class=self-link href=#length-value></a></dfn> in the property definitions. 2.733 A length is a <a data-link-type=dfn href=#dimension title=dimension>dimension</a>. 2.734 However, for zero lengths the unit identifier is optional 2.735 - (i.e. can be syntactically represented as the <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> <span class=css data-link-type=maybe title=0>0</span>).</p> 2.736 + (i.e. can be syntactically represented as the <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a> <span class=css>0</span>).</p> 2.737 2.738 <p>Properties may restrict the length value to some range. 2.739 If the value is outside the allowed range, 2.740 @@ -758,7 +802,7 @@ 2.741 2.742 <p>There are two types of length units: <a data-link-type=dfn href=#relative-length title="relative length">relative</a> and <a data-link-type=dfn href=#absolute-length title="absolute length">absolute</a>.</p> 2.743 2.744 -<h3 class="heading settled heading" data-level=5.1 id=relative-lengths><span class=secno>5.1 </span><span class=content> 2.745 +<h3 class="heading settled" data-level=5.1 id=relative-lengths><span class=secno>5.1 </span><span class=content> 2.746 Relative lengths</span><a class=self-link href=#relative-lengths></a></h3> 2.747 2.748 <p><dfn data-dfn-type=dfn data-noexport="" id=relative-length title="relative length">Relative length units<a class=self-link href=#relative-length></a></dfn> specify a length relative to another length. 2.749 @@ -772,21 +816,21 @@ 2.750 <tr><th>unit<th>relative to 2.751 </thead> 2.752 <tbody> 2.753 - <tr><td><a class=css data-link-type=maybe href=#em title=em>em</a> 2.754 + <tr><td><span class=css>em</span> 2.755 <td>font size of the element 2.756 - <tr><td><a class=css data-link-type=maybe href=#ex title=ex>ex</a> 2.757 + <tr><td><span class=css>ex</span> 2.758 <td>x-height of the element’s font 2.759 - <tr><td><a class=css data-link-type=maybe href=#ch title=ch>ch</a> 2.760 + <tr><td><span class=css>ch</span> 2.761 <td>width of the "0" (ZERO, U+0030) glyph in the element’s font 2.762 - <tr><td><a class=css data-link-type=maybe href=#rem title=rem>rem</a> 2.763 + <tr><td><span class=css>rem</span> 2.764 <td>font size of the root element 2.765 - <tr><td><a class=css data-link-type=maybe href=#vw title=vw>vw</a> 2.766 + <tr><td><span class=css>vw</span> 2.767 <td>1% of viewport’s width 2.768 - <tr><td><a class=css data-link-type=maybe href=#vh title=vh>vh</a> 2.769 + <tr><td><span class=css>vh</span> 2.770 <td>1% viewport’s height 2.771 - <tr><td><a class=css data-link-type=maybe href=#vmin title=vmin>vmin</a> 2.772 + <tr><td><span class=css>vmin</span> 2.773 <td>1% of viewport’s smaller dimension 2.774 - <tr><td><a class=css data-link-type=maybe href=#vmax title=vmax>vmax</a> 2.775 + <tr><td><span class=css>vmax</span> 2.776 <td>1% of viewport’s larger dimension 2.777 </tbody> 2.778 </table> 2.779 @@ -794,10 +838,10 @@ 2.780 <p>Child elements do not inherit the relative values as specified for their parent; 2.781 they inherit the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-cascade-3/#computed-value title="computed values">computed values</a>.</p> 2.782 2.783 -<h4 class="heading settled heading" data-level=5.1.1 id=font-relative-lengths><span class=secno>5.1.1 </span><span class=content> 2.784 -Font-relative lengths: the <a class=css data-link-type=maybe href=#em title=em>em</a>, <a class=css data-link-type=maybe href=#ex title=ex>ex</a>, <a class=css data-link-type=maybe href=#ch title=ch>ch</a>, <a class=css data-link-type=maybe href=#rem title=rem>rem</a> units</span><a class=self-link href=#font-relative-lengths></a></h4> 2.785 +<h4 class="heading settled" data-level=5.1.1 id=font-relative-lengths><span class=secno>5.1.1 </span><span class=content> 2.786 +Font-relative lengths: the <span class=css>em</span>, <span class=css>ex</span>, <span class=css>ch</span>, <span class=css>rem</span> units</span><a class=self-link href=#font-relative-lengths></a></h4> 2.787 2.788 -<p>Aside from <a class=css data-link-type=maybe href=#rem title=rem>rem</a> (which refers to the font-size of the root element), 2.789 +<p>Aside from <span class=css>rem</span> (which refers to the font-size of the root element), 2.790 the font-relative lengths refer to the font metrics of the element on which they are used. 2.791 The exception is when they occur in the value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-size title=font-size>font-size</a> property itself, 2.792 in which case they refer to the computed font metrics of the parent element 2.793 @@ -826,13 +870,13 @@ 2.794 2.795 <dt><dfn data-dfn-type=dfn data-export="" id=ex title=ex>ex unit<a class=self-link href=#ex></a></dfn> 2.796 <dd> 2.797 - Equal to the used x-height of the <a href=http://www.w3.org/TR/css3-fonts/#first-available-font>first available font</a>. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-fonts title=biblio-css3-fonts>[CSS3-FONTS]</a> 2.798 + Equal to the used x-height of the <a href=http://www.w3.org/TR/css3-fonts/#first-available-font>first available font</a>. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-fonts title=CSS3-FONTS>[CSS3-FONTS]</a> 2.799 The x-height is so called because it is often equal to the height of the lowercase "x". 2.800 - However, an <a class=css data-link-type=maybe href=#ex title=ex>ex</a> is defined even for fonts that do not contain an "x". 2.801 + However, an <span class=css>ex</span> is defined even for fonts that do not contain an "x". 2.802 The x-height of a font can be found in different ways. Some fonts 2.803 contain reliable metrics for the x-height. If reliable font metrics 2.804 are not available, UAs may determine the x-height from the height 2.805 - of a lowercase glyph. One possible heuristic is to look at how far 2.806 + of a lowercase glyph. One possible heURLstic is to look at how far 2.807 the glyph for the lowercase "o" extends below the baseline, and 2.808 subtract that value from the top of its bounding box. In the cases 2.809 where it is impossible or impractical to determine the x-height, 2.810 @@ -849,22 +893,22 @@ 2.811 <dd> 2.812 Equal to the computed value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-size title=font-size>font-size</a> on the root element. 2.813 When specified on the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-size title=font-size>font-size</a> property of the root element, 2.814 - the <a class=css data-link-type=maybe href=#rem title=rem>rem</a> units refer to the property’s <em>initial value</em>. 2.815 + the <span class=css>rem</span> units refer to the property’s <em>initial value</em>. 2.816 </dl> 2.817 2.818 -<h4 class="heading settled heading" data-level=5.1.2 id=viewport-relative-lengths><span class=secno>5.1.2 </span><span class=content> 2.819 -Viewport-percentage lengths: the <a class=css data-link-type=maybe href=#vw title=vw>vw</a>, <a class=css data-link-type=maybe href=#vh title=vh>vh</a>, <a class=css data-link-type=maybe href=#vmin title=vmin>vmin</a>, <a class=css data-link-type=maybe href=#vmax title=vmax>vmax</a> units</span><a class=self-link href=#viewport-relative-lengths></a></h4> 2.820 +<h4 class="heading settled" data-level=5.1.2 id=viewport-relative-lengths><span class=secno>5.1.2 </span><span class=content> 2.821 +Viewport-percentage lengths: the <span class=css>vw</span>, <span class=css>vh</span>, <span class=css>vmin</span>, <span class=css>vmax</span> units</span><a class=self-link href=#viewport-relative-lengths></a></h4> 2.822 2.823 <p>The viewport-percentage lengths are relative to the size of the 2.824 <a href=http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>initial containing block</a>. 2.825 When the height or width of the initial containing block is changed, 2.826 they are scaled accordingly. 2.827 - However, when the value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> on the root element is <span class=css data-link-type=maybe title=auto>auto</span>, 2.828 + However, when the value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> on the root element is <span class=css>auto</span>, 2.829 any scroll bars are assumed not to exist. 2.830 <span class=note>Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.</span></p> 2.831 2.832 <p>For paged media, the exact definition of the viewport-percentage lengths 2.833 - is deferred to <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3page title=biblio-css3page>[CSS3PAGE]</a>.</p> 2.834 + is deferred to <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3page title=CSS3PAGE>[CSS3PAGE]</a>.</p> 2.835 2.836 <dl data-export=""> 2.837 <dt><dfn data-dfn-type=dfn data-export="" id=vw title=vw>vw unit<a class=self-link href=#vw></a></dfn> 2.838 @@ -885,22 +929,22 @@ 2.839 2.840 <dt><dfn data-dfn-type=dfn data-export="" id=vmin title=vmin>vmin unit<a class=self-link href=#vmin></a></dfn> 2.841 <dd> 2.842 - Equal to the smaller of <a class=css data-link-type=maybe href=#vw title=vw>vw</a> or <a class=css data-link-type=maybe href=#vh title=vh>vh</a>. 2.843 + Equal to the smaller of <span class=css>vw</span> or <span class=css>vh</span>. 2.844 2.845 <dt><dfn data-dfn-type=dfn data-export="" id=vmax title=vmax>vmax unit<a class=self-link href=#vmax></a></dfn> 2.846 <dd> 2.847 - Equal to the larger of <a class=css data-link-type=maybe href=#vw title=vw>vw</a> or <a class=css data-link-type=maybe href=#vh title=vh>vh</a>. 2.848 + Equal to the larger of <span class=css>vw</span> or <span class=css>vh</span>. 2.849 </dl> 2.850 2.851 -<h3 class="heading settled heading" data-level=5.2 id=absolute-lengths><span class=secno>5.2 </span><span class=content> 2.852 -Absolute lengths: the <a class=css data-link-type=maybe href=#cm title=cm>cm</a>, <a class=css data-link-type=maybe href=#mm title=mm>mm</a>, <a class=css data-link-type=maybe href=#q title=q>q</a>, <a class=css data-link-type=maybe href=#in title=in>in</a>, <a class=css data-link-type=maybe href=#pt title=pt>pt</a>, <a class=css data-link-type=maybe href=#pc title=pc>pc</a>, <a class=css data-link-type=maybe href=#px title=px>px</a> units</span><a class=self-link href=#absolute-lengths></a></h3> 2.853 +<h3 class="heading settled" data-level=5.2 id=absolute-lengths><span class=secno>5.2 </span><span class=content> 2.854 +Absolute lengths: the <span class=css>cm</span>, <span class=css>mm</span>, <span class=css>q</span>, <span class=css>in</span>, <span class=css>pt</span>, <span class=css>pc</span>, <span class=css>px</span> units</span><a class=self-link href=#absolute-lengths></a></h3> 2.855 2.856 <p>The <dfn data-dfn-type=dfn data-noexport="" id=absolute-length title="absolute length">absolute length units<a class=self-link href=#absolute-length></a></dfn> are fixed in relation to each other 2.857 and anchored to some physical measurement. 2.858 They are mainly useful when the output environment is known. 2.859 The absolute units consist of 2.860 - the <dfn data-dfn-type=dfn data-noexport="" id=physical-units>physical units<a class=self-link href=#physical-units></a></dfn> (<a class=css data-link-type=maybe href=#in title=in>in</a>, <a class=css data-link-type=maybe href=#cm title=cm>cm</a>, <a class=css data-link-type=maybe href=#mm title=mm>mm</a>, <a class=css data-link-type=maybe href=#pt title=pt>pt</a>, <a class=css data-link-type=maybe href=#pc title=pc>pc</a>, <a class=css data-link-type=maybe href=#q title=q>q</a>) 2.861 - and the <dfn data-dfn-type=dfn data-noexport="" id=visual-angle-unit>visual angle unit<a class=self-link href=#visual-angle-unit></a></dfn> (<a class=css data-link-type=maybe href=#px title=px>px</a>):</p> 2.862 + the <dfn data-dfn-type=dfn data-noexport="" id=physical-units>physical units<a class=self-link href=#physical-units></a></dfn> (<span class=css>in</span>, <span class=css>cm</span>, <span class=css>mm</span>, <span class=css>pt</span>, <span class=css>pc</span>, <span class=css>q</span>) 2.863 + and the <dfn data-dfn-type=dfn data-noexport="" id=visual-angle-unit>visual angle unit<a class=self-link href=#visual-angle-unit></a></dfn> (<span class=css>px</span>):</p> 2.864 2.865 <table class=data data-export=""> 2.866 <thead> 2.867 @@ -1015,13 +1059,13 @@ 2.868 <figcaption>Showing that more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a low-res one</figcaption> 2.869 </figure> 2.870 2.871 -<h2 class="heading settled heading" data-level=6 id=other-units><span class=secno>6 </span><span class=content> 2.872 +<h2 class="heading settled" data-level=6 id=other-units><span class=secno>6 </span><span class=content> 2.873 Other Quantities</span><a class=self-link href=#other-units></a></h2> 2.874 2.875 -<h3 class="heading settled heading" data-level=6.1 id=angles><span class=secno>6.1 </span><span class=content> 2.876 -Angle Units: the <a class="production css-code" data-link-type=type href=#angle-value title="<angle>"><angle></a> type and <a class=css data-link-type=maybe href=#deg title=deg>deg</a>, <a class=css data-link-type=maybe href=#grad title=grad>grad</a>, <a class=css data-link-type=maybe href=#rad title=rad>rad</a>, <a class=css data-link-type=maybe href=#turn title=turn>turn</a> units</span><a class=self-link href=#angles></a></h3> 2.877 +<h3 class="heading settled" data-level=6.1 id=angles><span class=secno>6.1 </span><span class=content> 2.878 +Angle Units: the <a class="production css" data-link-type=type href=#angle-value title="<angle>"><angle></a> type and <span class=css>deg</span>, <span class=css>grad</span>, <span class=css>rad</span>, <span class=css>turn</span> units</span><a class=self-link href=#angles></a></h3> 2.879 2.880 -<p>Angle values are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css-code data-dfn-type=type data-export="" id=angle-value><angle><a class=self-link href=#angle-value></a></dfn>. 2.881 +<p>Angle values are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css data-dfn-type=type data-export="" id=angle-value><angle><a class=self-link href=#angle-value></a></dfn>. 2.882 The angle unit identifiers are:</p> 2.883 2.884 <dl data-export=""> 2.885 @@ -1043,13 +1087,13 @@ 2.886 Turns. There is 1 turn in a full circle. 2.887 </dl> 2.888 2.889 -<p>For example, a right angle is <span class=css data-link-type=maybe title=90deg>90deg</span> or <span class=css data-link-type=maybe title=100grad>100grad</span> or <span class=css data-link-type=maybe title=0.25turn>0.25turn</span> or 2.890 - approximately <span class=css data-link-type=maybe title=1.57rad>1.57rad</span>.</p> 2.891 +<p>For example, a right angle is <span class=css>90deg</span> or <span class=css>100grad</span> or <span class=css>0.25turn</span> or 2.892 + approximately <span class=css>1.57rad</span>.</p> 2.893 2.894 -<h3 class="heading settled heading" data-level=6.2 id=time><span class=secno>6.2 </span><span class=content> 2.895 -Duration Units: the <a class="production css-code" data-link-type=type href=#time-value title="<time>"><time></a> type and <a class=css data-link-type=maybe href=#s title=s>s</a>, <a class=css data-link-type=maybe href=#ms title=ms>ms</a> units</span><a class=self-link href=#time></a></h3> 2.896 +<h3 class="heading settled" data-level=6.2 id=time><span class=secno>6.2 </span><span class=content> 2.897 +Duration Units: the <a class="production css" data-link-type=type href=#time-value title="<time>"><time></a> type and <span class=css>s</span>, <span class=css>ms</span> units</span><a class=self-link href=#time></a></h3> 2.898 2.899 -<p>Time values are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css-code data-dfn-type=type data-export="" id=time-value><time><a class=self-link href=#time-value></a></dfn>. 2.900 +<p>Time values are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css data-dfn-type=type data-export="" id=time-value><time><a class=self-link href=#time-value></a></dfn>. 2.901 The time unit identifiers are:</p> 2.902 2.903 <dl data-export=""> 2.904 @@ -1063,10 +1107,10 @@ 2.905 If the value is outside the allowed range, 2.906 the declaration is invalid and must be <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignored</a>.</p> 2.907 2.908 -<h3 class="heading settled heading" data-level=6.3 id=frequency><span class=secno>6.3 </span><span class=content> 2.909 -Frequency Units: the <a class="production css-code" data-link-type=type href=#frequency-value title="<frequency>"><frequency></a> type and <a class=css data-link-type=maybe href=#hz title=hz>Hz</a>, <a class=css data-link-type=maybe href=#khz title=khz>kHz</a> units</span><a class=self-link href=#frequency></a></h3> 2.910 +<h3 class="heading settled" data-level=6.3 id=frequency><span class=secno>6.3 </span><span class=content> 2.911 +Frequency Units: the <a class="production css" data-link-type=type href=#frequency-value title="<frequency>"><frequency></a> type and <span class=css>Hz</span>, <span class=css>kHz</span> units</span><a class=self-link href=#frequency></a></h3> 2.912 2.913 -<p>Frequency values are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css-code data-dfn-type=type data-export="" id=frequency-value><frequency><a class=self-link href=#frequency-value></a></dfn>. 2.914 +<p>Frequency values are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css data-dfn-type=type data-export="" id=frequency-value><frequency><a class=self-link href=#frequency-value></a></dfn>. 2.915 The frequency unit identifiers are:</p> 2.916 2.917 <dl data-export=""> 2.918 @@ -1079,10 +1123,10 @@ 2.919 <p>For example, when representing sound pitches, 200Hz (or 200hz) 2.920 is a bass sound, and 6kHz (or 6khz) is a treble sound.</p> 2.921 2.922 -<h3 class="heading settled heading" data-level=6.4 id=resolution><span class=secno>6.4 </span><span class=content> 2.923 -Resolution Units: the <a class="production css-code" data-link-type=type href=#resolution-value title="<resolution>"><resolution></a> type and <a class=css data-link-type=maybe href=#dpi title=dpi>dpi</a>, <a class=css data-link-type=maybe href=#dpcm title=dpcm>dpcm</a>, <a class=css data-link-type=maybe href=#dppx title=dppx>dppx</a> units</span><a class=self-link href=#resolution></a></h3> 2.924 +<h3 class="heading settled" data-level=6.4 id=resolution><span class=secno>6.4 </span><span class=content> 2.925 +Resolution Units: the <a class="production css" data-link-type=type href=#resolution-value title="<resolution>"><resolution></a> type and <span class=css>dpi</span>, <span class=css>dpcm</span>, <span class=css>dppx</span> units</span><a class=self-link href=#resolution></a></h3> 2.926 2.927 -<p>Resolution units are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css-code data-dfn-type=type data-export="" id=resolution-value><resolution><a class=self-link href=#resolution-value></a></dfn>. 2.928 +<p>Resolution units are <a data-link-type=dfn href=#dimension title=dimensions>dimensions</a> denoted by <dfn class=css data-dfn-type=type data-export="" id=resolution-value><resolution><a class=self-link href=#resolution-value></a></dfn>. 2.929 The resolution unit identifiers are:</p> 2.930 2.931 <dl data-export=""> 2.932 @@ -1093,70 +1137,70 @@ 2.933 <dd>dots per centimeter 2.934 2.935 <dt><dfn data-dfn-type=dfn data-export="" id=dppx>dppx<a class=self-link href=#dppx></a></dfn> 2.936 - <dd>dots per <a class=css data-link-type=maybe href=#px title=px>px</a> unit 2.937 + <dd>dots per <span class=css>px</span> unit 2.938 </dl> 2.939 2.940 -<p>The <a class="production css-code" data-link-type=type href=#resolution-value title="<resolution>"><resolution></a> unit represents the size of a single "dot" in a graphical representation 2.941 - by indicating how many of these dots fit in a CSS <a class=css data-link-type=maybe href=#in title=in>in</a>, <a class=css data-link-type=maybe href=#cm title=cm>cm</a>, or <a class=css data-link-type=maybe href=#px title=px>px</a>. 2.942 - For uses, see e.g. the <span class=css data-link-type=maybe title=resolution>resolution</span> media query in <a data-biblio-type=informative data-link-type=biblio href=#biblio-mediaq title=biblio-mediaq>[MEDIAQ]</a> 2.943 - or the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-images-3/#image-resolution title=image-resolution>image-resolution</a> property defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-images title=biblio-css3-images>[CSS3-IMAGES]</a>.</p> 2.944 +<p>The <a class="production css" data-link-type=type href=#resolution-value title="<resolution>"><resolution></a> unit represents the size of a single "dot" in a graphical representation 2.945 + by indicating how many of these dots fit in a CSS <span class=css>in</span>, <span class=css>cm</span>, or <span class=css>px</span>. 2.946 + For uses, see e.g. the <span class=css>resolution</span> media query in <a data-biblio-type=informative data-link-type=biblio href=#biblio-mediaq title=MEDIAQ>[MEDIAQ]</a> 2.947 + or the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-images-3/#image-resolution title=image-resolution>image-resolution</a> property defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-images title=CSS3-IMAGES>[CSS3-IMAGES]</a>.</p> 2.948 2.949 -<p class=note>Note: Note that due to the 1:96 fixed ratio of CSS <a class=css data-link-type=maybe href=#in title=in>in</a> to CSS <a class=css data-link-type=maybe href=#px title=px>px</a>, 2.950 - <span class=css data-link-type=maybe title=1dppx>1dppx</span> is equivalent to <span class=css data-link-type=maybe title=96dpi>96dpi</span>. 2.951 +<p class=note>Note: Note that due to the 1:96 fixed ratio of CSS <span class=css>in</span> to CSS <span class=css>px</span>, 2.952 + <span class=css>1dppx</span> is equivalent to <span class=css>96dpi</span>. 2.953 This corresponds to the default resolution of images displayed in CSS: see <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-images-3/#image-resolution title=image-resolution>image-resolution</a>.</p> 2.954 2.955 <div class=example> 2.956 - The following @media rule uses Media Queries <a data-biblio-type=informative data-link-type=biblio href=#biblio-mediaq title=biblio-mediaq>[MEDIAQ]</a> 2.957 - to assign some special style rules to devices that use two or more device pixels per CSS <a class=css data-link-type=maybe href=#px title=px>px</a> unit: 2.958 + The following @media rule uses Media Queries <a data-biblio-type=informative data-link-type=biblio href=#biblio-mediaq title=MEDIAQ>[MEDIAQ]</a> 2.959 + to assign some special style rules to devices that use two or more device pixels per CSS <span class=css>px</span> unit: 2.960 2.961 <pre>@media (min-resolution: 2dppx) { ... }</pre> 2.962 </div> 2.963 2.964 2.965 -<h2 class="heading settled heading" data-level=7 id=defined-elsewhere><span class=secno>7 </span><span class=content> 2.966 +<h2 class="heading settled" data-level=7 id=defined-elsewhere><span class=secno>7 </span><span class=content> 2.967 Data Types Defined Elsewhere</span><a class=self-link href=#defined-elsewhere></a></h2> 2.968 2.969 <p>Some data types are defined in their own modules. 2.970 This example talks about some of the most common ones 2.971 used across several specifications.</p> 2.972 2.973 -<h3 class="heading settled heading" data-level=7.1 id=colors><span class=secno>7.1 </span><span class=content> 2.974 -Colors: the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a> type</span><a class=self-link href=#colors></a></h3> 2.975 +<h3 class="heading settled" data-level=7.1 id=colors><span class=secno>7.1 </span><span class=content> 2.976 +Colors: the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a> type</span><a class=self-link href=#colors></a></h3> 2.977 2.978 -<p>The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a> data type is defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3color title=biblio-css3color>[CSS3COLOR]</a>. 2.979 - UAs that support CSS Color Level 3 or its successor must interpret <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a> as defined therein.</p> 2.980 +<p>The <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a> data type is defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3color title=CSS3COLOR>[CSS3COLOR]</a>. 2.981 + UAs that support CSS Color Level 3 or its successor must interpret <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a> as defined therein.</p> 2.982 2.983 -<h3 class="heading settled heading" data-level=7.2 id=images><span class=secno>7.2 </span><span class=content> 2.984 -Images: the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>"><image></a> type</span><a class=self-link href=#images></a></h3> 2.985 +<h3 class="heading settled" data-level=7.2 id=images><span class=secno>7.2 </span><span class=content> 2.986 +Images: the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>"><image></a> type</span><a class=self-link href=#images></a></h3> 2.987 2.988 -<p>The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>"><image></a> data type is defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-images title=biblio-css3-images>[CSS3-IMAGES]</a>. 2.989 - UAs that support CSS Image Values Level 3 or its successor must interpret <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>"><image></a> as defined therein.</p> 2.990 +<p>The <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>"><image></a> data type is defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-images title=CSS3-IMAGES>[CSS3-IMAGES]</a>. 2.991 + UAs that support CSS Image Values Level 3 or its successor must interpret <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-images-3/#image-type title="<image>"><image></a> as defined therein.</p> 2.992 2.993 -<h3 class="heading settled heading" data-level=7.3 id=position><span class=secno>7.3 </span><span class=content> 2.994 -2D Positioning: the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#position title="<position>"><position></a> type</span><a class=self-link href=#position></a></h3> 2.995 +<h3 class="heading settled" data-level=7.3 id=position><span class=secno>7.3 </span><span class=content> 2.996 +2D Positioning: the <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#position title="<position>"><position></a> type</span><a class=self-link href=#position></a></h3> 2.997 2.998 -<p>The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#position title="<position>"><position></a> data type is defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3bg title=biblio-css3bg>[CSS3BG]</a>. 2.999 - UAs that support CSS Backgrounds & Borders Level 3 or its successor must interpret <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#position title="<position>"><position></a> as defined therein.</p> 2.1000 +<p>The <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#position title="<position>"><position></a> data type is defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3bg title=CSS3BG>[CSS3BG]</a>. 2.1001 + UAs that support CSS Backgrounds & Borders Level 3 or its successor must interpret <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-backgrounds-3/#position title="<position>"><position></a> as defined therein.</p> 2.1002 2.1003 -<h2 class="heading settled heading" data-level=8 id=functional-notation><span class=secno>8 </span><span class=content> 2.1004 +<h2 class="heading settled" data-level=8 id=functional-notation><span class=secno>8 </span><span class=content> 2.1005 Functional Notations</span><a class=self-link href=#functional-notation></a></h2> 2.1006 2.1007 -<p>A <dfn data-dfn-type=dfn data-noexport="" id=functional-notation0>functional notation<a class=self-link href=#functional-notation0></a></dfn> is a type of component value 2.1008 - that can represent more complex types or invoke special processing. 2.1009 - The syntax starts with the name of the function 2.1010 - immediately followed by a left parenthesis 2.1011 - (i.e. a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-function-token title="<function-token>"><function-token></a>) 2.1012 - followed by the argument(s) to the notation 2.1013 - followed by a right parenthesis. 2.1014 - White space is allowed, but optional, immediately inside the parentheses. 2.1015 - Functions can take multiple arguments, 2.1016 - which are formatted similarly to a CSS property value.</p> 2.1017 +<p>A <dfn data-dfn-type=dfn data-noexport="" id=functional-notation>functional notation<a class=self-link href=#functional-notation></a></dfn> is a type of component value 2.1018 + that can represent more complex types or invoke special processing. 2.1019 + The syntax starts with the name of the function 2.1020 + immediately followed by a left parenthesis 2.1021 + (i.e. a <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-function-token title="<function-token>"><function-token></a>) 2.1022 + followed by the argument(s) to the notation 2.1023 + followed by a right parenthesis. 2.1024 + White space is allowed, but optional, immediately inside the parentheses. 2.1025 + Functions can take multiple arguments, 2.1026 + which are formatted similarly to a CSS property value.</p> 2.1027 2.1028 -<p>Some legacy functional notations, such as <span class=css data-link-type=maybe title=rgba()>rgba()</span>, use commas unnecessarily, 2.1029 - but generally commas are only used to separate items in a list, 2.1030 - or pieces of a grammar that would be ambiguous otherwise. 2.1031 - If a comma is used to separate arguments, 2.1032 - whitespace is optional before and after the comma.</p> 2.1033 +<p>Some legacy functional notations, such as <span class=css>rgba()</span>, use commas unnecessarily, 2.1034 + but generally commas are only used to separate items in a list, 2.1035 + or pieces of a grammar that would be ambiguous otherwise. 2.1036 + If a comma is used to separate arguments, 2.1037 + whitespace is optional before and after the comma.</p> 2.1038 2.1039 <div class=example> 2.1040 <pre>background: url(http://www.example.org/image); 2.1041 @@ -1166,25 +1210,25 @@ 2.1042 </pre> 2.1043 </div> 2.1044 2.1045 -<h3 class="heading settled heading" data-level=8.1 id=calc-notation><span class=secno>8.1 </span><span class=content> 2.1046 +<h3 class="heading settled" data-level=8.1 id=calc-notation><span class=secno>8.1 </span><span class=content> 2.1047 Mathematical Expressions: <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a></span><a class=self-link href=#calc-notation></a></h3> 2.1048 2.1049 -<p>The <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-calc>calc()<a class=self-link href=#funcdef-calc></a></dfn> function allows mathematical expressions 2.1050 - with addition (<span class=css data-link-type=maybe title=+>+</span>), subtraction (<span class=css data-link-type=maybe title=->-</span>), multiplication (<span class=css data-link-type=maybe title=*>*</span>), and division (<span class=css data-link-type=maybe title=/>/</span>) 2.1051 +<p>The <dfn class=css data-dfn-type=function data-export="" id=funcdef-calc>calc()<a class=self-link href=#funcdef-calc></a></dfn> function allows mathematical expressions 2.1052 + with addition (<span class=css>+</span>), subtraction (<span class=css>-</span>), multiplication (<span class=css>*</span>), and division (<span class=css>/</span>) 2.1053 to be used as component values. 2.1054 The <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expression represents the result of the mathematical calculation it contains, 2.1055 using standard operator precedence rules. 2.1056 It can be used wherever 2.1057 - <a class="production css-code" data-link-type=type href=#length-value title="<length>"><length></a>, 2.1058 - <a class="production css-code" data-link-type=type href=#frequency-value title="<frequency>"><frequency></a>, 2.1059 - <a class="production css-code" data-link-type=type href=#angle-value title="<angle>"><angle></a>, 2.1060 - <a class="production css-code" data-link-type=type href=#time-value title="<time>"><time></a>, 2.1061 - <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a>, or 2.1062 - <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a> 2.1063 + <a class="production css" data-link-type=type href=#length-value title="<length>"><length></a>, 2.1064 + <a class="production css" data-link-type=type href=#frequency-value title="<frequency>"><frequency></a>, 2.1065 + <a class="production css" data-link-type=type href=#angle-value title="<angle>"><angle></a>, 2.1066 + <a class="production css" data-link-type=type href=#time-value title="<time>"><time></a>, 2.1067 + <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a>, or 2.1068 + <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a> 2.1069 values are allowed. 2.1070 Components of a <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expression can be literal values, 2.1071 <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> or <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expressions, 2.1072 - or <a class="production css-code" data-link-type=type href=#percentage-value title="<percentage>"><percentage></a> values that resolve to one of the preceding types.</p> 2.1073 + or <a class="production css" data-link-type=type href=#percentage-value title="<percentage>"><percentage></a> values that resolve to one of the preceding types.</p> 2.1074 2.1075 <div class=example> 2.1076 <pre>section { 2.1077 @@ -1204,14 +1248,14 @@ 2.1078 2.1079 <div class=example> 2.1080 The following sets the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-size title=font-size>font-size</a> so that exactly 40em fits within the viewport, 2.1081 - ensuring that roughly the same amount of text always fills the screen no matter the screen size. 2.1082 + ensURLng that roughly the same amount of text always fills the screen no matter the screen size. 2.1083 2.1084 <pre>:root { 2.1085 font-size: calc(100vw / 40); 2.1086 } 2.1087 </pre> 2.1088 2.1089 -<p>If the rest of the design is specified using the <a class=css data-link-type=maybe href=#rem title=rem>rem</a> unit, 2.1090 +<p>If the rest of the design is specified using the <span class=css>rem</span> unit, 2.1091 the entire layout will scale to match the viewport width.</p> 2.1092 </div> 2.1093 2.1094 @@ -1240,21 +1284,21 @@ 2.1095 </div> 2.1096 2.1097 2.1098 -<h4 class="heading settled heading" data-level=8.1.1 id=calc-syntax><span class=secno>8.1.1 </span><span class=content> 2.1099 +<h4 class="heading settled" data-level=8.1.1 id=calc-syntax><span class=secno>8.1.1 </span><span class=content> 2.1100 Syntax</span><a class=self-link href=#calc-syntax></a></h4> 2.1101 2.1102 <p>The syntax of a <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> function is:</p> 2.1103 2.1104 - <pre class=prod><a class="production css-code" data-link-type=function href=#funcdef-calc title=calc()><calc()></a> = calc( <a class="production css-code" data-link-type=type href=#typedef-calc-sum title="<calc-sum>"><calc-sum></a> ) 2.1105 -<dfn class=css-code data-dfn-type=type data-export="" id=typedef-calc-sum><calc-sum><a class=self-link href=#typedef-calc-sum></a></dfn> = <a class="production css-code" data-link-type=type href=#typedef-calc-product title="<calc-product>"><calc-product></a> [ [ '<a class=prod-punc data-link-type=grammar href=#mult-one-plus title=+>+</a>' <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> '-' ] <a class="production css-code" data-link-type=type href=#typedef-calc-product title="<calc-product>"><calc-product></a> ]<a class=prod-punc data-link-type=grammar href=#mult-zero-plus title=*>*</a> 2.1106 -<dfn class=css-code data-dfn-type=type data-export="" id=typedef-calc-product><calc-product><a class=self-link href=#typedef-calc-product></a></dfn> = <a class="production css-code" data-link-type=type href=#typedef-calc-value title="<calc-value>"><calc-value></a> [ '<a class=prod-punc data-link-type=grammar href=#mult-zero-plus title=*>*</a>' <a class="production css-code" data-link-type=type href=#typedef-calc-value title="<calc-value>"><calc-value></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> '/' <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> ]<a class=prod-punc data-link-type=grammar href=#mult-zero-plus title=*>*</a> 2.1107 -<dfn class=css-code data-dfn-type=type data-export="" id=typedef-calc-value><calc-value><a class=self-link href=#typedef-calc-value></a></dfn> = <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> <a class="production css-code" data-link-type=type href=#typedef-dimension title="<dimension>"><dimension></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> <a class="production css-code" data-link-type=type href=#percentage-value title="<percentage>"><percentage></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> ( <a class="production css-code" data-link-type=type href=#typedef-calc-sum title="<calc-sum>"><calc-sum></a> ) 2.1108 + <pre class=prod><a class=production data-link-type=function href=#funcdef-calc title=calc()><calc()></a> = calc( <a class=production data-link-type=type href=#typedef-calc-sum title="<calc-sum>"><calc-sum></a> ) 2.1109 +<dfn data-dfn-type=type data-export="" id=typedef-calc-sum><calc-sum><a class=self-link href=#typedef-calc-sum></a></dfn> = <a class=production data-link-type=type href=#typedef-calc-product title="<calc-product>"><calc-product></a> [ [ '<a class=prod-punc data-link-type=grammar href=#mult-one-plus title=+>+</a>' <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> '-' ] <a class=production data-link-type=type href=#typedef-calc-product title="<calc-product>"><calc-product></a> ]<a class=prod-punc data-link-type=grammar href=#mult-zero-plus title=*>*</a> 2.1110 +<dfn data-dfn-type=type data-export="" id=typedef-calc-product><calc-product><a class=self-link href=#typedef-calc-product></a></dfn> = <a class=production data-link-type=type href=#typedef-calc-value title="<calc-value>"><calc-value></a> [ '<a class=prod-punc data-link-type=grammar href=#mult-zero-plus title=*>*</a>' <a class=production data-link-type=type href=#typedef-calc-value title="<calc-value>"><calc-value></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> '/' <a class=production data-link-type=type href=#number-value title="<number>"><number></a> ]<a class=prod-punc data-link-type=grammar href=#mult-zero-plus title=*>*</a> 2.1111 +<dfn data-dfn-type=type data-export="" id=typedef-calc-value><calc-value><a class=self-link href=#typedef-calc-value></a></dfn> = <a class=production data-link-type=type href=#number-value title="<number>"><number></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> <a class=production data-link-type=type href=#typedef-dimension title="<dimension>"><dimension></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> <a class=production data-link-type=type href=#percentage-value title="<percentage>"><percentage></a> <a class=prod-punc data-link-type=grammar href=#comb-one title=|>|</a> ( <a class=production data-link-type=type href=#typedef-calc-sum title="<calc-sum>"><calc-sum></a> ) 2.1112 </pre> 2.1113 2.1114 - <p data-noexport="">Where a <dfn class=css-code data-dfn-type=type data-noexport="" id=typedef-dimension><dimension><a class=self-link href=#typedef-dimension></a></dfn> is a <a data-link-type=dfn href=#dimension title=dimension>dimension</a>. 2.1115 + <p data-noexport="">Where a <dfn class=css data-dfn-type=type data-noexport="" id=typedef-dimension><dimension><a class=self-link href=#typedef-dimension></a></dfn> is a <a data-link-type=dfn href=#dimension title=dimension>dimension</a>. 2.1116 2.1117 -<p>In addition, whitespace is required on both sides of the <span class=css data-link-type=maybe title=+>+</span> and <span class=css data-link-type=maybe title=->-</span> operators. 2.1118 - (The <span class=css data-link-type=maybe title=*>*</span> and <span class=css data-link-type=maybe title=/>/</span> operaters can be used without whitespace around them.)</p> 2.1119 +<p>In addition, whitespace is required on both sides of the <span class=css>+</span> and <span class=css>-</span> operators. 2.1120 + (The <span class=css>*</span> and <span class=css>/</span> operaters can be used without whitespace around them.)</p> 2.1121 2.1122 <p>UAs must support <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expressions of at least 20 terms, 2.1123 where each <code>NUMBER</code>, <code>DIMENSION</code>, or <code>PERCENTAGE</code> is a term. 2.1124 @@ -1262,26 +1306,26 @@ 2.1125 it must be treated as if it were invalid.</p> 2.1126 2.1127 2.1128 -<h4 class="heading settled heading" data-level=8.1.2 id=calc-type-checking><span class=secno>8.1.2 </span><span class=content> 2.1129 +<h4 class="heading settled" data-level=8.1.2 id=calc-type-checking><span class=secno>8.1.2 </span><span class=content> 2.1130 Type Checking</span><a class=self-link href=#calc-type-checking></a></h4> 2.1131 2.1132 <p>A math expression has a <dfn data-dfn-type=dfn data-noexport="" id=resolved-type>resolved type<a class=self-link href=#resolved-type></a></dfn>, which is one of 2.1133 - <a class="production css-code" data-link-type=type href=#length-value title="<length>"><length></a>, 2.1134 - <a class="production css-code" data-link-type=type href=#frequency-value title="<frequency>"><frequency></a>, 2.1135 - <a class="production css-code" data-link-type=type href=#angle-value title="<angle>"><angle></a>, 2.1136 - <a class="production css-code" data-link-type=type href=#time-value title="<time>"><time></a>, 2.1137 - <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a>, or 2.1138 - <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1139 + <a class="production css" data-link-type=type href=#length-value title="<length>"><length></a>, 2.1140 + <a class="production css" data-link-type=type href=#frequency-value title="<frequency>"><frequency></a>, 2.1141 + <a class="production css" data-link-type=type href=#angle-value title="<angle>"><angle></a>, 2.1142 + <a class="production css" data-link-type=type href=#time-value title="<time>"><time></a>, 2.1143 + <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a>, or 2.1144 + <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1145 The <a data-link-type=dfn href=#resolved-type title="resolved type">resolved type</a> must be valid for where the expression is placed; 2.1146 otherwise, the expression is invalid. 2.1147 The <a data-link-type=dfn href=#resolved-type title="resolved type">resolved type</a> of the expression is determined by the types of the values it contains. 2.1148 - <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>"><number-token></a>s are of type <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> or <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1149 - A <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-dimension-token title="<dimension-token>"><dimension-token></a>’s type is given by its unit 2.1150 - (<a class=css data-link-type=maybe href=#cm title=cm>cm</a> is <a class="production css-code" data-link-type=type href=#length-value title="<length>"><length></a>, <a class=css data-link-type=maybe href=#deg title=deg>deg</a> is <a class="production css-code" data-link-type=type href=#angle-value title="<angle>"><angle></a>, etc.). 2.1151 - An <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression’s type is given by its <a class="production css-code" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> argument.</p> 2.1152 + <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>"><number-token></a>s are of type <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a> or <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1153 + A <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-dimension-token title="<dimension-token>"><dimension-token></a>’s type is given by its unit 2.1154 + (<span class=css>cm</span> is <a class="production css" data-link-type=type href=#length-value title="<length>"><length></a>, <span class=css>deg</span> is <a class="production css" data-link-type=type href=#angle-value title="<angle>"><angle></a>, etc.). 2.1155 + An <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression’s type is given by its <a class="production css" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> argument.</p> 2.1156 2.1157 <p>If percentages are accepted in the context in which the expression is placed, 2.1158 - a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-percentage-token title="<percentage-token>"><percentage-token></a> has the type of the value that percentages are relative to; 2.1159 + a <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-percentage-token title="<percentage-token>"><percentage-token></a> has the type of the value that percentages are relative to; 2.1160 otherwise, a math expression containing percentages is invalid.</p> 2.1161 2.1162 <p>Operators form sub-expressions, which gain types based on their arguments. 2.1163 @@ -1294,27 +1338,27 @@ 2.1164 2.1165 <ul> 2.1166 <li> 2.1167 - At <span class=css data-link-type=maybe title=+>+</span> or <span class=css data-link-type=maybe title=->-</span>, 2.1168 + At <span class=css>+</span> or <span class=css>-</span>, 2.1169 check that both sides have the same type, 2.1170 - or that one side is a <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> and the other is an <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1171 + or that one side is a <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a> and the other is an <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1172 If both sides are the same type, 2.1173 resolve to that type. 2.1174 - If one side is a <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a> and the other is an <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>, 2.1175 - resolve to <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1176 + If one side is a <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a> and the other is an <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>, 2.1177 + resolve to <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1178 2.1179 <li> 2.1180 - At <span class=css data-link-type=maybe title=*>*</span>, 2.1181 - check that at least one side is <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1182 - If both sides are <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>, 2.1183 - resolve to <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1184 + At <span class=css>*</span>, 2.1185 + check that at least one side is <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1186 + If both sides are <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>, 2.1187 + resolve to <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1188 Otherwise, 2.1189 resolve to the type of the other side. 2.1190 2.1191 <li> 2.1192 - At <span class=css data-link-type=maybe title=/>/</span>, 2.1193 - check that the right side is <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1194 - If the left side is <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>, 2.1195 - resolve to <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1196 + At <span class=css>/</span>, 2.1197 + check that the right side is <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1198 + If the left side is <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>, 2.1199 + resolve to <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1200 Otherwise, 2.1201 resolve to the type of the left side. 2.1202 </ul> 2.1203 @@ -1326,10 +1370,10 @@ 2.1204 information at parse time).</p> 2.1205 2.1206 <p class=note>Note: Note that algebraic simplifications do not affect the validity of the <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expression or its resolved type. 2.1207 - For example, <span class=css data-link-type=maybe title="calc(5px - 5px + 10s)">calc(5px - 5px + 10s)</span> or <span class=css data-link-type=maybe title="calc(0 * 5px + 10s)">calc(0 * 5px + 10s)</span> are both invalid 2.1208 + For example, <span class=css>calc(5px - 5px + 10s)</span> or <span class=css>calc(0 * 5px + 10s)</span> are both invalid 2.1209 due to the attempt to add a length and a time.</p> 2.1210 2.1211 -<h4 class="heading settled heading" data-level=8.1.3 id=calc-computed-value><span class=secno>8.1.3 </span><span class=content> 2.1212 +<h4 class="heading settled" data-level=8.1.3 id=calc-computed-value><span class=secno>8.1.3 </span><span class=content> 2.1213 Computed Value</span><a class=self-link href=#calc-computed-value></a></h4> 2.1214 2.1215 <p>The computed value of a <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expression is the expression 2.1216 @@ -1339,8 +1383,8 @@ 2.1217 2.1218 <p>Where percentages are not resolved at computed-value time, 2.1219 they are not resolved in <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expressions, 2.1220 - e.g. <span class=css data-link-type=maybe title="calc(100% - 100% + 1em)">calc(100% - 100% + 1em)</span> resolves to <span class=css data-link-type=maybe title="calc(0% + 1em)">calc(0% + 1em)</span>, 2.1221 - not to <span class=css data-link-type=maybe title=calc(1em)>calc(1em)</span>. 2.1222 + e.g. <span class=css>calc(100% - 100% + 1em)</span> resolves to <span class=css>calc(0% + 1em)</span>, 2.1223 + not to <span class=css>calc(1em)</span>. 2.1224 If there are special rules for computing percentages in a value 2.1225 (e.g. <a href=http://www.w3.org/TR/CSS21/visudet.html#the-height-property>the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height title=height>height</a> property</a>), 2.1226 they apply whenever a <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expression contains percentages.</p> 2.1227 @@ -1365,7 +1409,7 @@ 2.1228 <p>Due to this, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#background-position title=background-position>background-position</a> preserves the percentage in a <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> 2.1229 rather than resolving it directly into a length, 2.1230 so that an expression like <a class=css data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#background-position title=background-position>background-position: left calc(50% + 20px)</a> 2.1231 - properly centers the background and then shifts it <span class=css data-link-type=maybe title=20px>20px</span> to the right, 2.1232 + properly centers the background and then shifts it <span class=css>20px</span> to the right, 2.1233 rather than placing its <em>left edge</em> 20px off of center.</p> 2.1234 </div> 2.1235 2.1236 @@ -1375,10 +1419,10 @@ 2.1237 math expressions involving percentages for widths and heights on 2.1238 table columns, table column groups, table rows, table row groups, and table cells 2.1239 in both auto and fixed layout tables 2.1240 - MAY be treated as if <span class=css data-link-type=maybe title=auto>auto</span> had been specified.</p> 2.1241 + MAY be treated as if <span class=css>auto</span> had been specified.</p> 2.1242 2.1243 2.1244 -<h4 class="heading settled heading" data-level=8.1.4 id=calc-range><span class=secno>8.1.4 </span><span class=content> 2.1245 +<h4 class="heading settled" data-level=8.1.4 id=calc-range><span class=secno>8.1.4 </span><span class=content> 2.1246 Range Checking</span><a class=self-link href=#calc-range></a></h4> 2.1247 2.1248 <p>The value resulting from an expression must be clamped to the 2.1249 @@ -1396,10 +1440,10 @@ 2.1250 </pre> 2.1251 </div> 2.1252 2.1253 -<h3 class="heading settled heading" data-level=8.2 id=toggle-notation><span class=secno>8.2 </span><span class=content> 2.1254 +<h3 class="heading settled" data-level=8.2 id=toggle-notation><span class=secno>8.2 </span><span class=content> 2.1255 Toggling Between Values: <a class=css data-link-type=maybe href=#funcdef-toggle title=toggle()>toggle()</a></span><a class=self-link href=#toggle-notation></a></h3> 2.1256 2.1257 -<p>The <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-toggle>toggle()<a class=self-link href=#funcdef-toggle></a></dfn> expression allows descendant elements 2.1258 +<p>The <dfn class=css data-dfn-type=function data-export="" id=funcdef-toggle>toggle()<a class=self-link href=#funcdef-toggle></a></dfn> expression allows descendant elements 2.1259 to cycle over a list of values instead of inheriting the same value.</p> 2.1260 2.1261 <div class=example> 2.1262 @@ -1411,19 +1455,19 @@ 2.1263 2.1264 <div class=example> 2.1265 The following example cycles markers for nested lists, 2.1266 - so that a top level list has <span class=css data-link-type=maybe title=disc>disc</span>-shaped markers, 2.1267 - but nested lists use <span class=css data-link-type=maybe title=circle>circle</span>, then <span class=css data-link-type=maybe title=square>square</span>, then <span class=css data-link-type=maybe title=box>box</span>, 2.1268 + so that a top level list has <span class=css>disc</span>-shaped markers, 2.1269 + but nested lists use <span class=css>circle</span>, then <span class=css>square</span>, then <span class=css>box</span>, 2.1270 and then repeat through the list of marker shapes, 2.1271 - starting again (for the 5th list deep) with <span class=css data-link-type=maybe title=disc>disc</span>. 2.1272 + starting again (for the 5th list deep) with <span class=css>disc</span>. 2.1273 2.1274 <pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre> 2.1275 </div> 2.1276 2.1277 <p>The syntax of the <a class=css data-link-type=maybe href=#funcdef-toggle title=toggle()>toggle()</a> expression is:</p> 2.1278 2.1279 -<pre>toggle( <a class="production css-code" data-link-type=type href=#typedef-toggle-value title="<toggle-value>"><toggle-value></a># )</pre> 2.1280 +<pre>toggle( <a class=production data-link-type=type href=#typedef-toggle-value title="<toggle-value>"><toggle-value></a># )</pre> 2.1281 2.1282 -<p>where <dfn class=css-code data-dfn-type=type data-export="" id=typedef-toggle-value><toggle-value><a class=self-link href=#typedef-toggle-value></a></dfn> is any CSS value 2.1283 +<p>where <dfn class=css data-dfn-type=type data-export="" id=typedef-toggle-value><toggle-value><a class=self-link href=#typedef-toggle-value></a></dfn> is any CSS value 2.1284 that is valid where the expression is placed, 2.1285 and that doesn’t contain any top-level commas. 2.1286 If any of the values inside are not valid, 2.1287 @@ -1440,9 +1484,8 @@ 2.1288 2.1289 <pre>background-position: 10px toggle(50px, 100px); 2.1290 /* toggle() must be the sole value of the property */ 2.1291 - 2.1292 list-style-type: toggle(disc, 50px); 2.1293 -/* <span class=css data-link-type=maybe title=50px>50px</span> isn’t a valid value of 'list-style-type' */ 2.1294 +/* <span class=css>50px</span> isn’t a valid value of 'list-style-type' */ 2.1295 </pre> 2.1296 </div> 2.1297 2.1298 @@ -1460,11 +1503,11 @@ 2.1299 2.1300 <p class=note>Note: Note that <a class=css data-link-type=maybe href=#funcdef-toggle title=toggle()>toggle()</a> explicitly looks at the computed value of the parent, 2.1301 so it works even on non-inherited properties. 2.1302 - This is similar to the <span class=css data-link-type=maybe title=inherit>inherit</span> keyword, 2.1303 + This is similar to the <span class=css>inherit</span> keyword, 2.1304 which is works even on non-inherited properties.</p> 2.1305 2.1306 <p class=note>Note: Note that the <a href=http://www.w3.org/TR/CSS21/cascade.html#computed-value>computed value</a> of a property is an abstract set of values, 2.1307 - not a particular serialization <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>, 2.1308 + not a particular serialization <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, 2.1309 so comparison between computed values should always be unambiguous and have the expected result. 2.1310 For example, 2.1311 a Level 2 <a href=http://www.w3.org/TR/CSS21/colors.html#propdef-background-position><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#background-position title=background-position>background-position</a></a> computed value 2.1312 @@ -1492,7 +1535,7 @@ 2.1313 margin-left: toggle(2px, 4px, 5px); 2.1314 </pre> 2.1315 2.1316 -<p>Note that, since <span class=css data-link-type=maybe title=1px>1px</span> appears twice in the top and bottom margins, 2.1317 +<p>Note that, since <span class=css>1px</span> appears twice in the top and bottom margins, 2.1318 they will cycle between only two value 2.1319 while the left and right margins cycle through three. 2.1320 In other words, the declarations above will yield the same computed values 2.1321 @@ -1505,47 +1548,47 @@ 2.1322 </pre> 2.1323 </div> 2.1324 2.1325 -<h3 class="heading settled heading" data-level=8.3 id=attr-notation><span class=secno>8.3 </span><span class=content> 2.1326 +<h3 class="heading settled" data-level=8.3 id=attr-notation><span class=secno>8.3 </span><span class=content> 2.1327 Attribute References: <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a></span><a class=self-link href=#attr-notation></a></h3> 2.1328 2.1329 2.1330 2.1331 -<p>The <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-attr>attr()<a class=self-link href=#funcdef-attr></a></dfn> function is allowed as a component value in properties applied to an element or pseudo-element. 2.1332 +<p>The <dfn class=css data-dfn-type=function data-export="" id=funcdef-attr>attr()<a class=self-link href=#funcdef-attr></a></dfn> function is allowed as a component value in properties applied to an element or pseudo-element. 2.1333 It returns the value of an attribute on the element. 2.1334 If used on a pseudo-element, it returns the value of the attribute on the pseudo-element’s originating element.</p> 2.1335 2.1336 <p>The computed value of the <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression is the value of the attribute with the specified name on the element, according to the rules given below.</p> 2.1337 2.1338 -<p class=note>Note: In CSS2.1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-css21>[CSS21]</a>, the <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression always returns a string. 2.1339 +<p class=note>Note: In CSS2.1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, the <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression always returns a string. 2.1340 In CSS3, the <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression can return many different types. 2.1341 The <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression cannot return everything, 2.1342 for example it cannot do counters, named strings, quotes, 2.1343 - or keyword values such as <span class=css data-link-type=maybe title=auto>auto</span>, <span class=css data-link-type=maybe title=nowrap>nowrap</span>, or <span class=css data-link-type=maybe title=baseline>baseline</span>. 2.1344 + or keyword values such as <span class=css>auto</span>, <span class=css>nowrap</span>, or <span class=css>baseline</span>. 2.1345 This is intentional, 2.1346 as the intent of the <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression is not to make it possible to describe a presentational language’s formatting using CSS, 2.1347 but to enable CSS to take semantic data into account.</p> 2.1348 2.1349 <p>The new syntax for the <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> expression is:</p> 2.1350 2.1351 -<pre>attr( <a class="production css-code" data-link-type=type href=#typedef-attr-name title="<attr-name>"><attr-name></a> <a class="production css-code" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a>? [ , <a class="production css-code" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> ]? )</pre> 2.1352 +<pre>attr( <a class=production data-link-type=type href=#typedef-attr-name title="<attr-name>"><attr-name></a> <a class=production data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a>? [ , <a class=production data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> ]? )</pre> 2.1353 2.1354 -<p>where <dfn class=css-code data-dfn-type=type data-export="" id=typedef-attr-name><attr-name><a class=self-link href=#typedef-attr-name></a></dfn> is a <a href=http://dev.w3.org/csswg/css3-namespace/#css-qnames>CSS qualified name</a> 2.1355 - (the qname production in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3namespace title=biblio-css3namespace>[CSS3NAMESPACE]</a>) 2.1356 +<p>where <dfn class=css data-dfn-type=type data-export="" id=typedef-attr-name><attr-name><a class=self-link href=#typedef-attr-name></a></dfn> is a <a href=http://dev.w3.org/csswg/css3-namespace/#css-qnames>CSS qualified name</a> 2.1357 + (the qname production in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3namespace title=CSS3NAMESPACE>[CSS3NAMESPACE]</a>) 2.1358 that represents an attribute name. 2.1359 (In the absence of namespacing, this will just be a CSS identifier.)</p> 2.1360 2.1361 -<p>The optional <dfn class=css-code data-dfn-type=type data-export="" id=typedef-type-or-unit><type-or-unit><a class=self-link href=#typedef-type-or-unit></a></dfn> argument is a keyword drawn from the list below that tells the UA how to interpret the attribute value, 2.1362 +<p>The optional <dfn class=css data-dfn-type=type data-export="" id=typedef-type-or-unit><type-or-unit><a class=self-link href=#typedef-type-or-unit></a></dfn> argument is a keyword drawn from the list below that tells the UA how to interpret the attribute value, 2.1363 and defines a type for the attr() expression. 2.1364 - If omitted, <a class=css data-link-type=maybe href=#string title=string>string</a> is implied.</p> 2.1365 + If omitted, <span class=css>string</span> is implied.</p> 2.1366 2.1367 -<p>The optional <dfn class=css-code data-dfn-type=type data-export="" id=typedef-attr-fallback><attr-fallback><a class=self-link href=#typedef-attr-fallback></a></dfn> argument represents a fallback value, 2.1368 +<p>The optional <dfn class=css data-dfn-type=type data-export="" id=typedef-attr-fallback><attr-fallback><a class=self-link href=#typedef-attr-fallback></a></dfn> argument represents a fallback value, 2.1369 which is used if the named attribute is missing, 2.1370 or its value cannot be parsed into the given type or is invalid/out-of-range for the property. 2.1371 If it’s absent, 2.1372 - the default value for the given <a class="production css-code" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> (from the list below) is implied.</p> 2.1373 + the default value for the given <a class="production css" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> (from the list below) is implied.</p> 2.1374 2.1375 -<p class=note>Note: Note that, unlike <a class="production css-code" data-link-type=type href=#typedef-toggle-value title="<toggle-value>"><toggle-value></a>s, 2.1376 - an <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> <a class="production css-code" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> value may contain top-level commas, 2.1377 +<p class=note>Note: Note that, unlike <a class="production css" data-link-type=type href=#typedef-toggle-value title="<toggle-value>"><toggle-value></a>s, 2.1378 + an <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> <a class="production css" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> value may contain top-level commas, 2.1379 as it is always the last argument in the functional notation.</p> 2.1380 2.1381 <p>The attr() expression is only valid if:</p> 2.1382 @@ -1558,127 +1601,127 @@ 2.1383 if the attribute name is given with a namespace prefix, the prefix is defined 2.1384 2.1385 <li> 2.1386 - the <a class="production css-code" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> is valid where the attr() expression is placed, 2.1387 + the <a class="production css" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> is valid where the attr() expression is placed, 2.1388 2.1389 <li> 2.1390 - the <a class="production css-code" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> does not contain another attr() expression, 2.1391 + the <a class="production css" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> does not contain another attr() expression, 2.1392 2.1393 <li> 2.1394 and, if the attr() expression is not the sole component value of a property, 2.1395 - the <a class="production css-code" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> matches the attr()’s type 2.1396 + the <a class="production css" data-link-type=type href=#typedef-attr-fallback title="<attr-fallback>"><attr-fallback></a> matches the attr()’s type 2.1397 </ul> 2.1398 2.1399 <div class=note> 2.1400 Note that the default value need not be of the type given, 2.1401 if the attr() expression is the entire property value. 2.1402 - For instance, if the type required of the attribute by the author is <a class=css data-link-type=maybe href=#px title=px>px</a>, 2.1403 - the default could still be <span class=css data-link-type=maybe title=auto>auto</span>, 2.1404 + For instance, if the type required of the attribute by the author is <span class=css>px</span>, 2.1405 + the default could still be <span class=css>auto</span>, 2.1406 like in <a class=css data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width: attr(size px, auto);</a>. 2.1407 2.1408 <p>If the attr() is used alongside other values to form the full property value, 2.1409 however, the default value must match the attr()'s type. 2.1410 For example, <a class=css data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow title=box-shadow>box-shadow: attr(size px, inset) 5px 10px blue;</a> is invalid, 2.1411 even though it would create a valid declaration if you substituted the attr() expression 2.1412 - with either a <a class=css data-link-type=maybe href=#px title=px>px</a> length <em>or</em> the <span class=css data-link-type=maybe title=inset>inset</span> keyword.</p> 2.1413 + with either a <span class=css>px</span> length <em>or</em> the <span class=css>inset</span> keyword.</p> 2.1414 </div> 2.1415 2.1416 <p>If the specified attribute exists on the element, 2.1417 - the value of the attribute must be parsed as required by the <a class="production css-code" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> argument 2.1418 + the value of the attribute must be parsed as required by the <a class="production css" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> argument 2.1419 (as defined in the list below). 2.1420 - Unless the type is <a class=css data-link-type=maybe href=#string title=string>string</a>, it must first be stripped of leading and trailing white space. 2.1421 + Unless the type is <span class=css>string</span>, it must first be stripped of leading and trailing white space. 2.1422 The resulting value is the attr() expression’s value. 2.1423 If the value did not parse as required, 2.1424 the attr() expression’s value is its fallback value.</p> 2.1425 2.1426 -<p>The <a class="production css-code" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> keywords are:</p> 2.1427 +<p>The <a class="production css" data-link-type=type href=#typedef-type-or-unit title="<type-or-unit>"><type-or-unit></a> keywords are:</p> 2.1428 2.1429 <dl> 2.1430 - <dt><a class=css data-link-type=maybe href=#string title=string>string</a> 2.1431 + <dt><span class=css>string</span> 2.1432 <dd> 2.1433 - The attribute value is taken as the contents of a CSS <a class="production css-code" data-link-type=type href=#string-value title="<string>"><string></a>. 2.1434 + The attribute value is taken as the contents of a CSS <a class="production css" data-link-type=type href=#string-value title="<string>"><string></a>. 2.1435 The default is the empty string. 2.1436 2.1437 <p class=note>Note: this does not reparse the attribute value with the CSS parser. 2.1438 So, for example, an attribute whose value is "\33" will produce a string containing those three characters, 2.1439 not a string containing "3" (the character that the escape would evaluate to).</p> 2.1440 2.1441 - <dt><span class=css data-link-type=maybe title=color>color</span> 2.1442 + <dt><span class=css>color</span> 2.1443 <dd> 2.1444 The attribute value must parse as a HASH or IDENT CSS token, 2.1445 - and be successfully interpreted as a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a>. 2.1446 - The default is <span class=css data-link-type=maybe title=currentcolor>currentcolor</span>. 2.1447 + and be successfully interpreted as a <a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>"><color></a>. 2.1448 + The default is <span class=css>currentcolor</span>. 2.1449 2.1450 - <dt><a class=css data-link-type=maybe href=#url title=url>url</a> 2.1451 + <dt><span class=css>url</span> 2.1452 <dd> 2.1453 - The attribute value is taken as the contents of a CSS <a class="production css-code" data-link-type=type href=#string-value title="<string>"><string></a>. 2.1454 - It is interpreted as a quoted string within the <span class=css data-link-type=maybe title=url()>url()</span> notation. 2.1455 - The default is <span class=css data-link-type=maybe title=about:invalid>about:invalid</span>, which is a URI defined (<a href=#about-invalid>in Appendix A</a>) to point 2.1456 + The attribute value is taken as the contents of a CSS <a class="production css" data-link-type=type href=#string-value title="<string>"><string></a>. 2.1457 + It is interpreted as a quoted string within the <span class=css>url()</span> notation. 2.1458 + The default is <span class=css>about:invalid</span>, which is a URL defined (<a href=#about-invalid>in Appendix A</a>) to point 2.1459 to a non-existent document with a generic error condition. 2.1460 Relative URLs must be made absolute 2.1461 according to the rules of the document language as applied to URLs originating from the element; 2.1462 they are not relative to the style sheet. 2.1463 2.1464 - <dt><a class=css data-link-type=maybe href=#integer title=integer>integer</a> 2.1465 + <dt><span class=css>integer</span> 2.1466 <dd> 2.1467 The attribute value must parse as a NUMBER CSS token, 2.1468 - and be successfully interpreted as an <a class="production css-code" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1469 - The default is <span class=css data-link-type=maybe title=0>0</span>, 2.1470 - or else the property’s minimum value if <span class=css data-link-type=maybe title=0>0</span> is not valid for the property. 2.1471 + and be successfully interpreted as an <a class="production css" data-link-type=type href=#integer-value title="<integer>"><integer></a>. 2.1472 + The default is <span class=css>0</span>, 2.1473 + or else the property’s minimum value if <span class=css>0</span> is not valid for the property. 2.1474 The default must also be used 2.1475 if the property in question only accepts integers within a certain range 2.1476 and the attribute is out of range. 2.1477 2.1478 - <dt><a class=css data-link-type=maybe href=#number title=number>number</a> 2.1479 + <dt><span class=css>number</span> 2.1480 <dd> 2.1481 The attribute value must parse as a NUMBER CSS token, 2.1482 - and is interpreted as an <a class="production css-code" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1483 - The default is <span class=css data-link-type=maybe title=0>0</span>, 2.1484 - or else the property’s minimum value if <span class=css data-link-type=maybe title=0>0</span> is not valid for the property. 2.1485 + and is interpreted as an <a class="production css" data-link-type=type href=#number-value title="<number>"><number></a>. 2.1486 + The default is <span class=css>0</span>, 2.1487 + or else the property’s minimum value if <span class=css>0</span> is not valid for the property. 2.1488 The default must also be used 2.1489 if the property in question only accepts integers within a certain range 2.1490 and the attribute is out of range. 2.1491 2.1492 - <dt><span class=css data-link-type=maybe title=length>length</span> 2.1493 - <dt><span class=css data-link-type=maybe title=angle>angle</span> 2.1494 - <dt><span class=css data-link-type=maybe title=time>time</span> 2.1495 - <dt><span class=css data-link-type=maybe title=frequency>frequency</span> 2.1496 + <dt><span class=css>length</span> 2.1497 + <dt><span class=css>angle</span> 2.1498 + <dt><span class=css>time</span> 2.1499 + <dt><span class=css>frequency</span> 2.1500 <dd> 2.1501 The attribute value must parse as a DIMENSION CSS token, 2.1502 and be successfully interpreted as the specified type. 2.1503 - The default is <span class=css data-link-type=maybe title=0>0</span> in the relevant units, 2.1504 - or else the property’s minimum value if <span class=css data-link-type=maybe title=0>0</span> in the relevant units is not valid for the property. 2.1505 + The default is <span class=css>0</span> in the relevant units, 2.1506 + or else the property’s minimum value if <span class=css>0</span> in the relevant units is not valid for the property. 2.1507 The default must also be used 2.1508 if the property in question only accepts values within a certain range 2.1509 (e.g. positive lengths or angles from 0 to 90deg) 2.1510 and the attribute is out of range (e.g. a negative length or 180deg). 2.1511 If the unit is a relative length, it must be computed to an absolute length. 2.1512 2.1513 - <dt><a class=css data-link-type=maybe href=#em title=em>em</a> 2.1514 - <dt><a class=css data-link-type=maybe href=#ex title=ex>ex</a> 2.1515 - <dt><a class=css data-link-type=maybe href=#px title=px>px</a> 2.1516 - <dt><a class=css data-link-type=maybe href=#rem title=rem>rem</a> 2.1517 - <dt><a class=css data-link-type=maybe href=#vw title=vw>vw</a> 2.1518 - <dt><a class=css data-link-type=maybe href=#vh title=vh>vh</a> 2.1519 - <dt><a class=css data-link-type=maybe href=#vmin title=vmin>vmin</a> 2.1520 - <dt><a class=css data-link-type=maybe href=#vmax title=vmax>vmax</a> 2.1521 - <dt><a class=css data-link-type=maybe href=#mm title=mm>mm</a> 2.1522 - <dt><a class=css data-link-type=maybe href=#cm title=cm>cm</a> 2.1523 - <dt><a class=css data-link-type=maybe href=#in title=in>in</a> 2.1524 - <dt><a class=css data-link-type=maybe href=#pt title=pt>pt</a> 2.1525 - <dt><a class=css data-link-type=maybe href=#pc title=pc>pc</a> 2.1526 - <dt><a class=css data-link-type=maybe href=#deg title=deg>deg</a> 2.1527 - <dt><a class=css data-link-type=maybe href=#grad title=grad>grad</a> 2.1528 - <dt><a class=css data-link-type=maybe href=#rad title=rad>rad</a> 2.1529 - <dt><a class=css data-link-type=maybe href=#ms title=ms>ms</a> 2.1530 - <dt><a class=css data-link-type=maybe href=#s title=s>s</a> 2.1531 - <dt><a class=css data-link-type=maybe href=#hz title=hz>Hz</a> 2.1532 - <dt><a class=css data-link-type=maybe href=#khz title=khz>kHz</a> 2.1533 - <dt><span class=css data-link-type=maybe title=%>%</span> 2.1534 + <dt><span class=css>em</span> 2.1535 + <dt><span class=css>ex</span> 2.1536 + <dt><span class=css>px</span> 2.1537 + <dt><span class=css>rem</span> 2.1538 + <dt><span class=css>vw</span> 2.1539 + <dt><span class=css>vh</span> 2.1540 + <dt><span class=css>vmin</span> 2.1541 + <dt><span class=css>vmax</span> 2.1542 + <dt><span class=css>mm</span> 2.1543 + <dt><span class=css>cm</span> 2.1544 + <dt><span class=css>in</span> 2.1545 + <dt><span class=css>pt</span> 2.1546 + <dt><span class=css>pc</span> 2.1547 + <dt><span class=css>deg</span> 2.1548 + <dt><span class=css>grad</span> 2.1549 + <dt><span class=css>rad</span> 2.1550 + <dt><span class=css>ms</span> 2.1551 + <dt><span class=css>s</span> 2.1552 + <dt><span class=css>Hz</span> 2.1553 + <dt><span class=css>kHz</span> 2.1554 + <dt><span class=css>%</span> 2.1555 <dd> 2.1556 The attribute value must parse as a NUMBER CSS token, 2.1557 and is interpreted as a <a data-link-type=dfn href=#dimension title=dimension>dimension</a> with the specified unit. 2.1558 - The default is <span class=css data-link-type=maybe title=0>0</span> in the relevant units, 2.1559 - or else the property’s minimum value if <span class=css data-link-type=maybe title=0>0</span> in the relevant units is not valid for the property. 2.1560 + The default is <span class=css>0</span> in the relevant units, 2.1561 + or else the property’s minimum value if <span class=css>0</span> in the relevant units is not valid for the property. 2.1562 The default must also be used 2.1563 if the property in question only accepts values within a certain range 2.1564 (e.g. positive lengths or angles from 0 to 90deg) 2.1565 @@ -1697,7 +1740,6 @@ 2.1566 <metal length="19"/> 2.1567 <wood length="4"/> 2.1568 </stock> 2.1569 - 2.1570 stock::before { 2.1571 display: block; 2.1572 content: "To scale, the lengths of materials in stock are:"; 2.1573 @@ -1725,14 +1767,11 @@ 2.1574 parse-time error, and thus cause the relevant declaration—<wbr>in this case all of them—<wbr>to be ignored: 2.1575 2.1576 <pre>content: attr(title color); /* 'content' doesn’t accept colors */ 2.1577 - 2.1578 content: attr(end-of-quote string, inherit) close-quote; 2.1579 /* the 'inherit' value is not allowed there, since the result would be 2.1580 'inherit close-quote', which is invalid. */ 2.1581 - 2.1582 margin: attr(vertical length) attr(horizontal deg); 2.1583 /* deg units are not valid at that point */ 2.1584 - 2.1585 color: attr(color); /* 'color' doesn’t accept strings */ 2.1586 </pre> 2.1587 </div> 2.1588 @@ -1744,17 +1783,17 @@ 2.1589 2.1590 2.1591 2.1592 -<h2 class="heading settled heading" data-level=9 id=iana><span class=secno>9 </span><span class=content> 2.1593 +<h2 class="heading settled" data-level=9 id=iana><span class=secno>9 </span><span class=content> 2.1594 Appendix A: IANA Considerations</span><a class=self-link href=#iana></a></h2> 2.1595 2.1596 -<h3 class="heading settled heading" data-level=9.1 id=about-invalid><span class=secno>9.1 </span><span class=content> 2.1597 +<h3 class="heading settled" data-level=9.1 id=about-invalid><span class=secno>9.1 </span><span class=content> 2.1598 Registration for the <code>about:invalid</code> URL scheme</span><a class=self-link href=#about-invalid></a></h3> 2.1599 2.1600 -<p>This sections defines and registers the <code>about:invalid</code> URI, 2.1601 - in accordance with the registration procedure defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-rfc6694 title=biblio-rfc6694>[RFC6694]</a>.</p> 2.1602 +<p>This sections defines and registers the <code>about:invalid</code> URL, 2.1603 + in accordance with the registration procedure defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-rfc6694 title=RFC6694>[RFC6694]</a>.</p> 2.1604 2.1605 2.1606 -<p>The official record of this registration can be found at <a href=http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml>http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xml</a>.</p> 2.1607 +<p>The official record of this registration can be found at <a href=http://www.iana.org/assignments/about-URL-tokens/about-URL-tokens.xml>http://www.iana.org/assignments/about-URL-tokens/about-URL-tokens.xml</a>.</p> 2.1608 2.1609 <table class="data define"> 2.1610 <tr> 2.1611 @@ -1763,8 +1802,8 @@ 2.1612 <tr> 2.1613 <th>Intended Usage 2.1614 <td> 2.1615 - The <code>about:invalid</code> URI references a non-existent document with a generic error condition. 2.1616 - It can be used when a URI is necessary, but the default value shouldn’t be resolveable as any type of document. 2.1617 + The <code>about:invalid</code> URL references a non-existent document with a generic error condition. 2.1618 + It can be used when a URL is necessary, but the default value shouldn’t be resolveable as any type of document. 2.1619 <tr> 2.1620 <th>Contact/Change controller 2.1621 <td>CSS WG <<a href=mailto:www-style@w3.org>www-style@w3.org</a>> (on behalf of W3C) 2.1622 @@ -1774,7 +1813,7 @@ 2.1623 </table> 2.1624 2.1625 2.1626 -<h2 class="no-num heading settled heading" id=acknowledgments><span class=content> 2.1627 +<h2 class="no-num heading settled" id=acknowledgments><span class=content> 2.1628 Acknowledgments</span><a class=self-link href=#acknowledgments></a></h2> 2.1629 2.1630 <p>Comments and suggestions from 2.1631 @@ -1791,21 +1830,21 @@ 2.1632 improved this module.</p> 2.1633 2.1634 2.1635 -<h2 class="no-num heading settled heading" id=changes><span class=content> 2.1636 +<h2 class="no-num heading settled" id=changes><span class=content> 2.1637 Changes</span><a class=self-link href=#changes></a></h2> 2.1638 2.1639 <p>Changes since the <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>30 July 2013 Candidate Recommendation</a> are:</p> 2.1640 2.1641 <ul> 2.1642 - <li>Specified that, in the absence of font information, <span class=css data-link-type=maybe title=1ch>1ch</span> equal <span class=css data-link-type=maybe title=.5em>.5em</span>. 2.1643 - <li>Added <a class=css data-link-type=maybe href=#q title=q>q</a> unit. 2.1644 - <li>Relaxed unnecessary restrictions on <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>. 2.1645 + <li>Specified that, in the absence of font information, <span class=css>1ch</span> equal <span class=css>.5em</span>. 2.1646 + <li>Added <span class=css>q</span> unit. 2.1647 + <li>Relaxed unnecessary restrictions on <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a>. 2.1648 Require specs referencing it to be clear about excluded keywords, 2.1649 because the new rule isn’t as simple. 2.1650 <li>Clarified relative URL resolution for embedded style sheets. 2.1651 <li>Clarified {<var>A</var>} variant of {<var>A</var>,<var>B</var>} notation. 2.1652 <li>Added notation for restricting the length of comma-separated lists 2.1653 - specified with the <span class=css data-link-type=maybe title=#>#</span> notation. 2.1654 + specified with the <span class=css>#</span> notation. 2.1655 <li>Clarified handling of <a class=css data-link-type=maybe href=#funcdef-toggle title=toggle()>toggle()</a> when used in shorthand declarations. 2.1656 <li>Clarified that stringing together re-orderable combinations allows interleaving. 2.1657 <li>Changed syntax references from the 2.1 grammar to the Syntax spec. 2.1658 @@ -1820,24 +1859,24 @@ 2.1659 <li>Made undefined namespace prefixes in <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> invalidate the function. 2.1660 <li>Per <a href=http://lists.w3.org/Archives/Public/www-style/2013Jan/0616.html>WG resolution</a>, 2.1661 made <a href=#viewport-relative-lengths>viewport-percentage units</a> respect scrollbars on the viewport 2.1662 - unless <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is <span class=css data-link-type=maybe title=auto>auto</span> (in which case they ignore the presence of scrollbars). 2.1663 + unless <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is <span class=css>auto</span> (in which case they ignore the presence of scrollbars). 2.1664 <li>Deferred exact definition of <a href=#viewport-relative-lengths>viewport-percentage units</a> 2.1665 in paged media to <a href=http://www.w3.org/TR/css3-page/>CSS Paged Media</a>. 2.1666 - <li>Added back the <a class="production css-code" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> term as a convenience notation, so that other specs can refer to it. 2.1667 + <li>Added back the <a class="production css" data-link-type=type href=#identifier-value title="<custom-ident>"><custom-ident></a> term as a convenience notation, so that other specs can refer to it. 2.1668 </ul> 2.1669 2.1670 <p>Changes since the <a href=http://www.w3.org/TR/2013/CR-css3-values-20130404/>4 April 2013 Candidate Recommendation</a> are:</p> 2.1671 2.1672 <ul> 2.1673 - <li>Noted that the list of <a data-link-type=dfn href=#css-wide-keywords title="css-wide keywords">CSS-wide keywords</a> may be expanded by other specs. 2.1674 - <li>Clarified definition of <a class=css data-link-type=maybe href=#ex title=ex>ex</a> to refer to the “first available font”. 2.1675 - <li>Specified that <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> with <a class=css data-link-type=maybe href=#string title=string>string</a> or <a class=css data-link-type=maybe href=#url title=url>url</a> types doesn’t reparse the attribute contents, just takes the value literally as the value of a <a class="production css-code" data-link-type=type href=#string-value title="<string>"><string></a>. 2.1676 + <li>Noted that the list of <a data-link-type=dfn href=#css-wide-keywords title="CSS-wide keywords">CSS-wide keywords</a> may be expanded by other specs. 2.1677 + <li>Clarified definition of <span class=css>ex</span> to refer to the “first available font”. 2.1678 + <li>Specified that <a class=css data-link-type=maybe href=#funcdef-attr title=attr()>attr()</a> with <span class=css>string</span> or <span class=css>url</span> types doesn’t reparse the attribute contents, just takes the value literally as the value of a <a class="production css" data-link-type=type href=#string-value title="<string>"><string></a>. 2.1679 </ul> 2.1680 2.1681 -<h2 class="no-ref no-num heading settled heading" id=conformance><span class=content> 2.1682 +<h2 class="no-ref no-num heading settled" id=conformance><span class=content> 2.1683 Conformance</span><a class=self-link href=#conformance></a></h2> 2.1684 2.1685 -<h3 class="no-ref heading settled heading" id=conventions><span class=content> 2.1686 +<h3 class="no-ref heading settled" id=conventions><span class=content> 2.1687 Document conventions</span><a class=self-link href=#conventions></a></h3> 2.1688 2.1689 <p>Conformance requirements are expressed with a combination of 2.1690 @@ -1849,7 +1888,7 @@ 2.1691 letters in this specification. 2.1692 2.1693 <p>All of the text of this specification is normative except sections 2.1694 - explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=biblio-rfc2119>[RFC2119]</a></p> 2.1695 + explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=RFC2119>[RFC2119]</a></p> 2.1696 2.1697 <p>Examples in this specification are introduced with the words "for example" 2.1698 or are set apart from the normative text with <code>class="example"</code>, 2.1699 @@ -1864,7 +1903,15 @@ 2.1700 2.1701 <p class=note>Note, this is an informative note.</p> 2.1702 2.1703 -<h3 class="no-ref heading settled heading" id=conformance-classes><span class=content> 2.1704 + <p>Advisements are normative sections styled to evoke special attention and are 2.1705 + set apart from other normative text with <code><strong class="advisement"></code>, like 2.1706 + this: 2.1707 + 2.1708 + <strong class=advisement> 2.1709 + UAs MUST provide an accessible alternative. 2.1710 + </strong> 2.1711 + 2.1712 +<h3 class="no-ref heading settled" id=conformance-classes><span class=content> 2.1713 Conformance classes</span><a class=self-link href=#conformance-classes></a></h3> 2.1714 2.1715 <p>Conformance to this specification 2.1716 @@ -1902,7 +1949,7 @@ 2.1717 this module, and meet all other conformance requirements of style sheets 2.1718 as described in this module. 2.1719 2.1720 -<h3 class="no-ref heading settled heading" id=partial><span class=content> 2.1721 +<h3 class="no-ref heading settled" id=partial><span class=content> 2.1722 Partial implementations</span><a class=self-link href=#partial></a></h3> 2.1723 2.1724 <p>So that authors can exploit the forward-compatible parsing rules to 2.1725 @@ -1916,7 +1963,7 @@ 2.1726 (as unsupported values must be), CSS requires that the entire declaration 2.1727 be ignored.</p> 2.1728 2.1729 -<h3 class="no-ref heading settled heading" id=experimental><span class=content> 2.1730 +<h3 class="no-ref heading settled" id=experimental><span class=content> 2.1731 Experimental implementations</span><a class=self-link href=#experimental></a></h3> 2.1732 2.1733 <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.1734 @@ -1931,7 +1978,7 @@ 2.1735 in the draft. 2.1736 </p> 2.1737 2.1738 -<h3 class="no-ref heading settled heading" id=testing><span class=content> 2.1739 +<h3 class="no-ref heading settled" id=testing><span class=content> 2.1740 Non-experimental implementations</span><a class=self-link href=#testing></a></h3> 2.1741 2.1742 <p>Once a specification reaches the Candidate Recommendation stage, 2.1743 @@ -1954,33 +2001,33 @@ 2.1744 <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a> 2.1745 mailing list. 2.1746 2.1747 -<h2 class="no-num no-ref heading settled heading" id=references><span class=content> 2.1748 +<h2 class="no-num no-ref heading settled" id=references><span class=content> 2.1749 References</span><a class=self-link href=#references></a></h2> 2.1750 2.1751 -<h3 class="no-num no-ref heading settled heading" id=normative><span class=content> 2.1752 +<h3 class="no-num no-ref heading settled" id=normative><span class=content> 2.1753 Normative References</span><a class=self-link href=#normative></a></h3> 2.1754 <div data-fill-with=normative-references><dl> 2.1755 <dt id=biblio-css21 title=CSS21><a class=self-link href=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a></dd> 2.1756 -<dt id=biblio-css3-fonts title=CSS3-FONTS><a class=self-link href=#biblio-css3-fonts></a>[CSS3-FONTS]<dd>John Daggett. <a href=http://www.w3.org/TR/2013/WD-css3-fonts-20130212/>CSS Fonts Module Level 3</a>. 12 February 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-fonts-20130212/>http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a></dd> 2.1757 -<dt id=biblio-css3-images title=CSS3-IMAGES><a class=self-link href=#biblio-css3-images></a>[CSS3-IMAGES]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2012/CR-css3-images-20120417/>CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-images-20120417/>http://www.w3.org/TR/2012/CR-css3-images-20120417/</a></dd> 2.1758 <dt id=biblio-css3bg title=CSS3BG><a class=self-link href=#biblio-css3bg></a>[CSS3BG]<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>CSS Backgrounds and Borders Module Level 3</a>. 24 July 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-background-20120724/>http://www.w3.org/TR/2012/CR-css3-background-20120724/</a></dd> 2.1759 <dt id=biblio-css3cascade title=CSS3CASCADE><a class=self-link href=#biblio-css3cascade></a>[CSS3CASCADE]<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>CSS Cascading and Inheritance Level 3</a>. 3 October 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a></dd> 2.1760 -<dt id=biblio-css3color title=CSS3COLOR><a class=self-link href=#biblio-css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dd> 2.1761 +<dt id=biblio-css3color title=CSS3COLOR><a class=self-link href=#biblio-css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/css3-color>CSS Color Module Level 3</a>. REC. URL: <a href=http://www.w3.org/TR/css3-color>http://www.w3.org/TR/css3-color</a></dd> 2.1762 <dt id=biblio-css3namespace title=CSS3NAMESPACE><a class=self-link href=#biblio-css3namespace></a>[CSS3NAMESPACE]<dd>Elika J. Etemad; Anne van Kesteren. <a href=http://www.w3.org/TR/2011/REC-css3-namespace-20110929/>CSS Namespaces Module</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-namespace-20110929/>http://www.w3.org/TR/2011/REC-css3-namespace-20110929/</a></dd> 2.1763 <dt id=biblio-css3page title=CSS3PAGE><a class=self-link href=#biblio-css3page></a>[CSS3PAGE]<dd>Melinda Grant; et al. <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>CSS Paged Media Module Level 3</a>. 14 March 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>http://www.w3.org/TR/2013/WD-css3-page-20130314/</a></dd> 2.1764 <dt id=biblio-css3syn title=CSS3SYN><a class=self-link href=#biblio-css3syn></a>[CSS3SYN]<dd>Tab Atkins Jr.; Simon Sapin. <a href=http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/>CSS Syntax Module</a>. 5 November 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/>http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/</a></dd> 2.1765 -<dt id=biblio-rfc2119 title=RFC2119><a class=self-link href=#biblio-rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dd> 2.1766 -<dt id=biblio-uri title=URI><a class=self-link href=#biblio-uri></a>[URI]<dd>T. Berners-Lee; R. Fielding; L. Masinter. <a href=http://www.ietf.org/rfc/rfc3986.txt>Uniform Resource Identifiers (URI): generic syntax</a>. January 2005. URL: <a href=http://www.ietf.org/rfc/rfc3986.txt>http://www.ietf.org/rfc/rfc3986.txt</a></dd> 2.1767 +<dt id=biblio-css3-fonts title=css3-fonts><a class=self-link href=#biblio-css3-fonts></a>[css3-fonts]<dd>John Daggett. <a href=http://www.w3.org/TR/css3-fonts/>CSS Fonts Module Level 3</a>. WD. URL: <a href=http://www.w3.org/TR/css3-fonts/>http://www.w3.org/TR/css3-fonts/</a></dd> 2.1768 +<dt id=biblio-css3-images title=css3-images><a class=self-link href=#biblio-css3-images></a>[css3-images]<dd>Elika Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/css3-images/>CSS Image Values and Replaced Content Module Level 3</a>. CR. URL: <a href=http://www.w3.org/TR/css3-images/>http://www.w3.org/TR/css3-images/</a></dd> 2.1769 +<dt id=biblio-rfc2119 title=rfc2119><a class=self-link href=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. Best Current Practice. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dd> 2.1770 +<dt id=biblio-url title=url><a class=self-link href=#biblio-url></a>[url]<dd>Erik Arvidsson; Michael[tm] Smith. <a href=http://www.w3.org/TR/url/>URL</a>. WD. URL: <a href=http://www.w3.org/TR/url/>http://www.w3.org/TR/url/</a></dd> 2.1771 </dl></div> 2.1772 2.1773 -<h3 class="no-num no-ref heading settled heading" id=informative><span class=content> 2.1774 +<h3 class="no-num no-ref heading settled" id=informative><span class=content> 2.1775 Informative References</span><a class=self-link href=#informative></a></h3> 2.1776 <div data-fill-with=informative-references><dl> 2.1777 <dt id=biblio-mediaq title=MEDIAQ><a class=self-link href=#biblio-mediaq></a>[MEDIAQ]<dd>Florian Rivoal. <a href=http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/>Media Queries</a>. 19 June 2012. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/>http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a></dd> 2.1778 -<dt id=biblio-rfc6694 title=RFC6694><a class=self-link href=#biblio-rfc6694></a>[RFC6694]<dd>S. Moonesamy, Ed.. <a href=http://tools.ietf.org/html/rfc6694>The "about" URI Scheme</a>. August 2012. URL: <a href=http://tools.ietf.org/html/rfc6694>http://tools.ietf.org/html/rfc6694</a></dd> 2.1779 +<dt id=biblio-rfc6694 title=rfc6694><a class=self-link href=#biblio-rfc6694></a>[rfc6694]<dd>S. Moonesamy, Ed.. <a href=http://www.ietf.org/rfc/rfc6694.txt>The "about" URI Scheme</a>. Informational. URL: <a href=http://www.ietf.org/rfc/rfc6694.txt>http://www.ietf.org/rfc/rfc6694.txt</a></dd> 2.1780 </dl></div> 2.1781 2.1782 -<h2 class="no-num no-ref heading settled heading" id=index><span class=content> 2.1783 +<h2 class="no-num no-ref heading settled" id=index><span class=content> 2.1784 Index</span><a class=self-link href=#index></a></h2> 2.1785 <div data-fill-with=index><ul class=indexlist> 2.1786 <li>||, <a href=#comb-any title="section 2.2">2.2</a> 2.1787 @@ -2016,7 +2063,7 @@ 2.1788 <li>em, <a href=#em title="section 5.1.1">5.1.1</a> 2.1789 <li>ex, <a href=#ex title="section 5.1.1">5.1.1</a> 2.1790 <li><frequency>, <a href=#frequency-value title="section 6.3">6.3</a> 2.1791 -<li>functional notation, <a href=#functional-notation0 title="section 8">8</a> 2.1792 +<li>functional notation, <a href=#functional-notation title="section 8">8</a> 2.1793 <li>grad, <a href=#grad title="section 6.1">6.1</a> 2.1794 <li>Hz, <a href=#hz title="section 6.3">6.3</a> 2.1795 <li>identifier, <a href=#identifier title="section 3">3</a> 2.1796 @@ -2053,6 +2100,7 @@ 2.1797 <li><type-or-unit>, <a href=#typedef-type-or-unit title="section 8.3">8.3</a> 2.1798 <li><url>, <a href=#url-value title="section 3.4">3.4</a> 2.1799 <li>URL, <a href=#url title="section 3.4">3.4</a> 2.1800 +<li><url-modifier>, <a href=#typedef-url-modifier title="section 3.4.2">3.4.2</a> 2.1801 <li>vh, <a href=#vh title="section 5.1.2">5.1.2</a> 2.1802 <li>visual angle unit, <a href=#visual-angle-unit title="section 5.2">5.2</a> 2.1803 <li>vmax, <a href=#vmax title="section 5.1.2">5.1.2</a> 2.1804 @@ -2060,7 +2108,7 @@ 2.1805 <li>vw, <a href=#vw title="section 5.1.2">5.1.2</a> 2.1806 </ul></div> 2.1807 2.1808 -<h2 class="no-num no-ref heading settled heading" id=property-index><span class=content> 2.1809 +<h2 class="no-num no-ref heading settled" id=property-index><span class=content> 2.1810 Property index</span><a class=self-link href=#property-index></a></h2> 2.1811 <div data-fill-with=property-index><p>No properties defined.</div> 2.1812
