css-syntax/Overview.html@dec8752a6390
css-syntax/Overview.html
Sun, 01 Sep 2013 16:18:24 +0100
- author
- Simon Sapin <simon.sapin@exyr.org>
- date
- Sun, 01 Sep 2013 16:18:24 +0100
- changeset 8996
- dec8752a6390
- parent 8952
- aa1b58939f73
- child 8997
- bed44c340b52
- permissions
- -rw-r--r--
[css-syntax] Revert <unicode-range> changes from CSS 2.1
1 <!DOCTYPE html><html lang=en><head>
2 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
3 <title>CSS Syntax Module Level 3</title>
4 <link href=../default.css rel=stylesheet type=text/css>
5 <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
6 <link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css>
7 <link href=railroad-diagrams.css rel=stylesheet type=text/css>
9 </head>
10 <body class=h-entry>
11 <div class=head>
12 <p data-fill-with=logo><a class=logo href=http://www.w3.org/>
13 <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
14 </a></p>
15 <h1 class="p-name no-ref" id=title>CSS Syntax Module Level 3</h1>
16 <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
17 <span class=dt-updated><span class=value-title title=20130901>1 September 2013</span></span></span></h2>
18 <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-syntax>http://dev.w3.org/csswg/css-syntax</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-syntax>http://dev.w3.org/csswg/css-syntax</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2003/WD-css3-syntax-20030813/ rel=previous>http://www.w3.org/TR/2003/WD-css3-syntax-20030813/</a>
19 <dt>Feedback:</dt>
20 <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-syntax%5D%20feedback">www-style@w3.org</a>
21 with subject line
22 “<kbd>[css-syntax] <var>… message topic …</var></kbd>”
23 (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
24 <dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://exyr.org/about/>Simon Sapin</a> (<span class="p-org org">Mozilla</span>)</dl></div>
25 <div data-fill-with=warning></div>
26 <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.</p>
27 <hr title="Separator for header">
28 </div>
30 <h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
31 <p class=p-summary data-fill-with=abstract>This module describes, in general terms, the basic structure and syntax of CSS stylesheets. It defines, in detail, the syntax and parsing of CSS - how to turn a stream of bytes into a meaningful stylesheet.
32 <a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
33 (such as HTML and XML)
34 on screen, on paper, in speech, etc.</p>
36 <h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2>
37 <div data-fill-with=status><p>
38 This is a public copy of the editors' draft.
39 It is provided for discussion only and may change at any moment.
40 Its publication here does not imply endorsement of its contents by W3C.
41 Don’t cite this document other than as work in progress.
43 <p>
44 The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list
45 <a href="mailto:www-style@w3.org?Subject=%5Bcss-syntax%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>
46 (see <a href=http://www.w3.org/Mail/Request>instructions</a>)
47 is preferred for discussion of this specification.
48 When sending e-mail,
49 please put the text “css-syntax” in the subject,
50 preferably like this:
51 “[css-syntax] <em>…summary of comment…</em>”
53 <p>
54 This document was produced by the <a href=/Style/CSS/members>CSS Working Group</a>
55 (part of the <a href=/Style/>Style Activity</a>).
57 <p>
58 This document was produced by a group operating under
59 the <a href=/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>.
60 W3C maintains a <a href=/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a>
61 made in connection with the deliverables of the group;
62 that page also includes instructions for disclosing a patent.
63 An individual who has actual knowledge of a patent which the individual believes contains <a href=/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a>
64 must disclose the information in accordance with <a href=/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div>
65 <div data-fill-with=at-risk></div>
67 <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
68 <div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>
69 Introduction</a><ul class=toc><li><a href=#placement><span class=secno>1.1</span>
70 Module interactions</a></ul><li><a href=#syntax-description><span class=secno>2</span>
71 Description of CSS’s Syntax</a><ul class=toc><li><a href=#escaping><span class=secno>2.1</span>
72 Escaping</a><li><a href=#error-handling><span class=secno>2.2</span>
73 Error Handling</a></ul><li><a href=#tokenizing-and-parsing-css><span class=secno>3</span>
74 Tokenizing and Parsing CSS</a><ul class=toc><li><a href=#overview-of-the-parsing-model><span class=secno>3.1</span>
75 Overview of the Parsing Model</a><li><a href=#the-input-byte-stream><span class=secno>3.2</span>
76 The input byte stream</a><li><a href=#preprocessing-the-input-stream><span class=secno>3.3</span>
77 Preprocessing the input stream</a></ul><li><a href=#tokenization><span class=secno>4</span>
78 Tokenization</a><ul class=toc><li><a href=#token-diagrams><span class=secno>4.1</span>
79 Token Railroad Diagrams</a><li><a href=#definitions0><span class=secno>4.2</span>
80 Definitions</a><li><a href=#tokenizer-algorithms><span class=secno>4.3</span>
81 Tokenizer Algorithms</a><ul class=toc><li><a href=#consume-a-token><span class=secno>4.3.1</span>
82 Consume a token</a><li><a href=#consume-a-numeric-token><span class=secno>4.3.2</span>
83 Consume a numeric token</a><li><a href=#consume-an-ident-like-token><span class=secno>4.3.3</span>
84 Consume an ident-like token</a><li><a href=#consume-a-string-token><span class=secno>4.3.4</span>
85 Consume a string token</a><li><a href=#consume-a-url-token><span class=secno>4.3.5</span>
86 Consume a url token</a><li><a href=#consume-a-unicode-range-token><span class=secno>4.3.6</span>
87 Consume a unicode-range token</a><li><a href=#consume-an-escaped-code-point><span class=secno>4.3.7</span>
88 Consume an escaped code point</a><li><a href=#check-if-two-code-points-are-a-valid-escape><span class=secno>4.3.8</span>
89 Check if two code points are a valid escape</a><li><a href=#check-if-three-code-points-would-start-an-identifier><span class=secno>4.3.9</span>
90 Check if three code points would start an identifier</a><li><a href=#check-if-three-code-points-would-start-a-number><span class=secno>4.3.10</span>
91 Check if three code points would start a number</a><li><a href=#consume-a-name><span class=secno>4.3.11</span>
92 Consume a name</a><li><a href=#consume-a-number><span class=secno>4.3.12</span>
93 Consume a number</a><li><a href=#convert-a-string-to-a-number><span class=secno>4.3.13</span>
94 Convert a string to a number</a><li><a href=#consume-the-remnants-of-a-bad-url><span class=secno>4.3.14</span>
95 Consume the remnants of a bad url</a></ul></ul><li><a href=#parsing><span class=secno>5</span>
96 Parsing</a><ul class=toc><li><a href=#parser-diagrams><span class=secno>5.1</span>
97 Parser Railroad Diagrams</a><li><a href=#definitions><span class=secno>5.2</span>
98 Definitions</a><li><a href=#parser-entry-points><span class=secno>5.3</span>
99 Parser Entry Points</a><ul class=toc><li><a href=#parse-a-stylesheet><span class=secno>5.3.1</span>
100 Parse a stylesheet</a><li><a href=#parse-a-list-of-rules><span class=secno>5.3.2</span>
101 Parse a list of rules</a><li><a href=#parse-a-rule><span class=secno>5.3.3</span>
102 Parse a rule</a><li><a href=#parse-a-declaration><span class=secno>5.3.4</span>
103 Parse a declaration</a><li><a href=#parse-a-list-of-declarations><span class=secno>5.3.5</span>
104 Parse a list of declarations</a><li><a href=#parse-a-component-value><span class=secno>5.3.6</span>
105 Parse a component value</a><li><a href=#parse-a-list-of-component-values><span class=secno>5.3.7</span>
106 Parse a list of component values</a></ul><li><a href=#parser-algorithms><span class=secno>5.4</span>
107 Parser Algorithms</a><ul class=toc><li><a href=#consume-a-list-of-rules><span class=secno>5.4.1</span>
108 Consume a list of rules</a><li><a href=#consume-an-at-rule><span class=secno>5.4.2</span>
109 Consume an at-rule</a><li><a href=#consume-a-qualified-rule><span class=secno>5.4.3</span>
110 Consume a qualified rule</a><li><a href=#consume-a-list-of-declarations><span class=secno>5.4.4</span>
111 Consume a list of declarations</a><li><a href=#consume-a-declaration><span class=secno>5.4.5</span>
112 Consume a declaration</a><li><a href=#consume-a-component-value><span class=secno>5.4.6</span>
113 Consume a component value</a><li><a href=#consume-a-simple-block><span class=secno>5.4.7</span>
114 Consume a simple block</a><li><a href=#consume-a-function><span class=secno>5.4.8</span>
115 Consume a function</a></ul></ul><li><a href=#anb><span class=secno>6</span>
116 The <var>An+B</var> microsyntax</a><ul class=toc><li><a href=#anb-syntax><span class=secno>6.1</span>
117 Informal Syntax Description</a><li><a href=#the-anb-type><span class=secno>6.2</span>
118 The <code><an+b></code> type</a></ul><li><a href=#rule-defs><span class=secno>7</span>
119 Defining Grammars for Rules and Other Values</a><ul class=toc><li><a href=#declaration-rule-list><span class=secno>7.1</span>
120 Defining Block Contents: the <span class=production data-link-type=type><declaration-list></span>, <span class=production data-link-type=type><rule-list></span>, and <span class=production data-link-type=type><stylesheet></span> productions</a></ul><li><a href=#css-stylesheets><span class=secno>8</span>
121 CSS stylesheets</a><ul class=toc><li><a href=#style-rules><span class=secno>8.1</span>
122 Style rules</a><li><a href=#the-charset-rule><span class=secno>8.2</span>
123 The <span class=css data-link-type=maybe>@charset</span> Rule</a></ul><li><a href=#serialization><span class=secno>9</span>
124 Serialization</a><ul class=toc><li><a href=#serializing-anb><span class=secno>9.1</span>
125 Serializing <var><an+b></var></a></ul><li><a href=#changes><span class=secno>10</span>Changes from CSS 2.1 and Selectors Level 3</a><li><a href=#acknowledgments><span class=secno></span>
126 Acknowledgments</a><li><a href=#conformance><span class=secno></span>
127 Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span>
128 Document conventions</a><li><a href=#conformance-classes><span class=secno></span>
129 Conformance classes</a><li><a href=#partial><span class=secno></span>
130 Partial implementations</a><li><a href=#experimental><span class=secno></span>
131 Experimental implementations</a><li><a href=#testing><span class=secno></span>
132 Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span>
133 References</a><ul class=toc><li><a href=#normative><span class=secno></span>
134 Normative References</a><li><a href=#informative><span class=secno></span>
135 Informative References</a></ul><li><a href=#index><span class=secno></span>
136 Index</a><li><a href=#property-index><span class=secno></span>
137 Property index</a><li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
141 <h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content>
142 Introduction</span><a class=self-link href=#intro></a></h2>
144 <p> <em>This section is not normative.</em>
146 <p> This module defines the abstract syntax and parsing of CSS stylesheets
147 and other things which use CSS syntax
148 (such as the HTML <code>style</code> attribute).
150 <p> It defines algorithms for converting a stream of Unicode <a href=#code-point>code points</a>
151 (in other words, text)
152 into a stream of CSS tokens,
153 and then further into CSS objects
154 such as stylesheets, rules, and declarations.
156 <h3 class="heading settled heading" data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content>
157 Module interactions</span><a class=self-link href=#placement></a></h3>
159 <p> This module defines the syntax and parsing of CSS stylesheets.
160 It supersedes the lexical scanner and grammar defined in CSS 2.1.
162 <h2 class="heading settled heading" data-level=2 id=syntax-description><span class=secno>2 </span><span class=content>
163 Description of CSS’s Syntax</span><a class=self-link href=#syntax-description></a></h2>
165 <p> <em>This section is not normative.</em>
167 <p> A CSS document is a series of <a href=#qualified-rule>qualified rules</a>,
168 which are usually style rules that apply CSS properties to elements,
169 and <a href=#at-rule>at-rules</a>,
170 which define special processing rules or values for the CSS document.
172 <p> A qualified rule starts with a prelude
173 then has a {}-wrapped block containing a sequence of declarations.
174 The meaning of the prelude varies based on the context that the rule appears in -
175 for style rules, it’s a selector which specifies what elements the declarations will apply to.
176 Each declaration has a name,
177 followed by a colon and the declaration value.
178 Declarations are separated by semicolons.
180 <div class=example>
182 <p> A typical rule might look something like this:
184 <pre> p > a {
185 color: blue;
186 text-decoration: underline;
187 }
188 </pre>
189 <p> In the above rule, "<code>p > a</code>" is the selector,
190 which, if the source document is HTML,
191 selects any <code><a></code> elements that are children of a <code><p></code> element.
193 <p> "<code>color: blue;</code>" is a declaration specifying that,
194 for the elements that match the selector,
195 their <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-color-3/#color0 title=color>color</a> property should have the value <span class=css data-link-type=maybe>blue</span>.
196 Similiarly, their <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#text-decoration title=text-decoration>text-decoration</a> property should have the value <span class=css data-link-type=maybe>underline</span>.
197 </div>
199 <p> At-rules are all different, but they have a basic structure in common.
200 They start with an "@" <a href=#code-point>code point</a> followed by their name.
201 Some <a href=#at-rule>at-rules</a> are simple statements,
202 with their name followed by more CSS values to specify their behavior,
203 and finally ended by a semicolon.
204 Others are blocks;
205 they can have CSS values following their name,
206 but they end with a {}-wrapped block,
207 similar to a <a href=#qualified-rule>qualified rule</a>.
208 Even the contents of these blocks are specific to the given <a href=#at-rule>at-rule</a>:
209 sometimes they contain a sequence of declarations, like a <a href=#qualified-rule>qualified rule</a>;
210 other times, they may contain additional blocks, or at-rules, or other structures altogether.
212 <div class=example>
214 <p> Here are several examples of <a href=#at-rule>at-rules</a> that illustrate the varied syntax they may contain.
216 <pre>@import "my-styles.css";</pre>
217 <p> The <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-cascade-3/#at-ruledef-import>@import</a> <a href=#at-rule>at-rule</a> is a simple statement.
218 After its name, it takes a single string or <span class=css data-link-type=maybe>url()</span> function to indicate the stylesheet that it should import.
220 <pre> @page :left {
221 margin-left: 4cm;
222 margin-right: 3cm;
223 }
224 </pre>
225 <p> The <span class=css data-link-type=maybe>@page</span> <a href=#at-rule>at-rule</a> consists of an optional page selector (the <span class=css data-link-type=maybe>:left</span> pseudoclass),
226 followed by a block of properties that apply to the page when printed.
227 In this way, it’s very similar to a normal style rule,
228 except that its properties don’t apply to any "element",
229 but rather the page itself.
231 <pre> @media print {
232 body { font-size: 10pt }
233 }
234 </pre>
235 <p> The <span class=css data-link-type=maybe>@media</span> <a href=#at-rule>at-rule</a> begins with a media type
236 and a list of optional media queries.
237 Its block contains entire rules,
238 which are only applied when the <span class=css data-link-type=maybe>@media</span>s conditions are fulfilled.
239 </div>
241 <p> Property names and <a href=#at-rule>at-rule</a> names are always <b>identifiers</b>,
242 which have to start with a letter or a hyphen followed by a letter,
243 and then can contain letters, numbers, hyphens, or underscores.
244 You can include any <a href=#code-point>code point</a> at all,
245 even ones that CSS uses in its syntax,
246 by <a href=#escaping0>escaping</a> it.
248 <p> The syntax of selectors is defined in the <a href=http://www.w3.org/TR/selectors/>Selectors spec</a>.
249 Similarly, the syntax of the wide variety of CSS values is defined in the <a href=http://www.w3.org/TR/css3-values/>Values & Units spec</a>.
250 The special syntaxes of individual <a href=#at-rule>at-rules</a> can be found in the specs that define them.
252 <h3 class="heading settled heading" data-level=2.1 id=escaping><span class=secno>2.1 </span><span class=content>
253 Escaping</span><a class=self-link href=#escaping></a></h3>
255 <p> <em>This section is not normative.</em>
257 <p> Any Unicode <a href=#code-point>code point</a> can be included in an identifier or quoted string
258 by <dfn data-dfn-type=dfn data-noexport="" id=escaping0>escaping<a class=self-link href=#escaping0></a></dfn> it.
259 CSS escape sequences start with a backslash (\), and continue with:
261 <p> <ul>
262 <li>
263 Any Unicode <a href=#code-point>code point</a> that is not a <a href=#hex-digit>hex digits</a> or a <a href=#newline>newline</a>.
264 The escape sequence is replaced by that <a href=#code-point>code point</a>.
265 <li>
266 Or one to six <a href=#hex-digit>hex digits</a>, followed by an optional <a href=#whitespace>whitespace</a>.
267 The escape sequence is replaced by the Unicode <a href=#code-point>code point</a>
268 whose value is given by the hexadecimal digits.
269 This optional whitespace allow hexadecimal escape sequences
270 to be followed by "real" hex digits.
272 <p class=example>
273 An identifier with the value "&B"
274 could be written as <span class=css data-link-type=maybe>\26 B</span> or <span class=css data-link-type=maybe>\000026B</span>.
276 <p class=note>
277 A "real" space after the escape sequence must be doubled.
278 </ul>
280 <h3 class="heading settled heading" data-level=2.2 id=error-handling><span class=secno>2.2 </span><span class=content>
281 Error Handling</span><a class=self-link href=#error-handling></a></h3>
283 <p> <em>This section is not normative.</em>
285 <p> When errors occur in CSS,
286 the parser attempts to recover gracefully,
287 throwing away only the minimum amount of content
288 before returning to parsing as normal.
289 This is because errors aren’t always mistakes -
290 new syntax looks like an error to an old parser,
291 and it’s useful to be able to add new syntax to the language
292 without worrying about stylesheets that include it being completely broken in older UAs.
294 <p> The precise error-recovery behavior is detailed in the parser itself,
295 but it’s simple enough that a short description is fairly accurate:
297 <p> <ul>
298 <li>
299 At the "top level" of a stylesheet,
300 an <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a> starts an at-rule.
301 Anything else starts a qualified rule,
302 and is included in the rule’s prelude.
303 This may produce an invalid selector,
304 but that’s not the concern of the CSS parser —
305 at worst, it means the selector will match nothing.
307 <li>
308 Once an at-rule starts,
309 nothing is invalid from the parser’s standpoint;
310 it’s all part of the at-rule’s prelude.
311 Encountering a <a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a> ends the at-rule immediately,
312 while encountering an opening curly-brace <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a> starts the at-rule’s body.
313 The at-rule seeks forward, matching blocks (content surrounded by (), {}, or [])
314 until it finds a closing curly-brace <a class=css-code data-link-type=token href=#tokendef-close-curly>〈}〉</a> that isn’t matched by anything else
315 or inside of another block.
316 The contents of the at-rule are then interpreted according to the at-rule’s own grammar.
318 <li>
319 Qualified rules work similarly,
320 except that semicolons don’t end them;
321 instead, they are just taken in as part of the rule’s prelude.
322 When the first {} block is found,
323 the contents are always interpreted as a list of declarations.
325 <li>
326 When interpreting a list of declarations,
327 unknown syntax at any point causes the parser to throw away whatever declaration it’s currently building,
328 and seek forward until it finds a semicolon (or the end of the block).
329 It then starts fresh, trying to parse a declaration again.
331 <li>
332 If the stylesheet ends while any rule, declaration, function, string, etc. are still open,
333 everything is automatically closed.
334 This doesn’t make them invalid,
335 though they may be incomplete
336 and thus thrown away when they are verified against their grammar.
337 </ul>
339 <h2 class="heading settled heading" data-level=3 id=tokenizing-and-parsing-css><span class=secno>3 </span><span class=content>
340 Tokenizing and Parsing CSS</span><a class=self-link href=#tokenizing-and-parsing-css></a></h2>
342 <p> User agents must use the parsing rules described in this specification
343 to generate the CSSOM trees from text/css resources.
344 Together, these rules define what is referred to as the CSS parser.
346 <p> This specification defines the parsing rules for CSS documents,
347 whether they are syntactically correct or not.
348 Certain points in the parsing algorithm are said to be a <dfn data-dfn-type=dfn data-noexport="" id=parse-errors title="parse error">parse errors<a class=self-link href=#parse-errors></a></dfn>.
349 The error handling for parse errors is well-defined:
350 user agents must either act as described below when encountering such problems,
351 or must abort processing at the first error that they encounter for which they do not wish to apply the rules described below.
353 <p> Conformance checkers must report at least one parse error condition to the user
354 if one or more parse error conditions exist in the document
355 and must not report parse error conditions
356 if none exist in the document.
357 Conformance checkers may report more than one parse error condition if more than one parse error condition exists in the document.
358 Conformance checkers are not required to recover from parse errors,
359 but if they do,
360 they must recover in the same way as user agents.
362 <h3 class="heading settled heading" data-level=3.1 id=overview-of-the-parsing-model><span class=secno>3.1 </span><span class=content>
363 Overview of the Parsing Model</span><a class=self-link href=#overview-of-the-parsing-model></a></h3>
365 <p> The input to the CSS parsing process consists of a stream of Unicode <a href=#code-point>code points</a>,
366 which is passed through a tokenization stage followed by a tree construction stage.
367 The output is a CSSStyleSheet object.
369 <p class=note> Note: Implementations that do not support scripting do not have to actually create a CSSOM CSSStyleSheet object,
370 but the CSSOM tree in such cases is still used as the model for the rest of the specification.
372 <h3 class="heading settled heading" data-level=3.2 id=the-input-byte-stream><span class=secno>3.2 </span><span class=content>
373 The input byte stream</span><a class=self-link href=#the-input-byte-stream></a></h3>
375 <p> When parsing a stylesheet,
376 the stream of Unicode <a href=#code-point>code points</a> that comprises the input to the tokenization stage
377 may be initially seen by the user agent as a stream of bytes
378 (typically coming over the network or from the local file system).
379 The bytes encode the <a href=#code-point>code points</a> according to a particular character encoding,
380 which the user agent must use to decode the bytes into <a href=#code-point>code points</a>.
382 <p> To decode the stream of bytes into a stream of <a href=#code-point>code points</a>,
383 UAs must follow these steps.
385 <p> The algorithms to <a href=http://encoding.spec.whatwg.org/#concept-encoding-get><dfn data-dfn-type=dfn data-noexport="" id=get-an-encoding>get an encoding<a class=self-link href=#get-an-encoding></a></dfn></a>
386 and <a href=http://encoding.spec.whatwg.org/#decode><dfn data-dfn-type=dfn data-noexport="" id=decode>decode<a class=self-link href=#decode></a></dfn></a>
387 are defined in the <a href=http://encoding.spec.whatwg.org/>Encoding Standard</a>.
389 <p> First, <dfn data-dfn-type=dfn data-noexport="" id=determine-the-fallback-encoding>determine the fallback encoding<a class=self-link href=#determine-the-fallback-encoding></a></dfn>:
391 <ol>
392 <li>
393 If HTTP or equivalent protocol defines an encoding (e.g. via the charset parameter of the Content-Type header),
394 <a href=#get-an-encoding>get an encoding</a> for the specified value.
395 If that does not return failure,
396 use the return value as the fallback encoding.
398 <li>
399 Otherwise, check the byte stream. If the first several bytes match the hex sequence
401 <pre>40 63 68 61 72 73 65 74 20 22 (not 22)* 22 3B</pre>
402 <p> then <a href=#get-an-encoding>get an encoding</a> for the sequence of <code>(not 22)*</code> bytes,
403 decoded per <code>windows-1252</code>.
405 <p class=note> Note: Anything ASCII-compatible will do, so using <code>windows-1252</code> is fine.
408 <p class=note> Note: The byte sequence above,
409 when decoded as ASCII,
410 is the string "<code>@charset "…";</code>",
411 where the "…" is the sequence of bytes corresponding to the encoding’s name.
413 <p> If the return value was <code>utf-16</code> or <code>utf-16be</code>,
414 use <code>utf-8</code> as the fallback encoding;
415 if it was anything else except failure,
416 use the return value as the fallback encoding.
418 <p class=note> Note: This mimics HTML <code><meta></code> behavior.
420 <li>
421 Otherwise, <a href=#get-an-encoding>get an encoding</a> for the value of the <code>charset</code> attribute on the <code><link></code> element or <code><?xml-stylesheet?></code> processing instruction that caused the style sheet to be included, if any.
422 If that does not return failure,
423 use the return value as the fallback encoding.
425 <li>
426 Otherwise, if the referring style sheet or document has an encoding,
427 use that as the fallback encoding.
429 <li>
430 Otherwise, use <code>utf-8</code> as the fallback encoding.
431 </ol>
433 <p> Then, <a href=#decode>decode</a> the byte stream using the fallback encoding.
435 <p class=note> Note: the <a href=#decode>decode</a> algorithm lets the byte order mark (BOM) take precedence,
436 hence the usage of the term "fallback" above.
438 <p class=issue id=issue-b26a56fd><a class=self-link href=#issue-b26a56fd></a>
439 Anne says that steps 3/4 should be an input to this algorithm from the specs that define importing stylesheet,
440 to make the algorithm as a whole cleaner.
441 Perhaps abstract it into the concept of an "environment charset" or something?
443 <p class=issue id=issue-ab273e4b><a class=self-link href=#issue-ab273e4b></a>
444 Should we only take the charset from the referring document if it’s same-origin?
447 <h3 class="heading settled heading" data-level=3.3 id=preprocessing-the-input-stream><span class=secno>3.3 </span><span class=content>
448 Preprocessing the input stream</span><a class=self-link href=#preprocessing-the-input-stream></a></h3>
450 <p> The input stream consists of the <a href=#code-point>code points</a>
451 pushed into it as the input byte stream is decoded.
453 <p> Before sending the input stream to the tokenizer,
454 implementations must make the following <a href=#code-point>code point</a> substitutions:
456 <p> <ul>
457 <li>
458 Replace any U+000D CARRIAGE RETURN (CR) <a href=#code-point>code point</a>,
459 U+000C FORM FEED (FF) <a href=#code-point>code point</a>,
460 or pairs of U+000D CARRIAGE RETURN (CR) followed by U+000A LINE FEED (LF)
461 by a single U+000A LINE FEED (LF) <a href=#code-point>code point</a>.
463 <li>
464 Replace any U+0000 NULL <a href=#code-point>code point</a> with U+FFFD REPLACEMENT CHARACTER (�).
465 </ul>
468 <h2 class="heading settled heading" data-level=4 id=tokenization><span class=secno>4 </span><span class=content>
469 Tokenization</span><a class=self-link href=#tokenization></a></h2>
471 <p> Implementations must act as if they used the following algorithms to tokenize CSS.
472 To transform a stream of <a href=#code-point>code points</a> into a stream of tokens,
473 repeatedly <a href=#consume-a-token0>consume a token</a>
474 until an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a> is reached,
475 collecting the returned tokens into a stream.
476 Each call to the <a href=#consume-a-token0>consume a token</a> algorithm
477 returns a single token,
478 so it can also be used "on-demand" to tokenize a stream of <a href=#code-point>code points</a> <em>during</em> parsing,
479 if so desired.
481 <p> The output of the tokenization step is a stream of zero or more of the following tokens:
482 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-ident>〈ident〉<a class=self-link href=#tokendef-ident></a></dfn>,
483 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-function>〈function〉<a class=self-link href=#tokendef-function></a></dfn>,
484 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-at-keyword>〈at-keyword〉<a class=self-link href=#tokendef-at-keyword></a></dfn>,
485 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-hash>〈hash〉<a class=self-link href=#tokendef-hash></a></dfn>,
486 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-string>〈string〉<a class=self-link href=#tokendef-string></a></dfn>,
487 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-bad-string>〈bad-string〉<a class=self-link href=#tokendef-bad-string></a></dfn>,
488 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-url>〈url〉<a class=self-link href=#tokendef-url></a></dfn>,
489 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-bad-url>〈bad-url〉<a class=self-link href=#tokendef-bad-url></a></dfn>,
490 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-delim>〈delim〉<a class=self-link href=#tokendef-delim></a></dfn>,
491 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-number>〈number〉<a class=self-link href=#tokendef-number></a></dfn>,
492 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-percentage>〈percentage〉<a class=self-link href=#tokendef-percentage></a></dfn>,
493 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-dimension>〈dimension〉<a class=self-link href=#tokendef-dimension></a></dfn>,
494 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-unicode-range>〈unicode-range〉<a class=self-link href=#tokendef-unicode-range></a></dfn>,
495 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-include-match>〈include-match〉<a class=self-link href=#tokendef-include-match></a></dfn>,
496 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-dash-match>〈dash-match〉<a class=self-link href=#tokendef-dash-match></a></dfn>,
497 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-prefix-match>〈prefix-match〉<a class=self-link href=#tokendef-prefix-match></a></dfn>,
498 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-suffix-match>〈suffix-match〉<a class=self-link href=#tokendef-suffix-match></a></dfn>,
499 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-substring-match>〈substring-match〉<a class=self-link href=#tokendef-substring-match></a></dfn>,
500 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-column>〈column〉<a class=self-link href=#tokendef-column></a></dfn>,
501 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-whitespace>〈whitespace〉<a class=self-link href=#tokendef-whitespace></a></dfn>,
502 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-cdo>〈CDO〉<a class=self-link href=#tokendef-cdo></a></dfn>,
503 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-cdc>〈CDC〉<a class=self-link href=#tokendef-cdc></a></dfn>,
504 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-colon>〈colon〉<a class=self-link href=#tokendef-colon></a></dfn>,
505 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-semicolon>〈semicolon〉<a class=self-link href=#tokendef-semicolon></a></dfn>,
506 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-comma>〈comma〉<a class=self-link href=#tokendef-comma></a></dfn>,
507 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-open-square>〈[〉<a class=self-link href=#tokendef-open-square></a></dfn>,
508 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-close-square>〈]〉<a class=self-link href=#tokendef-close-square></a></dfn>,
509 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-open-paren>〈(〉<a class=self-link href=#tokendef-open-paren></a></dfn>,
510 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-close-paren>〈)〉<a class=self-link href=#tokendef-close-paren></a></dfn>,
511 <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-open-curly>〈{〉<a class=self-link href=#tokendef-open-curly></a></dfn>,
512 and <dfn class=css-code data-dfn-type=token data-export="" id=tokendef-close-curly>〈}〉<a class=self-link href=#tokendef-close-curly></a></dfn>.
514 <p> <ul>
515 <li>
516 <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>, <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>, <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a>, <a class=css-code data-link-type=token href=#tokendef-hash>〈hash〉</a>, <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a>, and <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a> tokens have a value composed of zero or more <a href=#code-point>code points</a>.
517 Additionally, hash tokens have a type flag set to either "id" or "unrestricted". The type flag defaults to "unrestricted" if not otherwise set.
519 <li>
520 <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> tokens have a value composed of a single <a href=#code-point>code point</a>.
522 <li>
523 <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a>, <a class=css-code data-link-type=token href=#tokendef-percentage>〈percentage〉</a>, and <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> tokens have a representation composed of one or more <a href=#code-point>code points</a>, and a numeric value.
524 <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a> and <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> tokens additionally have a type flag set to either "integer" or "number". The type flag defaults to "integer" if not otherwise set.
525 <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> tokens additionally have a unit composed of one or more <a href=#code-point>code points</a>.
527 <li>
528 <a class=css-code data-link-type=token href=#tokendef-unicode-range>〈unicode-range〉</a> tokens have
529 a <dfn data-dfn-type=dfn data-noexport="" id=unicode-range-start title=unicode-range-start>start<a class=self-link href=#unicode-range-start></a></dfn> made of one to six <a href=#hex-digit>hex digits</a> or U+003F QUESTION MARK (?) code points,
530 and and optional <dfn data-dfn-type=dfn data-noexport="" id=unicode-range-end title=unicode-range-end>end<a class=self-link href=#unicode-range-end></a></dfn> made of one to six <a href=#hex-digit>hex digits</a>.
531 </ul>
533 <p class=note> Note: The type flag of hash tokens is used in the Selectors syntax <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a>.
534 Only hash tokens with the "id" type are valid <a href=http://www.w3.org/TR/selectors/#id-selectors>ID selectors</a>.
536 <p class=note> Note: The syntax of <a class=css-code data-link-type=token href=#tokendef-unicode-range>〈unicode-range〉</a> tokens defined in this specification
537 is a super-set of the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#urange-value><urange></a> value accepted by <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a>’s <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#descdef-unicode-range title=unicode-range>unicode-range</a> descriptor. <a data-biblio-type=informative data-link-type=biblio href=#css3-fonts title=CSS3-FONTS>[CSS3-FONTS]</a>
538 For example, <span class=css data-link-type=maybe>U+4??6</span> and <span class=css data-link-type=maybe>U+1??-300</span> are valid <a class=css-code data-link-type=token href=#tokendef-unicode-range>〈unicode-range〉</a> tokens
539 but not valid <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-fonts-3/#urange-value><urange></a> values.
541 <p class=note> Note: As a technical note,
542 the tokenizer defined here requires only three <a href=#code-point>code points</a> of look-ahead.
543 The tokens it produces are designed to allow Selectors to be parsed with one token of look-ahead,
544 and additional tokens may be added in the future to maintain this invariant.
547 <h3 class="heading settled heading" data-level=4.1 id=token-diagrams><span class=secno>4.1 </span><span class=content>
548 Token Railroad Diagrams</span><a class=self-link href=#token-diagrams></a></h3>
550 <p> <em>This section is non-normative.</em>
552 <p> This section presents an informative view of the tokenizer,
553 in the form of railroad diagrams.
554 Railroad diagrams are more compact than an explicit parser,
555 but often easier to read than an regular expression.
557 <p> These diagrams are <em>informative</em> and <em>incomplete</em>;
558 they describe the grammar of "correct" tokens,
559 but do not describe error-handling at all.
560 They are provided solely to make it easier to get an intuitive grasp of the syntax of each token.
562 <p> Diagrams with names between <<<>>> brackets represent tokens.
563 The rest are productions referred to by other diagrams.
565 <!--
566 The "source" of these diagrams is in ./Diagrams.src.html
567 The generated SVG is copied here so that JavaScript is not required
568 to view the spec.
569 -->
570 <dl>
571 <dt id=comment-diagram><a class=self-link href=#comment-diagram></a>comment</dt>
572 <dd><svg class=railroad-diagram height=81 width=497><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M86 41h0"></path><rect height=22 rx=10 ry=10 width=36 x=50 y=30></rect><text x=68 y=45>/*</text></g><path d="M86 41h10"></path><g><path d="M96 41h0"></path><path d="M400 41h0"></path><path d="M96 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M116 21h264"></path></g><path d="M380 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M96 41h20"></path><g><path d="M116 41h0"></path><path d="M380 41h0"></path><path d="M116 41h10"></path><g><path d="M126 41h0"></path><path d="M370 41h0"></path><rect height=22 width=244 x=126 y=30></rect><text x=248 y=45>anything but * followed by /</text></g><path d="M370 41h10"></path><path d="M126 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M126 61h244"></path></g><path d="M370 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M380 41h20"></path></g><path d="M400 41h10"></path><g><path d="M410 41h0"></path><path d="M446 41h0"></path><rect height=22 rx=10 ry=10 width=36 x=410 y=30></rect><text x=428 y=45>*/</text></g><path d="M446 41h10"></path><path d="M 456 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
574 <dt id=newline-diagram><a class=self-link href=#newline-diagram></a>newline</dt>
575 <dd><svg class=railroad-diagram height=152 width=173><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 31h0"></path><path d="M132 31h0"></path><path d="M40 31h20"></path><g><path d="M60 31h8"></path><path d="M104 31h8"></path><rect height=22 rx=10 ry=10 width=36 x=68 y=20></rect><text x=86 y=35>\n</text></g><path d="M112 31h20"></path><path d="M40 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M60 61h0"></path><path d="M112 61h0"></path><rect height=22 rx=10 ry=10 width=52 x=60 y=50></rect><text x=86 y=65>\r\n</text></g><path d="M112 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><path d="M40 31a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"></path><g><path d="M60 91h8"></path><path d="M104 91h8"></path><rect height=22 rx=10 ry=10 width=36 x=68 y=80></rect><text x=86 y=95>\r</text></g><path d="M112 91a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"></path><path d="M40 31a10 10 0 0 1 10 10v70a10 10 0 0 0 10 10"></path><g><path d="M60 121h8"></path><path d="M104 121h8"></path><rect height=22 rx=10 ry=10 width=36 x=68 y=110></rect><text x=86 y=125>\f</text></g><path d="M112 121a10 10 0 0 0 10 -10v-70a10 10 0 0 1 10 -10"></path></g><path d="M 132 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
577 <dt id=whitespace-diagram><a class=self-link href=#whitespace-diagram></a>whitespace</dt>
578 <dd><svg class=railroad-diagram height=122 width=197><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 31h0"></path><path d="M156 31h0"></path><path d="M40 31h20"></path><g><path d="M60 31h8"></path><path d="M128 31h8"></path><rect height=22 rx=10 ry=10 width=60 x=68 y=20></rect><text x=98 y=35>space</text></g><path d="M136 31h20"></path><path d="M40 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M60 61h20"></path><path d="M116 61h20"></path><rect height=22 rx=10 ry=10 width=36 x=80 y=50></rect><text x=98 y=65>\t</text></g><path d="M136 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><path d="M40 31a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"></path><g><path d="M60 91h0"></path><path d="M136 91h0"></path><rect height=22 width=76 x=60 y=80></rect><text x=98 y=95>newline</text></g><path d="M136 91a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"></path></g><path d="M 156 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
580 <dt id=hex-digit-diagram><a class=self-link href=#hex-digit-diagram></a>hex digit</dt>
581 <dd><svg class=railroad-diagram height=62 width=233><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M182 31h0"></path><rect height=22 width=132 x=50 y=20></rect><text x=116 y=35>0-9 a-f or A-F</text></g><path d="M182 31h10"></path><path d="M 192 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
583 <dt id=escape-diagram><a class=self-link href=#escape-diagram></a>escape</dt>
584 <dd><svg class=railroad-diagram height=122 width=441><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M78 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=50 y=20></rect><text x=64 y=35>\</text></g><path d="M78 31h10"></path><g><path d="M88 31h0"></path><path d="M400 31h0"></path><path d="M88 31h20"></path><g><path d="M108 31h30"></path><path d="M350 31h30"></path><rect height=22 width=212 x=138 y=20></rect><text x=244 y=35>not newline or hex digit</text></g><path d="M380 31h20"></path><path d="M88 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M108 61h0"></path><path d="M380 61h0"></path><path d="M108 61h10"></path><g><path d="M118 61h0"></path><path d="M230 61h0"></path><path d="M118 61h10"></path><g><path d="M128 61h0"></path><path d="M220 61h0"></path><rect height=22 width=92 x=128 y=50></rect><text x=174 y=65>hex digit</text></g><path d="M220 61h10"></path><path d="M128 61a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10"></path><g><path d="M128 91h9.5"></path><path d="M210.5 91h9.5"></path><text class=comment x=174 y=96>1-6 times</text></g><path d="M220 91a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10"></path></g><path d="M230 61h10"></path><g><path d="M240 61h0"></path><path d="M380 61h0"></path><path d="M240 61h20"></path><g><path d="M260 61h100"></path></g><path d="M360 61h20"></path><path d="M240 61a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><g><path d="M260 81h0"></path><path d="M360 81h0"></path><rect height=22 width=100 x=260 y=70></rect><text x=310 y=85>whitespace</text></g><path d="M360 81a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path></g></g><path d="M380 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M 400 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
586 <dt id=〈whitespace〉-diagram><a class=self-link href=#〈whitespace〉-diagram></a>〈whitespace〉</dt>
587 <dd><svg class=railroad-diagram height=71 width=221><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M170 31h0"></path><path d="M50 31h10"></path><g><path d="M60 31h0"></path><path d="M160 31h0"></path><rect height=22 width=100 x=60 y=20></rect><text x=110 y=35>whitespace</text></g><path d="M160 31h10"></path><path d="M60 31a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M60 51h100"></path></g><path d="M160 51a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M170 31h10"></path><path d="M 180 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
589 <dt id=〈ident〉-diagram><a class=self-link href=#〈ident〉-diagram></a>〈ident〉</dt>
590 <dd><svg class=railroad-diagram height=110 width=729><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 41h0"></path><path d="M108 41h0"></path><path d="M40 41h20"></path><g><path d="M60 41h28"></path></g><path d="M88 41h20"></path><path d="M40 41a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><g><path d="M60 61h0"></path><path d="M88 61h0"></path><rect height=22 rx=10 ry=10 width=28 x=60 y=50></rect><text x=74 y=65>-</text></g><path d="M88 61a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path></g><g><path d="M108 41h0"></path><path d="M344 41h0"></path><path d="M108 41h20"></path><g><path d="M128 41h0"></path><path d="M324 41h0"></path><rect height=22 width=196 x=128 y=30></rect><text x=226 y=45>a-z A-Z _ or non-ASCII</text></g><path d="M324 41h20"></path><path d="M108 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M128 71h64"></path><path d="M260 71h64"></path><rect height=22 width=68 x=192 y=60></rect><text x=226 y=75>escape</text></g><path d="M324 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><g><path d="M344 41h0"></path><path d="M688 41h0"></path><path d="M344 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M364 21h304"></path></g><path d="M668 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M344 41h20"></path><g><path d="M364 41h0"></path><path d="M668 41h0"></path><path d="M364 41h10"></path><g><path d="M374 41h0"></path><path d="M658 41h0"></path><path d="M374 41h20"></path><g><path d="M394 41h0"></path><path d="M638 41h0"></path><rect height=22 width=244 x=394 y=30></rect><text x=516 y=45>a-z A-Z 0-9 _ - or non-ASCII</text></g><path d="M638 41h20"></path><path d="M374 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M394 71h88"></path><path d="M550 71h88"></path><rect height=22 width=68 x=482 y=60></rect><text x=516 y=75>escape</text></g><path d="M638 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M658 41h10"></path><path d="M374 41a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10"></path><g><path d="M374 90h284"></path></g><path d="M658 90a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10"></path></g><path d="M668 41h20"></path></g><path d="M 688 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
592 <dt id=〈function〉-diagram><a class=self-link href=#〈function〉-diagram></a>〈function〉</dt>
593 <dd><svg class=railroad-diagram height=62 width=225><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M126 31h0"></path><rect height=22 width=76 x=50 y=20></rect><text x=88 y=35>〈ident〉</text></g><path d="M126 31h10"></path><path d="M136 31h10"></path><g><path d="M146 31h0"></path><path d="M174 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=146 y=20></rect><text x=160 y=35>(</text></g><path d="M174 31h10"></path><path d="M 184 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
595 <dt id=〈at-keyword〉-diagram><a class=self-link href=#〈at-keyword〉-diagram></a>〈at-keyword〉</dt>
596 <dd><svg class=railroad-diagram height=62 width=225><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M78 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=50 y=20></rect><text x=64 y=35>@</text></g><path d="M78 31h10"></path><path d="M88 31h10"></path><g><path d="M98 31h0"></path><path d="M174 31h0"></path><rect height=22 width=76 x=98 y=20></rect><text x=136 y=35>〈ident〉</text></g><path d="M174 31h10"></path><path d="M 184 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
598 <dt id=〈hash〉-diagram><a class=self-link href=#〈hash〉-diagram></a>〈hash〉</dt>
599 <dd><svg class=railroad-diagram height=100 width=453><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M78 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=50 y=20></rect><text x=64 y=35>#</text></g><path d="M78 31h10"></path><path d="M88 31h10"></path><g><path d="M98 31h0"></path><path d="M402 31h0"></path><path d="M98 31h10"></path><g><path d="M108 31h0"></path><path d="M392 31h0"></path><path d="M108 31h20"></path><g><path d="M128 31h0"></path><path d="M372 31h0"></path><rect height=22 width=244 x=128 y=20></rect><text x=250 y=35>a-z A-Z 0-9 _ - or non-ASCII</text></g><path d="M372 31h20"></path><path d="M108 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M128 61h88"></path><path d="M284 61h88"></path><rect height=22 width=68 x=216 y=50></rect><text x=250 y=65>escape</text></g><path d="M372 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M392 31h10"></path><path d="M108 31a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10"></path><g><path d="M108 80h284"></path></g><path d="M392 80a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10"></path></g><path d="M402 31h10"></path><path d="M 412 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
601 <dt id=〈string〉-diagram><a class=self-link href=#〈string〉-diagram></a>〈string〉</dt>
602 <dd><svg class=railroad-diagram height=248 width=481><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 41h0"></path><path d="M440 41h0"></path><path d="M40 41h20"></path><g><path d="M60 41h0"></path><path d="M420 41h0"></path><path d="M60 41h10"></path><g><path d="M70 41h0"></path><path d="M98 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=70 y=30></rect><text x=84 y=45>"</text></g><path d="M98 41h10"></path><g><path d="M108 41h0"></path><path d="M372 41h0"></path><path d="M108 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M128 21h224"></path></g><path d="M352 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M108 41h20"></path><g><path d="M128 41h0"></path><path d="M352 41h0"></path><path d="M128 41h10"></path><g><path d="M138 41h0"></path><path d="M342 41h0"></path><path d="M138 41h20"></path><g><path d="M158 41h0"></path><path d="M322 41h0"></path><rect height=22 width=164 x=158 y=30></rect><text x=240 y=45>not " \ or newline</text></g><path d="M322 41h20"></path><path d="M138 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M158 71h48"></path><path d="M274 71h48"></path><rect height=22 width=68 x=206 y=60></rect><text x=240 y=75>escape</text></g><path d="M322 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><path d="M138 41a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"></path><g><path d="M158 101h10"></path><path d="M312 101h10"></path><path d="M168 101h10"></path><g><path d="M178 101h0"></path><path d="M206 101h0"></path><rect height=22 rx=10 ry=10 width=28 x=178 y=90></rect><text x=192 y=105>\</text></g><path d="M206 101h10"></path><path d="M216 101h10"></path><g><path d="M226 101h0"></path><path d="M302 101h0"></path><rect height=22 width=76 x=226 y=90></rect><text x=264 y=105>newline</text></g><path d="M302 101h10"></path></g><path d="M322 101a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"></path></g><path d="M342 41h10"></path><path d="M138 41a10 10 0 0 0 -10 10v59a10 10 0 0 0 10 10"></path><g><path d="M138 120h204"></path></g><path d="M342 120a10 10 0 0 0 10 -10v-59a10 10 0 0 0 -10 -10"></path></g><path d="M352 41h20"></path></g><path d="M372 41h10"></path><g><path d="M382 41h0"></path><path d="M410 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=382 y=30></rect><text x=396 y=45>"</text></g><path d="M410 41h10"></path></g><path d="M420 41h20"></path><path d="M40 41a10 10 0 0 1 10 10v88a10 10 0 0 0 10 10"></path><g><path d="M60 149h0"></path><path d="M420 149h0"></path><path d="M60 149h10"></path><g><path d="M70 149h0"></path><path d="M98 149h0"></path><rect height=22 rx=10 ry=10 width=28 x=70 y=138></rect><text x=84 y=153>'</text></g><path d="M98 149h10"></path><g><path d="M108 149h0"></path><path d="M372 149h0"></path><path d="M108 149a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M128 129h224"></path></g><path d="M352 129a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M108 149h20"></path><g><path d="M128 149h0"></path><path d="M352 149h0"></path><path d="M128 149h10"></path><g><path d="M138 149h0"></path><path d="M342 149h0"></path><path d="M138 149h20"></path><g><path d="M158 149h0"></path><path d="M322 149h0"></path><rect height=22 width=164 x=158 y=138></rect><text x=240 y=153>not ' \ or newline</text></g><path d="M322 149h20"></path><path d="M138 149a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M158 179h48"></path><path d="M274 179h48"></path><rect height=22 width=68 x=206 y=168></rect><text x=240 y=183>escape</text></g><path d="M322 179a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><path d="M138 149a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"></path><g><path d="M158 209h10"></path><path d="M312 209h10"></path><path d="M168 209h10"></path><g><path d="M178 209h0"></path><path d="M206 209h0"></path><rect height=22 rx=10 ry=10 width=28 x=178 y=198></rect><text x=192 y=213>\</text></g><path d="M206 209h10"></path><path d="M216 209h10"></path><g><path d="M226 209h0"></path><path d="M302 209h0"></path><rect height=22 width=76 x=226 y=198></rect><text x=264 y=213>newline</text></g><path d="M302 209h10"></path></g><path d="M322 209a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"></path></g><path d="M342 149h10"></path><path d="M138 149a10 10 0 0 0 -10 10v59a10 10 0 0 0 10 10"></path><g><path d="M138 228h204"></path></g><path d="M342 228a10 10 0 0 0 10 -10v-59a10 10 0 0 0 -10 -10"></path></g><path d="M352 149h20"></path></g><path d="M372 149h10"></path><g><path d="M382 149h0"></path><path d="M410 149h0"></path><rect height=22 rx=10 ry=10 width=28 x=382 y=138></rect><text x=396 y=153>'</text></g><path d="M410 149h10"></path></g><path d="M420 149a10 10 0 0 0 10 -10v-88a10 10 0 0 1 10 -10"></path></g><path d="M 440 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
604 <dt id=〈url〉-diagram><a class=self-link href=#〈url〉-diagram></a>〈url〉</dt>
605 <dd><svg class=railroad-diagram height=102 width=829><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M174 41h0"></path><rect height=22 width=124 x=50 y=30></rect><text x=112 y=45>〈ident "url"〉</text></g><path d="M174 41h10"></path><path d="M184 41h10"></path><g><path d="M194 41h0"></path><path d="M222 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=194 y=30></rect><text x=208 y=45>(</text></g><path d="M222 41h10"></path><g><path d="M232 41h0"></path><path d="M388 41h0"></path><path d="M232 41h20"></path><g><path d="M252 41h116"></path></g><path d="M368 41h20"></path><path d="M232 41a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><g><path d="M252 61h0"></path><path d="M368 61h0"></path><rect height=22 width=116 x=252 y=50></rect><text x=310 y=65>〈whitespace〉</text></g><path d="M368 61a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path></g><g><path d="M388 41h0"></path><path d="M740 41h0"></path><path d="M388 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M408 21h312"></path></g><path d="M720 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M388 41h20"></path><g><path d="M408 41h0"></path><path d="M720 41h0"></path><g><path d="M408 41h0"></path><path d="M564 41h0"></path><path d="M408 41h20"></path><g><path d="M428 41h0"></path><path d="M544 41h0"></path><rect height=22 width=116 x=428 y=30></rect><text x=486 y=45>url-unquoted</text></g><path d="M544 41h20"></path><path d="M408 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M428 71h24"></path><path d="M520 71h24"></path><rect height=22 width=68 x=452 y=60></rect><text x=486 y=75>STRING</text></g><path d="M544 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><g><path d="M564 41h0"></path><path d="M720 41h0"></path><path d="M564 41h20"></path><g><path d="M584 41h116"></path></g><path d="M700 41h20"></path><path d="M564 41a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><g><path d="M584 61h0"></path><path d="M700 61h0"></path><rect height=22 width=116 x=584 y=50></rect><text x=642 y=65>〈whitespace〉</text></g><path d="M700 61a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path></g></g><path d="M720 41h20"></path></g><path d="M740 41h10"></path><g><path d="M750 41h0"></path><path d="M778 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=750 y=30></rect><text x=764 y=45>)</text></g><path d="M778 41h10"></path><path d="M 788 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
607 <dt id=url-unquoted-diagram><a class=self-link href=#url-unquoted-diagram></a>url-unquoted</dt>
608 <dd><svg class=railroad-diagram height=100 width=509><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M458 31h0"></path><path d="M50 31h10"></path><g><path d="M60 31h0"></path><path d="M448 31h0"></path><path d="M60 31h20"></path><g><path d="M80 31h0"></path><path d="M428 31h0"></path><rect height=22 width=348 x=80 y=20></rect><text x=254 y=35>not " ' ( ) \ whitespace or non-printable</text></g><path d="M428 31h20"></path><path d="M60 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M80 61h140"></path><path d="M288 61h140"></path><rect height=22 width=68 x=220 y=50></rect><text x=254 y=65>escape</text></g><path d="M428 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M448 31h10"></path><path d="M60 31a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10"></path><g><path d="M60 80h388"></path></g><path d="M448 80a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10"></path></g><path d="M458 31h10"></path><path d="M 468 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
610 <dt id=〈number〉-diagram><a class=self-link href=#〈number〉-diagram></a>〈number〉</dt>
611 <dd><svg class=railroad-diagram height=179 width=713><g transform="translate(.5 .5)"><path d="M 20 50 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 60h0"></path><path d="M108 60h0"></path><path d="M40 60a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M60 40h0"></path><path d="M88 40h0"></path><rect height=22 rx=10 ry=10 width=28 x=60 y=29></rect><text x=74 y=44>+</text></g><path d="M88 40a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M40 60h20"></path><g><path d="M60 60h28"></path></g><path d="M88 60h20"></path><path d="M40 60a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><g><path d="M60 80h0"></path><path d="M88 80h0"></path><rect height=22 rx=10 ry=10 width=28 x=60 y=69></rect><text x=74 y=84>-</text></g><path d="M88 80a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path></g><g><path d="M108 60h0"></path><path d="M396 60h0"></path><path d="M108 60h20"></path><g><path d="M128 60h0"></path><path d="M376 60h0"></path><path d="M128 60h10"></path><g><path d="M138 60h0"></path><path d="M218 60h0"></path><path d="M138 60h10"></path><g><path d="M148 60h0"></path><path d="M208 60h0"></path><rect height=22 width=60 x=148 y=49></rect><text x=178 y=64>digit</text></g><path d="M208 60h10"></path><path d="M148 60a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M148 80h60"></path></g><path d="M208 80a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M218 60h10"></path><path d="M228 60h10"></path><g><path d="M238 60h0"></path><path d="M266 60h0"></path><rect height=22 rx=10 ry=10 width=28 x=238 y=49></rect><text x=252 y=64>.</text></g><path d="M266 60h10"></path><path d="M276 60h10"></path><g><path d="M286 60h0"></path><path d="M366 60h0"></path><path d="M286 60h10"></path><g><path d="M296 60h0"></path><path d="M356 60h0"></path><rect height=22 width=60 x=296 y=49></rect><text x=326 y=64>digit</text></g><path d="M356 60h10"></path><path d="M296 60a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M296 80h60"></path></g><path d="M356 80a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M366 60h10"></path></g><path d="M376 60h20"></path><path d="M108 60a10 10 0 0 1 10 10v19a10 10 0 0 0 10 10"></path><g><path d="M128 99h84"></path><path d="M292 99h84"></path><path d="M212 99h10"></path><g><path d="M222 99h0"></path><path d="M282 99h0"></path><rect height=22 width=60 x=222 y=88></rect><text x=252 y=103>digit</text></g><path d="M282 99h10"></path><path d="M222 99a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M222 119h60"></path></g><path d="M282 119a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M376 99a10 10 0 0 0 10 -10v-19a10 10 0 0 1 10 -10"></path><path d="M108 60a10 10 0 0 1 10 10v58a10 10 0 0 0 10 10"></path><g><path d="M128 138h50"></path><path d="M326 138h50"></path><path d="M178 138h10"></path><g><path d="M188 138h0"></path><path d="M216 138h0"></path><rect height=22 rx=10 ry=10 width=28 x=188 y=127></rect><text x=202 y=142>.</text></g><path d="M216 138h10"></path><path d="M226 138h10"></path><g><path d="M236 138h0"></path><path d="M316 138h0"></path><path d="M236 138h10"></path><g><path d="M246 138h0"></path><path d="M306 138h0"></path><rect height=22 width=60 x=246 y=127></rect><text x=276 y=142>digit</text></g><path d="M306 138h10"></path><path d="M246 138a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M246 158h60"></path></g><path d="M306 158a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M316 138h10"></path></g><path d="M376 138a10 10 0 0 0 10 -10v-58a10 10 0 0 1 10 -10"></path></g><g><path d="M396 60h0"></path><path d="M672 60h0"></path><path d="M396 60h20"></path><g><path d="M416 60h236"></path></g><path d="M652 60h20"></path><path d="M396 60a10 10 0 0 1 10 10v28a10 10 0 0 0 10 10"></path><g><path d="M416 108h0"></path><path d="M652 108h0"></path><g><path d="M416 108h0"></path><path d="M484 108h0"></path><path d="M416 108h20"></path><g><path d="M436 108h0"></path><path d="M464 108h0"></path><rect height=22 rx=10 ry=10 width=28 x=436 y=97></rect><text x=450 y=112>e</text></g><path d="M464 108h20"></path><path d="M416 108a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M436 138h0"></path><path d="M464 138h0"></path><rect height=22 rx=10 ry=10 width=28 x=436 y=127></rect><text x=450 y=142>E</text></g><path d="M464 138a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><g><path d="M484 108h0"></path><path d="M552 108h0"></path><path d="M484 108a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M504 88h0"></path><path d="M532 88h0"></path><rect height=22 rx=10 ry=10 width=28 x=504 y=77></rect><text x=518 y=92>+</text></g><path d="M532 88a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M484 108h20"></path><g><path d="M504 108h28"></path></g><path d="M532 108h20"></path><path d="M484 108a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><g><path d="M504 128h0"></path><path d="M532 128h0"></path><rect height=22 rx=10 ry=10 width=28 x=504 y=117></rect><text x=518 y=132>-</text></g><path d="M532 128a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path></g><path d="M552 108h10"></path><g><path d="M562 108h0"></path><path d="M642 108h0"></path><path d="M562 108h10"></path><g><path d="M572 108h0"></path><path d="M632 108h0"></path><rect height=22 width=60 x=572 y=97></rect><text x=602 y=112>digit</text></g><path d="M632 108h10"></path><path d="M572 108a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M572 128h60"></path></g><path d="M632 128a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M642 108h10"></path></g><path d="M652 108a10 10 0 0 0 10 -10v-28a10 10 0 0 1 10 -10"></path></g><path d="M 672 60 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
613 <dt id=〈dimension〉-diagram><a class=self-link href=#〈dimension〉-diagram></a>〈dimension〉</dt>
614 <dd><svg class=railroad-diagram height=62 width=281><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M134 31h0"></path><rect height=22 width=84 x=50 y=20></rect><text x=92 y=35>〈number〉</text></g><path d="M134 31h10"></path><path d="M144 31h10"></path><g><path d="M154 31h0"></path><path d="M230 31h0"></path><rect height=22 width=76 x=154 y=20></rect><text x=192 y=35>〈ident〉</text></g><path d="M230 31h10"></path><path d="M 240 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
616 <dt id=〈percentage〉-diagram><a class=self-link href=#〈percentage〉-diagram></a>〈percentage〉</dt>
617 <dd><svg class=railroad-diagram height=62 width=233><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M134 31h0"></path><rect height=22 width=84 x=50 y=20></rect><text x=92 y=35>〈number〉</text></g><path d="M134 31h10"></path><path d="M144 31h10"></path><g><path d="M154 31h0"></path><path d="M182 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=154 y=20></rect><text x=168 y=35>%</text></g><path d="M182 31h10"></path><path d="M 192 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
619 <dt id=〈unicode-range〉-diagram><a class=self-link href=#〈unicode-range〉-diagram></a>〈unicode-range〉</dt>
620 <dd><svg class=railroad-diagram height=132 width=589><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 41h0"></path><path d="M108 41h0"></path><path d="M40 41h20"></path><g><path d="M60 41h0"></path><path d="M88 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=60 y=30></rect><text x=74 y=45>U</text></g><path d="M88 41h20"></path><path d="M40 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M60 71h0"></path><path d="M88 71h0"></path><rect height=22 rx=10 ry=10 width=28 x=60 y=60></rect><text x=74 y=75>u</text></g><path d="M88 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M108 41h10"></path><g><path d="M118 41h0"></path><path d="M146 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=118 y=30></rect><text x=132 y=45>+</text></g><path d="M146 41h10"></path><g><path d="M156 41h0"></path><path d="M328 41h0"></path><path d="M156 41h10"></path><g><path d="M166 41h0"></path><path d="M318 41h0"></path><path d="M166 41h10"></path><g><path d="M176 41h0"></path><path d="M308 41h0"></path><path d="M176 41h20"></path><g><path d="M196 41h0"></path><path d="M288 41h0"></path><rect height=22 width=92 x=196 y=30></rect><text x=242 y=45>hex digit</text></g><path d="M288 41h20"></path><path d="M176 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M196 71h32"></path><path d="M256 71h32"></path><rect height=22 rx=10 ry=10 width=28 x=228 y=60></rect><text x=242 y=75>?</text></g><path d="M288 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M308 41h10"></path><path d="M176 41a10 10 0 0 0 -10 10v40a10 10 0 0 0 10 10"></path><g><path d="M176 101h29.5"></path><path d="M278.5 101h29.5"></path><text class=comment x=242 y=106>1-6 times</text></g><path d="M308 101a10 10 0 0 0 10 -10v-40a10 10 0 0 0 -10 -10"></path></g><path d="M318 41h10"></path></g><g><path d="M328 41h0"></path><path d="M548 41h0"></path><path d="M328 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M348 21h180"></path></g><path d="M528 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M328 41h20"></path><g><path d="M348 41h0"></path><path d="M528 41h0"></path><path d="M348 41h10"></path><g><path d="M358 41h0"></path><path d="M386 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=358 y=30></rect><text x=372 y=45>-</text></g><path d="M386 41h10"></path><path d="M396 41h10"></path><g><path d="M406 41h0"></path><path d="M518 41h0"></path><path d="M406 41h10"></path><g><path d="M416 41h0"></path><path d="M508 41h0"></path><rect height=22 width=92 x=416 y=30></rect><text x=462 y=45>hex digit</text></g><path d="M508 41h10"></path><path d="M416 41a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10"></path><g><path d="M416 71h9.5"></path><path d="M498.5 71h9.5"></path><text class=comment x=462 y=76>1-6 times</text></g><path d="M508 71a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10"></path></g><path d="M518 41h10"></path></g><path d="M528 41h20"></path></g><path d="M 548 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
622 <dt id=〈include-match〉-diagram><a class=self-link href=#〈include-match〉-diagram></a>〈include-match〉</dt>
623 <dd><svg class=railroad-diagram height=62 width=137><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M86 31h0"></path><rect height=22 rx=10 ry=10 width=36 x=50 y=20></rect><text x=68 y=35>~=</text></g><path d="M86 31h10"></path><path d="M 96 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
625 <dt id=〈dash-match〉-diagram><a class=self-link href=#〈dash-match〉-diagram></a>〈dash-match〉</dt>
626 <dd><svg class=railroad-diagram height=62 width=137><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M86 31h0"></path><rect height=22 rx=10 ry=10 width=36 x=50 y=20></rect><text x=68 y=35>|=</text></g><path d="M86 31h10"></path><path d="M 96 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
628 <dt id=〈prefix-match〉-diagram><a class=self-link href=#〈prefix-match〉-diagram></a>〈prefix-match〉</dt>
629 <dd><svg class=railroad-diagram height=62 width=137><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M86 31h0"></path><rect height=22 rx=10 ry=10 width=36 x=50 y=20></rect><text x=68 y=35>^=</text></g><path d="M86 31h10"></path><path d="M 96 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
631 <dt id=〈suffix-match〉-diagram><a class=self-link href=#〈suffix-match〉-diagram></a>〈suffix-match〉</dt>
632 <dd><svg class=railroad-diagram height=62 width=137><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M86 31h0"></path><rect height=22 rx=10 ry=10 width=36 x=50 y=20></rect><text x=68 y=35>$=</text></g><path d="M86 31h10"></path><path d="M 96 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
634 <dt id=〈substring-match〉-diagram><a class=self-link href=#〈substring-match〉-diagram></a>〈substring-match〉</dt>
635 <dd><svg class=railroad-diagram height=62 width=137><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M86 31h0"></path><rect height=22 rx=10 ry=10 width=36 x=50 y=20></rect><text x=68 y=35>*=</text></g><path d="M86 31h10"></path><path d="M 96 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
637 <dt id=〈column〉-diagram><a class=self-link href=#〈column〉-diagram></a>〈column〉</dt>
638 <dd><svg class=railroad-diagram height=62 width=137><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M86 31h0"></path><rect height=22 rx=10 ry=10 width=36 x=50 y=20></rect><text x=68 y=35>||</text></g><path d="M86 31h10"></path><path d="M 96 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
640 <dt id=〈cdo〉-diagram><a class=self-link href=#〈cdo〉-diagram></a>〈CDO〉</dt>
641 <dd><svg class=railroad-diagram height=62 width=153><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M102 31h0"></path><rect height=22 rx=10 ry=10 width=52 x=50 y=20></rect><text x=76 y=35><!--</text></g><path d="M102 31h10"></path><path d="M 112 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
643 <dt id=〈cdc〉-diagram><a class=self-link href=#〈cdc〉-diagram></a>〈CDC〉</dt>
644 <dd><svg class=railroad-diagram height=62 width=145><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M94 31h0"></path><rect height=22 rx=10 ry=10 width=44 x=50 y=20></rect><text x=72 y=35>--></text></g><path d="M94 31h10"></path><path d="M 104 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
646 </dl>
648 <h3 class="heading settled heading" data-level=4.2 id=definitions0><span class=secno>4.2 </span><span class=content>
649 Definitions</span><a class=self-link href=#definitions0></a></h3>
651 <p> This section defines several terms used during the tokenization phase.
653 <dl>
654 <dt><dfn data-dfn-type=dfn data-noexport="" id=code-point>code point<a class=self-link href=#code-point></a></dfn>
655 <dd>
656 A <a href=http://unicode.org/glossary/#code_point>Unicode code point</a>.
657 Any value in the Unicode codespace; that is, the range of integers from 0 to (hexadecimal) 10FFFF.
659 <dt><dfn data-dfn-type=dfn data-noexport="" id=next-input-code-point>next input code point<a class=self-link href=#next-input-code-point></a></dfn>
660 <dd>
661 The first <a href=#code-point>code point</a> in the input stream that has not yet been consumed.
663 <dt><dfn data-dfn-type=dfn data-noexport="" id=current-input-code-point>current input code point<a class=self-link href=#current-input-code-point></a></dfn>
664 <dd>
665 The last <a href=#code-point>code point</a> to have been consumed.
667 <dt><dfn data-dfn-type=dfn data-noexport="" id=reconsume-the-current-input-code-point>reconsume the current input code point<a class=self-link href=#reconsume-the-current-input-code-point></a></dfn>
668 <dd>
669 Push the <a href=#current-input-code-point>current input code point</a> back onto the front of the input stream,
670 so that the next time you are instructed to consume the <a href=#next-input-code-point>next input code point</a>,
671 it will instead reconsume the <a href=#current-input-code-point>current input code point</a>.
673 <dt><dfn data-dfn-type=dfn data-noexport="" id=eof-code-point>EOF code point<a class=self-link href=#eof-code-point></a></dfn>
674 <dd>
675 A conceptual <a href=#code-point>code point</a> representing the end of the input stream.
676 Whenever the input stream is empty,
677 the <a href=#next-input-code-point>next input code point</a> is always an EOF code point.
679 <dt><dfn data-dfn-type=dfn data-noexport="" id=digit>digit<a class=self-link href=#digit></a></dfn>
680 <dd>
681 A <a href=#code-point>code point</a> between U+0030 DIGIT ZERO (0) and U+0039 DIGIT NINE (9).
683 <dt><dfn data-dfn-type=dfn data-noexport="" id=hex-digit>hex digit<a class=self-link href=#hex-digit></a></dfn>
684 <dd>
685 A <a href=#digit>digit</a>,
686 or a <a href=#code-point>code point</a> between U+0041 LATIN CAPITAL LETTER A (A) and U+0046 LATIN CAPITAL LETTER F (F),
687 or a <a href=#code-point>code point</a> between U+0061 LATIN SMALL LETTER A (a) and U+0066 LATIN SMALL LETTER F (f).
689 <dt><dfn data-dfn-type=dfn data-noexport="" id=uppercase-letter>uppercase letter<a class=self-link href=#uppercase-letter></a></dfn>
690 <dd>
691 A <a href=#code-point>code point</a> between U+0041 LATIN CAPITAL LETTER A (A) and U+005A LATIN CAPITAL LETTER Z (Z).
693 <dt><dfn data-dfn-type=dfn data-noexport="" id=lowercase-letter>lowercase letter<a class=self-link href=#lowercase-letter></a></dfn>
694 <dd>
695 A <a href=#code-point>code point</a> between U+0061 LATIN SMALL LETTER A (a) and U+007A LATIN SMALL LETTER Z (z).
697 <dt><dfn data-dfn-type=dfn data-noexport="" id=letter>letter<a class=self-link href=#letter></a></dfn>
698 <dd>
699 An <a href=#uppercase-letter>uppercase letter</a>
700 or a <a href=#lowercase-letter>lowercase letter</a>.
702 <dt><dfn data-dfn-type=dfn data-noexport="" id=non-ascii-code-point>non-ASCII code point<a class=self-link href=#non-ascii-code-point></a></dfn>
703 <dd>
704 A <a href=#code-point>code point</a> with a value equal to or greater than U+0080 <control>.
706 <dt><dfn data-dfn-type=dfn data-noexport="" id=name-start-code-point>name-start code point<a class=self-link href=#name-start-code-point></a></dfn>
707 <dd>
708 A <a href=#letter>letter</a>,
709 a <a href=#non-ascii-code-point>non-ASCII code point</a>,
710 or U+005F LOW LINE (_).
712 <dt><dfn data-dfn-type=dfn data-noexport="" id=name-code-point>name code point<a class=self-link href=#name-code-point></a></dfn>
713 <dd>
714 A <a href=#name-start-code-point>name-start code point</a>,
715 A <a href=#digit>digit</a>,
716 or U+002D HYPHEN-MINUS (-).
718 <dt><dfn data-dfn-type=dfn data-noexport="" id=non-printable-code-point>non-printable code point<a class=self-link href=#non-printable-code-point></a></dfn>
719 <dd>
720 A <a href=#code-point>code point</a> between U+0000 NULL and U+0008 BACKSPACE,
721 or U+000B LINE TABULATION,
722 or a <a href=#code-point>code point</a> between U+000E SHIFT OUT and U+001F INFORMATION SEPARATOR ONE,
723 or U+007F DELETE.
725 <dt><dfn data-dfn-type=dfn data-noexport="" id=newline>newline<a class=self-link href=#newline></a></dfn>
726 <dd>
727 U+000A LINE FEED.
728 <span class=note>
729 Note that U+000D CARRIAGE RETURN and U+000C FORM FEED are not included in this definition,
730 as they are converted to U+000A LINE FEED during <a href=#preprocessing-the-input-stream>preprocessing</a>.
731 </span>
733 <dt><dfn data-dfn-type=dfn data-noexport="" id=whitespace>whitespace<a class=self-link href=#whitespace></a></dfn>
734 <dd>A <a href=#newline>newline</a>, U+0009 CHARACTER TABULATION, or U+0020 SPACE.
736 <dt><dfn data-dfn-type=dfn data-noexport="" id=surrogate-code-point>surrogate code point<a class=self-link href=#surrogate-code-point></a></dfn>
737 <dd>
738 A <a href=#code-point>code point</a> between U+D800 and U+DFFF inclusive.
740 <dt><dfn data-dfn-type=dfn data-noexport="" id=maximum-allowed-code-point>maximum allowed code point<a class=self-link href=#maximum-allowed-code-point></a></dfn>
741 <dd>The greatest <a href=#code-point>code point</a> defined by Unicode. This is currently U+10FFFF.
743 </dl>
745 <h3 class="heading settled heading" data-level=4.3 id=tokenizer-algorithms><span class=secno>4.3 </span><span class=content>
746 Tokenizer Algorithms</span><a class=self-link href=#tokenizer-algorithms></a></h3>
748 <p> The algorithms defined in this section transform a stream of <a href=#code-point>code points</a> into a stream of tokens.
750 <h4 class="heading settled heading" data-level=4.3.1 id=consume-a-token><span class=secno>4.3.1 </span><span class=content>
751 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-token0>Consume a token<a class=self-link href=#consume-a-token0></a></dfn></span><a class=self-link href=#consume-a-token></a></h4>
753 <p> This section describes how to <a href=#consume-a-token0>consume a token</a> from a stream of <a href=#code-point>code points</a>.
754 It will return a single token of any type.
756 <p> Consume the <a href=#next-input-code-point>next input code point</a>.
758 <dl>
759 <dt><a href=#whitespace>whitespace</a>
760 <dd>
761 Consume as much <a href=#whitespace>whitespace</a> as possible.
762 Return a <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>.
764 <dt>U+0022 QUOTATION MARK (")
765 <dd>
766 <a href=#consume-a-string-token0>Consume a string token</a> with the ending <a href=#code-point>code point</a> U+0022 QUOTATION MARK (")
767 and return it.
769 <dt>U+0023 NUMBER SIGN (#)
770 <dd>
771 If the <a href=#next-input-code-point>next input code point</a> is a <a href=#name-code-point>name code point</a>
772 or the <a href=#next-input-code-point title="next input code point">next two input code points</a>
773 <a href=#check-if-two-code-points-are-a-valid-escape0>are a valid escape</a>,
774 then:
776 <ol>
777 <li>
778 Create a <a class=css-code data-link-type=token href=#tokendef-hash>〈hash〉</a>.
780 <li>
781 If the <a href=#next-input-code-point title="next input code point">next 3 input code points</a> <a href=#check-if-three-code-points-would-start-an-identifier0>would start an identifier</a>,
782 set the <a class=css-code data-link-type=token href=#tokendef-hash>〈hash〉</a>’s type flag to "id".
784 <li>
785 <a href=#consume-a-name0>Consume a name</a>,
786 and set the <a class=css-code data-link-type=token href=#tokendef-hash>〈hash〉</a>’s value to the returned string.
788 <li>
789 Return the <a class=css-code data-link-type=token href=#tokendef-hash>〈hash〉</a>.
790 </ol>
792 <p> Otherwise,
793 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
794 with its value set to the <a href=#current-input-code-point>current input code point</a>.
796 <dt>U+0024 DOLLAR SIGN ($)
797 <dd>
798 If the <a href=#next-input-code-point>next input code point</a> is
799 U+003D EQUALS SIGN (=),
800 consume it
801 and return a <a class=css-code data-link-type=token href=#tokendef-suffix-match>〈suffix-match〉</a>.
803 <p> Otherwise,
804 emit a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
805 with its value set to the <a href=#current-input-code-point>current input code point</a>.
807 <dt>U+0027 APOSTROPHE (')
808 <dd>
809 <a href=#consume-a-string-token0>Consume a string token</a> with the ending <a href=#code-point>code point</a> U+0027 APOSTROPHE (')
810 and return it.
812 <dt>U+0028 LEFT PARENTHESIS (()
813 <dd>
814 Return a <a class=css-code data-link-type=token href=#tokendef-open-paren>〈(〉</a>.
816 <dt>U+0029 RIGHT PARENTHESIS ())
817 <dd>
818 Return a <a class=css-code data-link-type=token href=#tokendef-close-paren>〈)〉</a>.
820 <dt>U+002A ASTERISK (*)
821 <dd>
822 If the <a href=#next-input-code-point>next input code point</a> is
823 U+003D EQUALS SIGN (=),
824 consume it
825 and return a <a class=css-code data-link-type=token href=#tokendef-substring-match>〈substring-match〉</a>.
827 <p> Otherwise,
828 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
829 with its value set to the <a href=#current-input-code-point>current input code point</a>.
831 <dt>U+002B PLUS SIGN (+)
832 <dd>
833 If the input stream <a href=#check-if-three-code-points-would-start-a-number0>starts with a number</a>,
834 <a href=#reconsume-the-current-input-code-point>reconsume the current input code point</a>,
835 <a href=#consume-a-numeric-token0>consume a numeric token</a>
836 and return it.
838 <p> Otherwise,
839 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
840 with its value set to the <a href=#current-input-code-point>current input code point</a>.
842 <dt>U+002C COMMA (,)
843 <dd>
844 Return a <a class=css-code data-link-type=token href=#tokendef-comma>〈comma〉</a>.
846 <dt>U+002D HYPHEN-MINUS (-)
847 <dd>
848 If the input stream <a href=#check-if-three-code-points-would-start-a-number0>starts with a number</a>,
849 <a href=#reconsume-the-current-input-code-point>reconsume the current input code point</a>,
850 <a href=#consume-a-numeric-token0>consume a numeric token</a>,
851 and return it.
853 <p> Otherwise,
854 if the input stream <a href=#check-if-three-code-points-would-start-an-identifier0>starts with an identifier</a>,
855 <a href=#reconsume-the-current-input-code-point>reconsume the current input code point</a>,
856 <a href=#consume-an-ident-like-token0>consume an ident-like token</a>,
857 and return it.
859 <p> Otherwise,
860 if the <a href=#next-input-code-point title="next input code point">next 2 input code points</a> are
861 U+002D HYPHEN-MINUS
862 U+003E GREATER-THAN SIGN
863 (->),
864 consume them
865 and return a <a class=css-code data-link-type=token href=#tokendef-cdc>〈CDC〉</a>.
867 <p> Otherwise,
868 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
869 with its value set to the <a href=#current-input-code-point>current input code point</a>.
871 <dt>U+002E FULL STOP (.)
872 <dd>
873 If the input stream <a href=#check-if-three-code-points-would-start-a-number0>starts with a number</a>,
874 <a href=#reconsume-the-current-input-code-point>reconsume the current input code point</a>,
875 <a href=#consume-a-numeric-token0>consume a numeric token</a>,
876 and return it.
878 <p> Otherwise,
879 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
880 with its value set to the <a href=#current-input-code-point>current input code point</a>.
882 <dt>U+002F SOLIDUS (/)
883 <dd>
884 If the <a href=#next-input-code-point>next input code point</a> is U+002A ASTERISK (*),
885 consume it
886 and all following <a href=#code-point>code points</a> up to and including
887 the first U+002A ASTERISK (*) followed by a U+002F SOLIDUS (/),
888 or up to an EOF code point.
889 Then <a href=#consume-a-token0>consume a token</a>
890 and return it.
892 <p> Otherwise,
893 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
894 with its value set to the <a href=#current-input-code-point>current input code point</a>.
896 <dt>U+003A COLON (:)
897 <dd>
898 Return a <a class=css-code data-link-type=token href=#tokendef-colon>〈colon〉</a>.
900 <dt>U+003B SEMICOLON (;)
901 <dd>
902 Return a <a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a>.
904 <dt>U+003C LESS-THAN SIGN (<)
905 <dd>
906 If the <a href=#next-input-code-point title="next input code point">next 3 input code points</a> are
907 U+0021 EXCLAMATION MARK
908 U+002D HYPHEN-MINUS
909 U+002D HYPHEN-MINUS
910 (!--),
911 consume them
912 and return a <a class=css-code data-link-type=token href=#tokendef-cdo>〈CDO〉</a>.
914 <p> Otherwise,
915 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
916 with its value set to the <a href=#current-input-code-point>current input code point</a>.
918 <dt>U+0040 COMMERCIAL AT (@)
919 <dd>
920 If the <a href=#next-input-code-point title="next input code point">next 3 input code points</a>
921 <a href=#check-if-three-code-points-would-start-an-identifier0>would start an identifier</a>,
922 <a href=#consume-a-name0>consume a name</a>,
923 create an <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a> with its value set to the returned value,
924 and return it.
926 <p> Otherwise,
927 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
928 with its value set to the <a href=#current-input-code-point>current input code point</a>.
930 <dt>U+005B LEFT SQUARE BRACKET ([)
931 <dd>
932 Return a <a class=css-code data-link-type=token href=#tokendef-open-square>〈[〉</a>.
934 <dt>U+005C REVERSE SOLIDUS (\)
935 <dd>
936 If the input stream <a href=#check-if-two-code-points-are-a-valid-escape0>starts with a valid escape</a>,
937 <a href=#reconsume-the-current-input-code-point>reconsume the current input code point</a>,
938 <a href=#consume-an-ident-like-token0>consume an ident-like token</a>,
939 and return it.
941 <p> Otherwise,
942 this is a <a href=#parse-errors>parse error</a>.
943 Return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
944 with its value set to the <a href=#current-input-code-point>current input code point</a>.
946 <dt>U+005D RIGHT SQUARE BRACKET (])
947 <dd>
948 Return a <a class=css-code data-link-type=token href=#tokendef-close-square>〈]〉</a>.
950 <dt>U+005E CIRCUMFLEX ACCENT (^)
951 <dd>
952 If the <a href=#next-input-code-point>next input code point</a> is
953 U+003D EQUALS SIGN (=),
954 consume it
955 and return a <a class=css-code data-link-type=token href=#tokendef-prefix-match>〈prefix-match〉</a>.
957 <p> Otherwise,
958 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
959 with its value set to the <a href=#current-input-code-point>current input code point</a>.
961 <dt>U+007B LEFT CURLY BRACKET ({)
962 <dd>
963 Return a <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>.
965 <dt>U+007D RIGHT CURLY BRACKET (})
966 <dd>
967 Return a <a class=css-code data-link-type=token href=#tokendef-close-curly>〈}〉</a>.
969 <dt><a href=#digit>digit</a>
970 <dd>
971 <a href=#consume-a-numeric-token0>Consume a numeric token</a>,
972 and return it.
974 <dt>U+0055 LATIN CAPITAL LETTER U (U)
975 <dt>U+0075 LATIN SMALL LETTER U (u)
976 <dd>
977 If the <a href=#next-input-code-point title="next input code point">next 2 input code points</a> are
978 U+002B PLUS SIGN (+)
979 followed by a <a href=#hex-digit>hex digit</a>
980 or U+003F QUESTION MARK (?),
981 consume the <a href=#next-input-code-point>next input code point</a>.
982 <span class=note>Note: don’t consume both of them.</span>
983 <a href=#consume-a-unicode-range-token0>Consume a unicode-range token</a>
984 and return it.
986 <p> Otherwise,
987 <a href=#reconsume-the-current-input-code-point>reconsume the current input code point</a>,
988 <a href=#consume-an-ident-like-token0>consume an ident-like token</a>,
989 and return it.
991 <dt><a href=#name-start-code-point>name-start code point</a>
992 <dd>
993 <a href=#reconsume-the-current-input-code-point>Reconsume the current input code point</a>,
994 <a href=#consume-an-ident-like-token0>consume an ident-like token</a>,
995 and return it.
997 <dt>U+007C VERTICAL LINE (|)
998 <dd>
999 If the <a href=#next-input-code-point>next input code point</a> is
1000 U+003D EQUALS SIGN (=),
1001 consume it
1002 and return a <a class=css-code data-link-type=token href=#tokendef-dash-match>〈dash-match〉</a>.
1004 <p> Otherwise,
1005 if the <a href=#next-input-code-point>next input code point</a> is
1006 U+0073 VERTICAL LINE (|),
1007 consume it
1008 and return a <a class=css-code data-link-type=token href=#tokendef-column>〈column〉</a>.
1010 <p> Otherwise,
1011 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
1012 with its value set to the <a href=#current-input-code-point>current input code point</a>.
1014 <dt>U+007E TILDE (~)
1015 <dd>
1016 If the <a href=#next-input-code-point>next input code point</a> is
1017 U+003D EQUALS SIGN (=),
1018 consume it
1019 and return an <a class=css-code data-link-type=token href=#tokendef-include-match>〈include-match〉</a>.
1021 <p> Otherwise,
1022 return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
1023 with its value set to the <a href=#current-input-code-point>current input code point</a>.
1025 <dt>EOF
1026 <dd>
1027 Return an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a> token.
1029 <dt>anything else
1030 <dd>
1031 Return a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>
1032 with its value set to the <a href=#current-input-code-point>current input code point</a>.
1033 </dl>
1038 <h4 class="heading settled heading" data-level=4.3.2 id=consume-a-numeric-token><span class=secno>4.3.2 </span><span class=content>
1039 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-numeric-token0>Consume a numeric token<a class=self-link href=#consume-a-numeric-token0></a></dfn></span><a class=self-link href=#consume-a-numeric-token></a></h4>
1041 <p> This section describes how to <a href=#consume-a-numeric-token0>consume a numeric token</a> from a stream of <a href=#code-point>code points</a>.
1042 It returns either a <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a>, <a class=css-code data-link-type=token href=#tokendef-percentage>〈percentage〉</a>, or <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a>.
1044 <p> <a href=#consume-a-number0>Consume a number</a>.
1046 <p> If the <a href=#next-input-code-point title="next input code point">next 3 input code points</a> <a href=#check-if-three-code-points-would-start-an-identifier0>would start an identifier</a>,
1047 then:
1049 <ol>
1050 <li>Create a <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> with the same representation, value, and type flag as the returned number,
1051 and a unit set initially to the empty string.
1053 <li><a href=#consume-a-name0>Consume a name</a>.
1054 Set the <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a>’s unit to the returned value.
1056 <li>Return the <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a>.
1057 </ol>
1059 <p> Otherwise,
1060 if the <a href=#next-input-code-point>next input code point</a> is U+0025 PERCENTAGE SIGN (%),
1061 consume it.
1062 Create a <a class=css-code data-link-type=token href=#tokendef-percentage>〈percentage〉</a> with the same representation and value as the returned number,
1063 and return it.
1065 <p> Otherwise,
1066 create a <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a> with the same representation, value, and type flag as the returned number,
1067 and return it.
1070 <h4 class="heading settled heading" data-level=4.3.3 id=consume-an-ident-like-token><span class=secno>4.3.3 </span><span class=content>
1071 <dfn data-dfn-type=dfn data-noexport="" id=consume-an-ident-like-token0>Consume an ident-like token<a class=self-link href=#consume-an-ident-like-token0></a></dfn></span><a class=self-link href=#consume-an-ident-like-token></a></h4>
1073 <p> This section describes how to <a href=#consume-an-ident-like-token0>consume an ident-like token</a> from a stream of <a href=#code-point>code points</a>.
1074 It returns an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>, <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>, <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>, or <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>.
1076 <p> <a href=#consume-a-name0>Consume a name</a>.
1078 <p> If the returned string’s value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "url",
1079 and the <a href=#next-input-code-point>next input code point</a> is U+0028 LEFT PARENTHESIS ((),
1080 consume it.
1081 <a href=#consume-a-url-token0>Consume a url token</a>,
1082 and return it.
1084 <p> Otherwise,
1085 if the <a href=#next-input-code-point>next input code point</a> is U+0028 LEFT PARENTHESIS ((),
1086 consume it.
1087 Create a <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a> token
1088 with its value set to the returned string
1089 and return it.
1091 <p> Otherwise,
1092 create an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a> token
1093 with its value set to the returned string
1094 and return it.
1097 <h4 class="heading settled heading" data-level=4.3.4 id=consume-a-string-token><span class=secno>4.3.4 </span><span class=content>
1098 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-string-token0>Consume a string token<a class=self-link href=#consume-a-string-token0></a></dfn></span><a class=self-link href=#consume-a-string-token></a></h4>
1100 <p> This section describes how to <a href=#consume-a-string-token0>consume a string token</a> from a stream of <a href=#code-point>code points</a>.
1101 It returns either a <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a> or <a class=css-code data-link-type=token href=#tokendef-bad-string>〈bad-string〉</a>.
1103 <p> This algorithm must be called with an <var>ending code point</var>,
1104 which denotes the <a href=#code-point>code point</a> that ends the string.
1106 <p> Initially create a <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a> with its value set to the empty string.
1108 <p> Repeatedly consume the <a href=#next-input-code-point>next input code point</a> from the stream:
1110 <dl>
1111 <dt><var>ending code point</var>
1112 <dt>EOF
1113 <dd>
1114 Return the <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a>.
1116 <dt><a href=#newline>newline</a>
1117 <dd>
1118 This is a <a href=#parse-errors>parse error</a>.
1119 <a href=#reconsume-the-current-input-code-point>Reconsume the current input code point</a>,
1120 create a <a class=css-code data-link-type=token href=#tokendef-bad-string>〈bad-string〉</a>, and return it.
1122 <dt>U+005C REVERSE SOLIDUS (\)
1123 <dd>
1124 If the <a href=#next-input-code-point>next input code point</a> is EOF,
1125 do nothing.
1127 <p> Otherwise,
1128 if the <a href=#next-input-code-point>next input code point</a> is a newline,
1129 consume it.
1131 <p> Otherwise,
1132 if the stream <a href=#check-if-two-code-points-are-a-valid-escape0>starts with a valid escape</a>,
1133 <a href=#consume-an-escaped-code-point0>consume an escaped code point</a>
1134 and append the returned <a href=#code-point>code point</a> to the <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a>’s value.
1136 <dt>anything else
1137 <dd>
1138 Append the <a href=#current-input-code-point>current input code point</a> to the <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a>’s value.
1139 </dl>
1142 <h4 class="heading settled heading" data-level=4.3.5 id=consume-a-url-token><span class=secno>4.3.5 </span><span class=content>
1143 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-url-token0>Consume a url token<a class=self-link href=#consume-a-url-token0></a></dfn></span><a class=self-link href=#consume-a-url-token></a></h4>
1145 <p> This section describes how to <a href=#consume-a-url-token0>consume a url token</a> from a stream of <a href=#code-point>code points</a>.
1146 It returns either a <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a> or a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>.
1148 <p class=note> Note: This algorithm assumes that the initial "url(" has already been consumed.
1150 <p> Execute the following steps in order:
1152 <ol>
1153 <li>
1154 Initially create a <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a> with its value set to the empty string.
1156 <li>
1157 Consume as much <a href=#whitespace>whitespace</a> as possible.
1159 <li>
1160 If the <a href=#next-input-code-point>next input code point</a> is EOF,
1161 return the <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>.
1163 <li>
1164 If the <a href=#next-input-code-point>next input code point</a> is a U+0022 QUOTATION MARK (") or U+0027 APOSTROPHE ('),
1165 then:
1167 <ol>
1168 <li>
1169 <a href=#consume-a-string-token0>Consume a string token</a> with the <a href=#current-input-code-point>current input code point</a> as the ending code point.
1171 <li>
1172 If a <a class=css-code data-link-type=token href=#tokendef-bad-string>〈bad-string〉</a> was returned,
1173 <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a>,
1174 create a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>,
1175 and return it.
1177 <li>
1178 Set the <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>’s value to the returned <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a>’s value.
1180 <li>
1181 Consume as much <a href=#whitespace>whitespace</a> as possible.
1183 <li>
1184 If the <a href=#next-input-code-point>next input code point</a> is U+0029 RIGHT PARENTHESIS ()) or EOF,
1185 consume it and return the <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>;
1186 otherwise,
1187 <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a>,
1188 create a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>,
1189 and return it.
1190 </ol>
1192 <li>
1193 Repeatedly consume the <a href=#next-input-code-point>next input code point</a> from the stream:
1195 <dl>
1196 <dt>U+0029 RIGHT PARENTHESIS ())
1197 <dt>EOF
1198 <dd>
1199 Return the <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>.
1201 <dt><a href=#whitespace>whitespace</a>
1202 <dd>
1203 Consume as much <a href=#whitespace>whitespace</a> as possible.
1204 If the <a href=#next-input-code-point>next input code point</a> is U+0029 RIGHT PARENTHESIS ()) or EOF,
1205 consume it and return the <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>;
1206 otherwise,
1207 <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a>,
1208 create a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>,
1209 and return it.
1211 <dt>U+0022 QUOTATION MARK (")
1212 <dt>U+0027 APOSTROPHE (')
1213 <dt>U+0028 LEFT PARENTHESIS (()
1214 <dt><a href=#non-printable-code-point>non-printable code point</a>
1215 <dd>
1216 This is a <a href=#parse-errors>parse error</a>.
1217 <a href=#consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url</a>,
1218 create a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>,
1219 and return it.
1221 <dt>U+005C REVERSE SOLIDUS
1222 <dd>
1223 If the stream <a href=#check-if-two-code-points-are-a-valid-escape0>starts with a valid escape</a>,
1224 <a href=#consume-an-escaped-code-point0>consume an escaped code point</a>
1225 and append the returned <a href=#code-point>code point</a> to the <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>’s value.
1227 <p> Otherwise,
1228 this is a <a href=#parse-errors>parse error</a>.
1229 <a href=#consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url</a>,
1230 create a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>,
1231 and return it.
1233 <dt>anything else
1234 <dd>
1235 Append the <a href=#current-input-code-point>current input code point</a>
1236 to the <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>’s value.
1237 </dl>
1238 </ol>
1241 <h4 class="heading settled heading" data-level=4.3.6 id=consume-a-unicode-range-token><span class=secno>4.3.6 </span><span class=content>
1242 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-unicode-range-token0>Consume a unicode-range token<a class=self-link href=#consume-a-unicode-range-token0></a></dfn></span><a class=self-link href=#consume-a-unicode-range-token></a></h4>
1244 <p> This section describes how to <a href=#consume-a-unicode-range-token0>consume a unicode-range token</a>.
1245 It returns a <a class=css-code data-link-type=token href=#tokendef-unicode-range>〈unicode-range〉</a> token.
1247 <p class=note> Note: This algorithm assumes that the initial "u+" has been consumed,
1248 and the next <a href=#code-point>code point</a> verified to be a <a href=#hex-digit>hex digit</a> or a "?".
1250 <p> Execute the following steps in order:
1252 <ol>
1253 <li>
1254 Consume as many <a href=#hex-digit>hex digits</a> or U+003F QUESTION MARK (?) as possible,
1255 but no more than 6.
1257 <li>
1258 Create a new <a class=css-code data-link-type=token href=#tokendef-unicode-range>〈unicode-range〉</a>
1259 with its <a href=#unicode-range-start title=unicode-range-start>start</a> set to the result of the previous step,
1260 and with its <a href=#unicode-range-end title=unicode-range-end>end</a> initially unset.
1262 <li>
1263 If the <a href=#next-input-code-point title="next input code point">next 2 input code point</a> are
1264 U+002D HYPHEN-MINUS (-) followed by a <a href=#hex-digit>hex digit</a>,
1265 then:
1267 <ol>
1268 <li>
1269 Consume the <a href=#next-input-code-point>next input code point</a>.
1271 <li>
1272 Consume as many <a href=#hex-digit>hex digits</a> as possible, but no more than 6.
1273 Set the <a href=#unicode-range-end title=unicode-range-end>unicode-range’s end</a> to the result.
1274 </ol>
1276 <li>
1277 Return the token.
1278 </ol>
1281 <h4 class="heading settled heading" data-level=4.3.7 id=consume-an-escaped-code-point><span class=secno>4.3.7 </span><span class=content>
1282 <dfn data-dfn-type=dfn data-noexport="" id=consume-an-escaped-code-point0>Consume an escaped code point<a class=self-link href=#consume-an-escaped-code-point0></a></dfn></span><a class=self-link href=#consume-an-escaped-code-point></a></h4>
1284 <p> This section describes how to <a href=#consume-an-escaped-code-point0>consume an escaped code point</a>.
1285 It assumes that the U+005C REVERSE SOLIDUS (\) has already been consumed
1286 and that the next input code point has already been verified
1287 to not be a <a href=#newline>newline</a> or EOF.
1288 It will return a <a href=#code-point>code point</a>.
1290 <p> Consume the <a href=#next-input-code-point>next input code point</a>.
1292 <dl>
1293 <dt><a href=#hex-digit>hex digit</a>
1294 <dd>
1295 Consume as many <a href=#hex-digit>hex digits</a> as possible, but no more than 5.
1296 <span class=note>Note that this means 1-6 hex digits have been consumed in total.</span>
1297 If the <a href=#next-input-code-point>next input code point</a> is
1298 <a href=#whitespace>whitespace</a>,
1299 consume it as well.
1300 Interpret the <a href=#hex-digit>hex digits</a> as a hexadecimal number.
1301 If this number is zero,
1302 or is for a <a href=#surrogate-code-point>surrogate code point</a>,
1303 or is greater than the <a href=#maximum-allowed-code-point>maximum allowed code point</a>,
1304 return U+FFFD REPLACEMENT CHARACTER (�).
1305 Otherwise, return the <a href=#code-point>code point</a> with that value.
1307 <dt>EOF code point
1308 <dd>
1309 Return U+FFFD REPLACEMENT CHARACTER (�).
1311 <dt>anything else
1312 <dd>
1313 Return the <a href=#current-input-code-point>current input code point</a>.
1314 </dl>
1317 <h4 class="heading settled heading" data-level=4.3.8 id=check-if-two-code-points-are-a-valid-escape><span class=secno>4.3.8 </span><span class=content>
1318 <dfn data-dfn-type=dfn data-noexport="" id=check-if-two-code-points-are-a-valid-escape0 title="check if two code points are a valid escape|are a valid escape|starts with a valid escape">Check if two code points are a valid escape<a class=self-link href=#check-if-two-code-points-are-a-valid-escape0></a></dfn></span><a class=self-link href=#check-if-two-code-points-are-a-valid-escape></a></h4>
1320 <p> This section describes how to <a href=#check-if-two-code-points-are-a-valid-escape0>check if two code points are a valid escape</a>.
1321 The algorithm described here can be called explicitly with two <a href=#code-point>code points</a>,
1322 or can be called with the input stream itself.
1323 In the latter case, the two <a href=#code-point>code points</a> in question are
1324 the <a href=#current-input-code-point>current input code point</a>
1325 and the <a href=#next-input-code-point>next input code point</a>,
1326 in that order.
1328 <p class=note> Note: This algorithm will not consume any additional <a href=#code-point>code point</a>.
1330 <p> If the first <a href=#code-point>code point</a> is not U+005D REVERSE SOLIDUS (\),
1331 return false.
1333 <p> Otherwise,
1334 if the second <a href=#code-point>code point</a> is a <a href=#newline>newline</a>,
1335 return false.
1337 <p> Otherwise, return true.
1340 <h4 class="heading settled heading" data-level=4.3.9 id=check-if-three-code-points-would-start-an-identifier><span class=secno>4.3.9 </span><span class=content>
1341 <dfn data-dfn-type=dfn data-noexport="" id=check-if-three-code-points-would-start-an-identifier0 title="check if three code points would start an identifier|starts with an identifier|start with an identifier|would start an identifier">Check if three code points would start an identifier<a class=self-link href=#check-if-three-code-points-would-start-an-identifier0></a></dfn></span><a class=self-link href=#check-if-three-code-points-would-start-an-identifier></a></h4>
1343 <p> This section describes how to <a href=#check-if-three-code-points-would-start-an-identifier0>check if three code points would start an identifier</a>.
1344 The algorithm described here can be called explicitly with three <a href=#code-point>code points</a>,
1345 or can be called with the input stream itself.
1346 In the latter case, the three <a href=#code-point>code points</a> in question are
1347 the <a href=#current-input-code-point>current input code point</a>
1348 and the <a href=#next-input-code-point title="next input code point">next two input code points</a>,
1349 in that order.
1351 <p class=note> Note: This algorithm will not consume any additional <a href=#code-point>code point</a>.
1353 <p> Look at the first <a href=#code-point>code point</a>:
1355 <dl>
1356 <dt>U+002D HYPHEN-MINUS
1357 <dd>
1358 If the second <a href=#code-point>code point</a> is a <a href=#name-start-code-point>name-start code point</a>
1359 or the second and third <a href=#code-point>code points</a> <a href=#check-if-two-code-points-are-a-valid-escape0>are a valid escape</a>,
1360 return true.
1361 Otherwise, return false.
1363 <dt><a href=#name-start-code-point>name-start code point</a>
1364 <dd>
1365 Return true.
1367 <dt>U+005C REVERSE SOLIDUS (\)
1368 <dd>
1369 If the first and second <a href=#code-point>code points</a> <a href=#check-if-two-code-points-are-a-valid-escape0>are a valid escape</a>,
1370 return true.
1371 Otherwise, return false.
1372 </dl>
1374 <h4 class="heading settled heading" data-level=4.3.10 id=check-if-three-code-points-would-start-a-number><span class=secno>4.3.10 </span><span class=content>
1375 <dfn data-dfn-type=dfn data-noexport="" id=check-if-three-code-points-would-start-a-number0 title="check if three code points would start a number|starts with a number|start with a number|would start a number">Check if three code points would start a number<a class=self-link href=#check-if-three-code-points-would-start-a-number0></a></dfn></span><a class=self-link href=#check-if-three-code-points-would-start-a-number></a></h4>
1377 <p> This section describes how to <a href=#check-if-three-code-points-would-start-a-number0>check if three code points would start a number</a>.
1378 The algorithm described here can be called explicitly with three <a href=#code-point>code points</a>,
1379 or can be called with the input stream itself.
1380 In the latter case, the three <a href=#code-point>code points</a> in question are
1381 the <a href=#current-input-code-point>current input code point</a>
1382 and the <a href=#next-input-code-point title="next input code point">next two input code points</a>,
1383 in that order.
1385 <p class=note> Note: This algorithm will not consume any additional <a href=#code-point>code points</a>.
1387 <p> Look at the first <a href=#code-point>code point</a>:
1389 <dl>
1390 <dt>U+002B PLUS SIGN (+)
1391 <dt>U+002D HYPHEN-MINUS (-)
1392 <dd>
1393 If the second <a href=#code-point>code point</a>
1394 is a <a href=#digit>digit</a>,
1395 return true.
1397 <p> Otherwise,
1398 if the second <a href=#code-point>code point</a>
1399 is a U+002E FULL STOP (.)
1400 and the third <a href=#code-point>code point</a>
1401 is a <a href=#digit>digit</a>,
1402 return true.
1404 <p> Otherwise, return false.
1406 <dt>U+002E FULL STOP (.)
1407 <dd>
1408 If the second <a href=#code-point>code point</a>
1409 is a <a href=#digit>digit</a>,
1410 return true.
1411 Otherwise, return false.
1413 <dt><a href=#digit>digit</a>
1414 <dd>
1415 Return true.
1417 <dt>anything else
1418 <dd>
1419 Return false.
1420 </dl>
1423 <h4 class="heading settled heading" data-level=4.3.11 id=consume-a-name><span class=secno>4.3.11 </span><span class=content>
1424 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-name0>Consume a name<a class=self-link href=#consume-a-name0></a></dfn></span><a class=self-link href=#consume-a-name></a></h4>
1426 <p> This section describes how to <a href=#consume-a-name0>consume a name</a> from a stream of <a href=#code-point>code points</a>.
1427 It returns a string containing
1428 the largest name that can be formed from adjacent <a href=#code-point>code points</a> in the stream, starting from the first.
1430 <p class=note> Note: This algorithm does not do the verification of the first few <a href=#code-point>code points</a>
1431 that are necessary to ensure the returned <a href=#code-point>code points</a> would constitute an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>.
1432 If that is the intended use,
1433 ensure that the stream <a href=#check-if-three-code-points-would-start-an-identifier0>starts with an identifier</a>
1434 before calling this algorithm.
1436 <p> Let <var>result</var> initially be an empty string.
1438 <p> Repeatedly consume the <a href=#next-input-code-point>next input code point</a> from the stream:
1440 <dl>
1441 <dt><a href=#name-code-point>name code point</a>
1442 <dd>
1443 Append the <a href=#code-point>code point</a> to <var>result</var>.
1445 <dt>the stream <a href=#check-if-two-code-points-are-a-valid-escape0>starts with a valid escape</a>
1446 <dd>
1447 <a href=#consume-an-escaped-code-point0>consume an escaped code point</a>.
1448 Append the returned <a href=#code-point>code point</a> to <var>result</var>.
1450 <dt>anything else
1451 <dd>
1452 Return <var>result</var>.
1453 </dl>
1456 <h4 class="heading settled heading" data-level=4.3.12 id=consume-a-number><span class=secno>4.3.12 </span><span class=content>
1457 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-number0>Consume a number<a class=self-link href=#consume-a-number0></a></dfn></span><a class=self-link href=#consume-a-number></a></h4>
1459 <p> This section describes how to <a href=#consume-a-number0>consume a number</a> from a stream of <a href=#code-point>code points</a>.
1460 It returns a 3-tuple of
1461 a string representation,
1462 a numeric value,
1463 and a type flag which is either "integer" or "number".
1465 <p class=note> Note: This algorithm does not do the verification of the first few <a href=#code-point>code points</a>
1466 that are necessary to ensure a number can be obtained from the stream.
1467 Ensure that the stream <a href=#check-if-three-code-points-would-start-a-number0>starts with a number</a>
1468 before calling this algorithm.
1470 <p> Execute the following steps in order:
1472 <ol>
1473 <li>
1474 Initially set <var>repr</var> to the empty string
1475 and <var>type</var> to "integer".
1477 <li>
1478 If the <a href=#next-input-code-point>next input code point</a> is U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-),
1479 consume it and append it to <var>repr</var>.
1481 <li>
1482 While the <a href=#next-input-code-point>next input code point</a> is a <a href=#digit>digit</a>,
1483 consume it and append it to <var>repr</var>.
1485 <li>
1486 If the <a href=#next-input-code-point title="next input code point">next 2 input code points</a> are
1487 U+002E FULL STOP (.) followed by a <a href=#digit>digit</a>,
1488 then:
1490 <ol>
1491 <li>Consume them.
1492 <li>Append them to <var>repr</var>.
1493 <li>Set <var>type</var> to "number".
1494 <li>While the <a href=#next-input-code-point>next input code point</a> is a <a href=#digit>digit</a>, consume it and append it to <var>repr</var>.
1495 </ol>
1497 <li>
1498 If the <a href=#next-input-code-point title="next input code point">next 2 or 3 input code points</a> are
1499 U+0045 LATIN CAPITAL LETTER E (E) or U+0065 LATIN SMALL LETTER E (e),
1500 optionally followed by U+002D HYPHEN-MINUS (-) or U+002B PLUS SIGN (+),
1501 followed by a <a href=#digit>digit</a>,
1502 then:
1504 <ol>
1505 <li>Consume them.
1506 <li>Append them to <var>repr</var>.
1507 <li>Set <var>type</var> to "number".
1508 <li>While the <a href=#next-input-code-point>next input code point</a> is a <a href=#digit>digit</a>, consume it and append it to <var>repr</var>.
1509 </ol>
1511 <li>
1512 <a href=#convert-a-string-to-a-number0 title="convert a string to a number">Convert <var>repr</var> to a number</a>,
1513 and set the <var>value</var> to the returned value.
1515 <li>
1516 Return a 3-tuple of <var>repr</var>, <var>value</var>, and <var>type</var>.
1517 </ol>
1520 <h4 class="heading settled heading" data-level=4.3.13 id=convert-a-string-to-a-number><span class=secno>4.3.13 </span><span class=content>
1521 <dfn data-dfn-type=dfn data-noexport="" id=convert-a-string-to-a-number0>Convert a string to a number<a class=self-link href=#convert-a-string-to-a-number0></a></dfn></span><a class=self-link href=#convert-a-string-to-a-number></a></h4>
1523 <p> This section describes how to <a href=#convert-a-string-to-a-number0>convert a string to a number</a>.
1524 It returns a number.
1526 <p class=note> Note: This algorithm does not do any verification to ensure that the string contains only a number.
1527 Ensure that the string contains only a valid CSS number
1528 before calling this algorithm.
1530 <p> Divide the string into seven components,
1531 in order from left to right:
1533 <ol>
1534 <li>A <b>sign</b>:
1535 a single U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-),
1536 or the empty string.
1537 Let <var>s</var> be the number -1 if the sign is U+002D HYPHEN-MINUS (-);
1538 otherwise, let <var>s</var> be the number 1.
1540 <li>An <b>integer part</b>:
1541 zero or more <a href=#digit>digits</a>.
1542 If there is at least one digit,
1543 let <var>i</var> be the number formed by interpreting the digits as a base-10 integer;
1544 otherwise, let <var>i</var> be the number 0.
1546 <li>A <b>decimal point</b>:
1547 a single U+002E FULL STOP (.),
1548 or the empty string.
1550 <li>A <b>fractional part</b>:
1551 zero or more <a href=#digit>digits</a>.
1552 If there is at least one digit,
1553 let <var>f</var> be the number formed by interpreting the digits as a base-10 integer
1554 and <var>d</var> be the number of digits;
1555 otherwise, let <var>f</var> and <var>d</var> be the number 0.
1557 <li>An <b>exponent indicator</b>:
1558 a single U+0045 LATIN CAPITAL LETTER E (E) or U+0065 LATIN SMALL LETTER E (e),
1559 or the empty string.
1561 <li>An <b>exponent sign</b>:
1562 a single U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-),
1563 or the empty string.
1564 Let <var>t</var> be the number -1 if the sign is U+002D HYPHEN-MINUS (-);
1565 otherwise, let <var>t</var> be the number 1.
1567 <li>An <b>exponent</b>:
1568 zero or more <a href=#digit>digits</a>.
1569 If there is at least one digit,
1570 let <var>e</var> be the number formed by interpreting the digits as a base-10 integer;
1571 otherwise, let <var>e</var> be the number 0.
1572 </ol>
1574 <p> Return the number <code>s·(i + f·10<sup>-d</sup>)·10<sup>te</sup></code>.
1577 <h4 class="heading settled heading" data-level=4.3.14 id=consume-the-remnants-of-a-bad-url><span class=secno>4.3.14 </span><span class=content>
1578 <dfn data-dfn-type=dfn data-noexport="" id=consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url<a class=self-link href=#consume-the-remnants-of-a-bad-url0></a></dfn></span><a class=self-link href=#consume-the-remnants-of-a-bad-url></a></h4>
1580 <p> This section describes how to <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a> from a stream of <a href=#code-point>code points</a>,
1581 "cleaning up" after the tokenizer realizes that it’s in the middle of a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a> rather than a <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>.
1582 It returns nothing;
1583 its sole use is to consume enough of the input stream to reach a recovery point
1584 where normal tokenizing can resume.
1586 <p> Repeatedly consume the <a href=#next-input-code-point>next input code point</a> from the stream:
1588 <dl>
1589 <dt>U+0029 RIGHT PARENTHESIS ())
1590 <dt>EOF
1591 <dd>
1592 Return.
1594 <dt>the input stream <a href=#check-if-two-code-points-are-a-valid-escape0>starts with a valid escape</a>
1595 <dd>
1596 <a href=#consume-an-escaped-code-point0>consume an escaped code point</a>.
1597 <span class=note>This allows an escaped right parenthesis ("\)") to be encountered without ending the <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>.
1598 This is otherwise identical to the "anything else" clause.</span>
1600 <dt>anything else
1601 <dd>
1602 Do nothing.
1603 </dl>
1606 <!--
1607 PPPPPPPPPPPPPPPPP AAA RRRRRRRRRRRRRRRRR SSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEERRRRRRRRRRRRRRRRR
1608 P::::::::::::::::P A:::A R::::::::::::::::R SS:::::::::::::::SE::::::::::::::::::::ER::::::::::::::::R
1609 P::::::PPPPPP:::::P A:::::A R::::::RRRRRR:::::R S:::::SSSSSS::::::SE::::::::::::::::::::ER::::::RRRRRR:::::R
1610 PP:::::P P:::::P A:::::::A RR:::::R R:::::RS:::::S SSSSSSSEE::::::EEEEEEEEE::::ERR:::::R R:::::R
1611 P::::P P:::::P A:::::::::A R::::R R:::::RS:::::S E:::::E EEEEEE R::::R R:::::R
1612 P::::P P:::::PA:::::A:::::A R::::R R:::::RS:::::S E:::::E R::::R R:::::R
1613 P::::PPPPPP:::::PA:::::A A:::::A R::::RRRRRR:::::R S::::SSSS E::::::EEEEEEEEEE R::::RRRRRR:::::R
1614 P:::::::::::::PPA:::::A A:::::A R:::::::::::::RR SS::::::SSSSS E:::::::::::::::E R:::::::::::::RR
1615 P::::PPPPPPPPP A:::::A A:::::A R::::RRRRRR:::::R SSS::::::::SS E:::::::::::::::E R::::RRRRRR:::::R
1616 P::::P A:::::AAAAAAAAA:::::A R::::R R:::::R SSSSSS::::S E::::::EEEEEEEEEE R::::R R:::::R
1617 P::::P A:::::::::::::::::::::A R::::R R:::::R S:::::S E:::::E R::::R R:::::R
1618 P::::P A:::::AAAAAAAAAAAAA:::::A R::::R R:::::R S:::::S E:::::E EEEEEE R::::R R:::::R
1619 PP::::::PP A:::::A A:::::A RR:::::R R:::::RSSSSSSS S:::::SEE::::::EEEEEEEE:::::ERR:::::R R:::::R
1620 P::::::::P A:::::A A:::::A R::::::R R:::::RS::::::SSSSSS:::::SE::::::::::::::::::::ER::::::R R:::::R
1621 P::::::::P A:::::A A:::::A R::::::R R:::::RS:::::::::::::::SS E::::::::::::::::::::ER::::::R R:::::R
1622 PPPPPPPPPPAAAAAAA AAAAAAARRRRRRRR RRRRRRR SSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEERRRRRRRR RRRRRRR
1623 -->
1625 <h2 class="heading settled heading" data-level=5 id=parsing><span class=secno>5 </span><span class=content>
1626 Parsing</span><a class=self-link href=#parsing></a></h2>
1628 <p> The input to the parsing stage is a stream or list of tokens from the tokenization stage.
1629 The output depends on how the parser is invoked,
1630 as defined by the entry points listed later in this section.
1631 The parser output can consist of at-rules,
1632 qualified rules,
1633 and/or declarations.
1635 <p> The parser’s output is constructed according to the fundamental syntax of CSS,
1636 without regards for the validity of any specific item.
1637 Implementations may check the validity of items as they are returned by the various parser algorithms
1638 and treat the algorithm as returning nothing if the item was invalid according to the implementation’s own grammar knowledge,
1639 or may construct a full tree as specified
1640 and "clean up" afterwards by removing any invalid items.
1642 <p> The items that can appear in the tree are:
1644 <dl>
1645 <dt><dfn data-dfn-type=dfn data-noexport="" id=at-rule>at-rule<a class=self-link href=#at-rule></a></dfn>
1646 <dd>
1647 An at-rule has a name,
1648 a prelude consisting of a list of component values,
1649 and an optional block consisting of a simple {} block.
1651 <p class=note> Note: This specification places no limits on what an at-rule’s block may contain.
1652 Individual at-rules must define whether they accept a block,
1653 and if so,
1654 how to parse it
1655 (preferably using one of the parser algorithms or entry points defined in this specification).
1657 <dt><dfn data-dfn-type=dfn data-noexport="" id=qualified-rule>qualified rule<a class=self-link href=#qualified-rule></a></dfn>
1658 <dd>
1659 A qualified rule has
1660 a prelude consisting of a list of component values,
1661 and a block consisting of a simple {} block.
1663 <p class=note> Note: Most qualified rules will be style rules,
1664 where the prelude is a selector <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a>
1665 and the block a <a href=#parse-a-list-of-declarations0 title="parse a list of declarations">list of declarations</a>.
1667 <dt><dfn data-dfn-type=dfn data-noexport="" id=declaration>declaration<a class=self-link href=#declaration></a></dfn>
1668 <dd>
1669 A declaration has a name,
1670 a value consisting of a list of component values,
1671 and an <var>important</var> flag which is initially unset.
1673 <p class=issue id=issue-a4ffb0dd><a class=self-link href=#issue-a4ffb0dd></a>
1674 Should we go ahead and generalize the important flag to be a list of bang values?
1675 Suggested by Zack Weinburg.
1677 <p> Declarations are further categorized as "properties" or "descriptors",
1678 with the former typically appearing in <a href=#qualified-rule>qualified rules</a>
1679 and the latter appearing in <a href=#at-rule>at-rules</a>.
1680 (This categorization does not occur at the Syntax level;
1681 instead, it is a product of where the declaration appears,
1682 and is defined by the respective specifications defining the given rule.)
1684 <dt><dfn data-dfn-type=dfn data-noexport="" id=component-value>component value<a class=self-link href=#component-value></a></dfn>
1685 <dd>
1686 A component value is one of the preserved tokens,
1687 a function,
1688 or a simple block.
1690 <dt><dfn data-dfn-type=dfn data-noexport="" id=preserved-tokens>preserved tokens<a class=self-link href=#preserved-tokens></a></dfn>
1691 <dd>
1692 Any token produced by the tokenizer
1693 except for <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>s,
1694 <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>s,
1695 <a class=css-code data-link-type=token href=#tokendef-open-paren>〈(〉</a>s,
1696 and <a class=css-code data-link-type=token href=#tokendef-open-square>〈[〉</a>s.
1698 <p class=note> Note: The non-preserved tokens listed above are always consumed into higher-level objects,
1699 either functions or simple blocks,
1700 and so never appear in any parser output themselves.
1702 <p class=note> Note: The tokens <a class=css-code data-link-type=token href=#tokendef-close-curly>〈}〉</a>s, <a class=css-code data-link-type=token href=#tokendef-close-paren>〈)〉</a>s, <a class=css-code data-link-type=token href=#tokendef-close-square>〈]〉</a>, <a class=css-code data-link-type=token href=#tokendef-bad-string>〈bad-string〉</a>, and <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a> are always parse errors,
1703 but they are preserved in the token stream by this specification to allow other specs,
1704 such as Media Queries,
1705 to define more fine-grainted error-handling
1706 than just dropping an entire declaration or block.
1708 <dt><dfn data-dfn-type=dfn data-noexport="" id=function>function<a class=self-link href=#function></a></dfn>
1709 <dd>
1710 A function has a name
1711 and a value consisting of a list of component values.
1713 <dt><dfn data-dfn-type=dfn data-noexport="" id=simple-block>simple block<a class=self-link href=#simple-block></a></dfn>
1714 <dd>
1715 A simple block has an associated token (either a <a class=css-code data-link-type=token href=#tokendef-open-square>〈[〉</a>, <a class=css-code data-link-type=token href=#tokendef-open-paren>〈(〉</a>, or <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>)
1716 and a value consisting of a list of component values.
1717 </dl>
1719 <h3 class="heading settled heading" data-level=5.1 id=parser-diagrams><span class=secno>5.1 </span><span class=content>
1720 Parser Railroad Diagrams</span><a class=self-link href=#parser-diagrams></a></h3>
1722 <p> <em>This section is non-normative.</em>
1724 <p> This section presents an informative view of the parser,
1725 in the form of railroad diagrams.
1726 Railroad diagrams are more compact than a state-machine,
1727 but often easier to read than a regular expression.
1729 <p> These diagrams are <em>informative</em> and <em>incomplete</em>;
1730 they describe the grammar of "correct" stylesheets,
1731 but do not describe error-handling at all.
1732 They are provided solely to make it easier to get an intuitive grasp of the syntax.
1734 <!--
1735 The "source" of these diagrams is in ./Diagrams.src.html
1736 The generated SVG is copied here so that JavaScript is not required
1737 to view the spec.
1738 -->
1740 <dl>
1741 <dt id=stylesheet-diagram><a class=self-link href=#stylesheet-diagram></a>Stylesheet</dt>
1742 <dd><svg class=railroad-diagram height=200 width=313><g transform="translate(.5 .5)"><path d="M 20 121 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 131h0"></path><path d="M272 131h0"></path><path d="M40 131a10 10 0 0 0 10 -10v-89a10 10 0 0 1 10 -10"></path><g><path d="M60 22h192"></path></g><path d="M252 22a10 10 0 0 1 10 10v89a10 10 0 0 0 10 10"></path><path d="M40 131h20"></path><g><path d="M60 131h0"></path><path d="M252 131h0"></path><path d="M60 131h10"></path><g><path d="M70 131h0"></path><path d="M242 131h0"></path><path d="M70 131a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><g><path d="M90 101h8"></path><path d="M214 101h8"></path><rect height=22 width=116 x=98 y=90></rect><text x=156 y=105>〈whitespace〉</text></g><path d="M222 101a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><path d="M70 131a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"></path><g><path d="M90 71h36"></path><path d="M186 71h36"></path><rect height=22 width=60 x=126 y=60></rect><text x=156 y=75>〈CDC〉</text></g><path d="M222 71a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"></path><path d="M70 131a10 10 0 0 0 10 -10v-70a10 10 0 0 1 10 -10"></path><g><path d="M90 41h36"></path><path d="M186 41h36"></path><rect height=22 width=60 x=126 y=30></rect><text x=156 y=45>〈CDO〉</text></g><path d="M222 41a10 10 0 0 1 10 10v70a10 10 0 0 0 10 10"></path><path d="M70 131h20"></path><g><path d="M90 131h0"></path><path d="M222 131h0"></path><rect height=22 width=132 x=90 y=120></rect><text x=156 y=135>Qualified rule</text></g><path d="M222 131h20"></path><path d="M70 131a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M90 161h28"></path><path d="M194 161h28"></path><rect height=22 width=76 x=118 y=150></rect><text x=156 y=165>At-rule</text></g><path d="M222 161a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M242 131h10"></path><path d="M70 131a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10"></path><g><path d="M70 180h172"></path></g><path d="M242 180a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10"></path></g><path d="M252 131h20"></path></g><path d="M 272 131 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1744 <dt id=rule-list-diagram><a class=self-link href=#rule-list-diagram></a>Rule list</dt>
1745 <dd><svg class=railroad-diagram height=140 width=313><g transform="translate(.5 .5)"><path d="M 20 61 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 71h0"></path><path d="M272 71h0"></path><path d="M40 71a10 10 0 0 0 10 -10v-29a10 10 0 0 1 10 -10"></path><g><path d="M60 22h192"></path></g><path d="M252 22a10 10 0 0 1 10 10v29a10 10 0 0 0 10 10"></path><path d="M40 71h20"></path><g><path d="M60 71h0"></path><path d="M252 71h0"></path><path d="M60 71h10"></path><g><path d="M70 71h0"></path><path d="M242 71h0"></path><path d="M70 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><g><path d="M90 41h8"></path><path d="M214 41h8"></path><rect height=22 width=116 x=98 y=30></rect><text x=156 y=45>〈whitespace〉</text></g><path d="M222 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><path d="M70 71h20"></path><g><path d="M90 71h0"></path><path d="M222 71h0"></path><rect height=22 width=132 x=90 y=60></rect><text x=156 y=75>Qualified rule</text></g><path d="M222 71h20"></path><path d="M70 71a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M90 101h28"></path><path d="M194 101h28"></path><rect height=22 width=76 x=118 y=90></rect><text x=156 y=105>At-rule</text></g><path d="M222 101a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M242 71h10"></path><path d="M70 71a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10"></path><g><path d="M70 120h172"></path></g><path d="M242 120a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10"></path></g><path d="M252 71h20"></path></g><path d="M 272 71 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1747 <dt id=at-rule-diagram><a class=self-link href=#at-rule-diagram></a>At-rule</dt>
1748 <dd><svg class=railroad-diagram height=102 width=541><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M166 41h0"></path><rect height=22 width=116 x=50 y=30></rect><text x=108 y=45>〈at-keyword〉</text></g><path d="M166 41h10"></path><g><path d="M176 41h0"></path><path d="M376 41h0"></path><path d="M176 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M196 21h160"></path></g><path d="M356 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M176 41h20"></path><g><path d="M196 41h0"></path><path d="M356 41h0"></path><path d="M196 41h10"></path><g><path d="M206 41h0"></path><path d="M346 41h0"></path><rect height=22 width=140 x=206 y=30></rect><text x=276 y=45>Component value</text></g><path d="M346 41h10"></path><path d="M206 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M206 61h140"></path></g><path d="M346 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M356 41h20"></path></g><g><path d="M376 41h0"></path><path d="M500 41h0"></path><path d="M376 41h20"></path><g><path d="M396 41h0"></path><path d="M480 41h0"></path><rect height=22 width=84 x=396 y=30></rect><text x=438 y=45>{} block</text></g><path d="M480 41h20"></path><path d="M376 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M396 71h28"></path><path d="M452 71h28"></path><rect height=22 rx=10 ry=10 width=28 x=424 y=60></rect><text x=438 y=75>;</text></g><path d="M480 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M 500 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1750 <dt id=qualified-rule-diagram><a class=self-link href=#qualified-rule-diagram></a>Qualified rule</dt>
1751 <dd><svg class=railroad-diagram height=81 width=385><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 41h0"></path><path d="M240 41h0"></path><path d="M40 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M60 21h160"></path></g><path d="M220 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M40 41h20"></path><g><path d="M60 41h0"></path><path d="M220 41h0"></path><path d="M60 41h10"></path><g><path d="M70 41h0"></path><path d="M210 41h0"></path><rect height=22 width=140 x=70 y=30></rect><text x=140 y=45>Component value</text></g><path d="M210 41h10"></path><path d="M70 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M70 61h140"></path></g><path d="M210 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M220 41h20"></path></g><path d="M240 41h10"></path><g><path d="M250 41h0"></path><path d="M334 41h0"></path><rect height=22 width=84 x=250 y=30></rect><text x=292 y=45>{} block</text></g><path d="M334 41h10"></path><path d="M 344 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1753 <dt id=declaration-list-diagram><a class=self-link href=#declaration-list-diagram></a>Declaration list</dt>
1754 <dd><svg class=railroad-diagram height=102 width=589><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M94 41h0"></path><rect height=22 width=44 x=50 y=30></rect><text x=72 y=45>ws*</text></g><path d="M94 41h10"></path><g><path d="M104 41h0"></path><path d="M548 41h0"></path><path d="M104 41h20"></path><g><path d="M124 41h0"></path><path d="M528 41h0"></path><g><path d="M124 41h0"></path><path d="M272 41h0"></path><path d="M124 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M144 21h108"></path></g><path d="M252 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M124 41h20"></path><g><path d="M144 41h0"></path><path d="M252 41h0"></path><rect height=22 width=108 x=144 y=30></rect><text x=198 y=45>Declaration</text></g><path d="M252 41h20"></path></g><g><path d="M272 41h0"></path><path d="M528 41h0"></path><path d="M272 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M292 21h216"></path></g><path d="M508 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M272 41h20"></path><g><path d="M292 41h0"></path><path d="M508 41h0"></path><path d="M292 41h10"></path><g><path d="M302 41h0"></path><path d="M330 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=302 y=30></rect><text x=316 y=45>;</text></g><path d="M330 41h10"></path><path d="M340 41h10"></path><g><path d="M350 41h0"></path><path d="M498 41h0"></path><rect height=22 width=148 x=350 y=30></rect><text x=424 y=45>Declaration list</text></g><path d="M498 41h10"></path></g><path d="M508 41h20"></path></g></g><path d="M528 41h20"></path><path d="M104 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M124 71h70"></path><path d="M458 71h70"></path><path d="M194 71h10"></path><g><path d="M204 71h0"></path><path d="M280 71h0"></path><rect height=22 width=76 x=204 y=60></rect><text x=242 y=75>At-rule</text></g><path d="M280 71h10"></path><path d="M290 71h10"></path><g><path d="M300 71h0"></path><path d="M448 71h0"></path><rect height=22 width=148 x=300 y=60></rect><text x=374 y=75>Declaration list</text></g><path d="M448 71h10"></path></g><path d="M528 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M 548 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1756 <dt id=declaration-diagram><a class=self-link href=#declaration-diagram></a>Declaration</dt>
1757 <dd><svg class=railroad-diagram height=81 width=629><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M126 41h0"></path><rect height=22 width=76 x=50 y=30></rect><text x=88 y=45>〈ident〉</text></g><path d="M126 41h10"></path><path d="M136 41h10"></path><g><path d="M146 41h0"></path><path d="M190 41h0"></path><rect height=22 width=44 x=146 y=30></rect><text x=168 y=45>ws*</text></g><path d="M190 41h10"></path><path d="M200 41h10"></path><g><path d="M210 41h0"></path><path d="M238 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=210 y=30></rect><text x=224 y=45>:</text></g><path d="M238 41h10"></path><g><path d="M248 41h0"></path><path d="M448 41h0"></path><path d="M248 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M268 21h160"></path></g><path d="M428 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M248 41h20"></path><g><path d="M268 41h0"></path><path d="M428 41h0"></path><path d="M268 41h10"></path><g><path d="M278 41h0"></path><path d="M418 41h0"></path><rect height=22 width=140 x=278 y=30></rect><text x=348 y=45>Component value</text></g><path d="M418 41h10"></path><path d="M278 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M278 61h140"></path></g><path d="M418 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M428 41h20"></path></g><g><path d="M448 41h0"></path><path d="M588 41h0"></path><path d="M448 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M468 21h100"></path></g><path d="M568 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M448 41h20"></path><g><path d="M468 41h0"></path><path d="M568 41h0"></path><rect height=22 width=100 x=468 y=30></rect><text x=518 y=45>!important</text></g><path d="M568 41h20"></path></g><path d="M 588 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1759 <dt id=important-diagram><a class=self-link href=#important-diagram></a>!important</dt>
1760 <dd><svg class=railroad-diagram height=62 width=449><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 31h10"></path><g><path d="M50 31h0"></path><path d="M78 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=50 y=20></rect><text x=64 y=35>!</text></g><path d="M78 31h10"></path><path d="M88 31h10"></path><g><path d="M98 31h0"></path><path d="M142 31h0"></path><rect height=22 width=44 x=98 y=20></rect><text x=120 y=35>ws*</text></g><path d="M142 31h10"></path><path d="M152 31h10"></path><g><path d="M162 31h0"></path><path d="M334 31h0"></path><rect height=22 width=172 x=162 y=20></rect><text x=248 y=35>〈ident "important"〉</text></g><path d="M334 31h10"></path><path d="M344 31h10"></path><g><path d="M354 31h0"></path><path d="M398 31h0"></path><rect height=22 width=44 x=354 y=20></rect><text x=376 y=35>ws*</text></g><path d="M398 31h10"></path><path d="M 408 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1762 <dt id=ws-diagram><a class=self-link href=#ws-diagram></a>ws*</dt>
1763 <dd><svg class=railroad-diagram height=81 width=257><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 41h0"></path><path d="M216 41h0"></path><path d="M40 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M60 21h136"></path></g><path d="M196 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M40 41h20"></path><g><path d="M60 41h0"></path><path d="M196 41h0"></path><path d="M60 41h10"></path><g><path d="M70 41h0"></path><path d="M186 41h0"></path><rect height=22 width=116 x=70 y=30></rect><text x=128 y=45>〈whitespace〉</text></g><path d="M186 41h10"></path><path d="M70 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M70 61h116"></path></g><path d="M186 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M196 41h20"></path></g><path d="M 216 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1765 <dt id=component-value-diagram><a class=self-link href=#component-value-diagram></a>Component value</dt>
1766 <dd><svg class=railroad-diagram height=182 width=261><g transform="translate(.5 .5)"><path d="M 20 21 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><g><path d="M40 31h0"></path><path d="M220 31h0"></path><path d="M40 31h20"></path><g><path d="M60 31h0"></path><path d="M200 31h0"></path><rect height=22 width=140 x=60 y=20></rect><text x=130 y=35>Preserved token</text></g><path d="M200 31h20"></path><path d="M40 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><g><path d="M60 61h28"></path><path d="M172 61h28"></path><rect height=22 width=84 x=88 y=50></rect><text x=130 y=65>{} block</text></g><path d="M200 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><path d="M40 31a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"></path><g><path d="M60 91h28"></path><path d="M172 91h28"></path><rect height=22 width=84 x=88 y=80></rect><text x=130 y=95>() block</text></g><path d="M200 91a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"></path><path d="M40 31a10 10 0 0 1 10 10v70a10 10 0 0 0 10 10"></path><g><path d="M60 121h28"></path><path d="M172 121h28"></path><rect height=22 width=84 x=88 y=110></rect><text x=130 y=125>[] block</text></g><path d="M200 121a10 10 0 0 0 10 -10v-70a10 10 0 0 1 10 -10"></path><path d="M40 31a10 10 0 0 1 10 10v100a10 10 0 0 0 10 10"></path><g><path d="M60 151h4"></path><path d="M196 151h4"></path><rect height=22 width=132 x=64 y=140></rect><text x=130 y=155>Function block</text></g><path d="M200 151a10 10 0 0 0 10 -10v-100a10 10 0 0 1 10 -10"></path></g><path d="M 220 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1768 <dt id={}-block-diagram><a class=self-link href=#{}-block-diagram></a>{} block</dt>
1769 <dd><svg class=railroad-diagram height=81 width=377><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M78 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=50 y=30></rect><text x=64 y=45>{</text></g><path d="M78 41h10"></path><g><path d="M88 41h0"></path><path d="M288 41h0"></path><path d="M88 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M108 21h160"></path></g><path d="M268 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M88 41h20"></path><g><path d="M108 41h0"></path><path d="M268 41h0"></path><path d="M108 41h10"></path><g><path d="M118 41h0"></path><path d="M258 41h0"></path><rect height=22 width=140 x=118 y=30></rect><text x=188 y=45>Component value</text></g><path d="M258 41h10"></path><path d="M118 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M118 61h140"></path></g><path d="M258 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M268 41h20"></path></g><path d="M288 41h10"></path><g><path d="M298 41h0"></path><path d="M326 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=298 y=30></rect><text x=312 y=45>}</text></g><path d="M326 41h10"></path><path d="M 336 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1771 <dt id=()-block-diagram><a class=self-link href=#()-block-diagram></a>() block</dt>
1772 <dd><svg class=railroad-diagram height=81 width=377><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M78 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=50 y=30></rect><text x=64 y=45>(</text></g><path d="M78 41h10"></path><g><path d="M88 41h0"></path><path d="M288 41h0"></path><path d="M88 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M108 21h160"></path></g><path d="M268 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M88 41h20"></path><g><path d="M108 41h0"></path><path d="M268 41h0"></path><path d="M108 41h10"></path><g><path d="M118 41h0"></path><path d="M258 41h0"></path><rect height=22 width=140 x=118 y=30></rect><text x=188 y=45>Component value</text></g><path d="M258 41h10"></path><path d="M118 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M118 61h140"></path></g><path d="M258 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M268 41h20"></path></g><path d="M288 41h10"></path><g><path d="M298 41h0"></path><path d="M326 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=298 y=30></rect><text x=312 y=45>)</text></g><path d="M326 41h10"></path><path d="M 336 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1774 <dt id=[]-block-diagram><a class=self-link href=#[]-block-diagram></a>[] block</dt>
1775 <dd><svg class=railroad-diagram height=81 width=377><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M78 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=50 y=30></rect><text x=64 y=45>[</text></g><path d="M78 41h10"></path><g><path d="M88 41h0"></path><path d="M288 41h0"></path><path d="M88 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M108 21h160"></path></g><path d="M268 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M88 41h20"></path><g><path d="M108 41h0"></path><path d="M268 41h0"></path><path d="M108 41h10"></path><g><path d="M118 41h0"></path><path d="M258 41h0"></path><rect height=22 width=140 x=118 y=30></rect><text x=188 y=45>Component value</text></g><path d="M258 41h10"></path><path d="M118 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M118 61h140"></path></g><path d="M258 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M268 41h20"></path></g><path d="M288 41h10"></path><g><path d="M298 41h0"></path><path d="M326 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=298 y=30></rect><text x=312 y=45>]</text></g><path d="M326 41h10"></path><path d="M 336 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1777 <dt id=function-block-diagram><a class=self-link href=#function-block-diagram></a>Function block</dt>
1778 <dd><svg class=railroad-diagram height=81 width=449><g transform="translate(.5 .5)"><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><path d="M40 41h10"></path><g><path d="M50 41h0"></path><path d="M150 41h0"></path><rect height=22 width=100 x=50 y=30></rect><text x=100 y=45>〈function〉</text></g><path d="M150 41h10"></path><g><path d="M160 41h0"></path><path d="M360 41h0"></path><path d="M160 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M180 21h160"></path></g><path d="M340 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M160 41h20"></path><g><path d="M180 41h0"></path><path d="M340 41h0"></path><path d="M180 41h10"></path><g><path d="M190 41h0"></path><path d="M330 41h0"></path><rect height=22 width=140 x=190 y=30></rect><text x=260 y=45>Component value</text></g><path d="M330 41h10"></path><path d="M190 41a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M190 61h140"></path></g><path d="M330 61a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M340 41h20"></path></g><path d="M360 41h10"></path><g><path d="M370 41h0"></path><path d="M398 41h0"></path><rect height=22 rx=10 ry=10 width=28 x=370 y=30></rect><text x=384 y=45>)</text></g><path d="M398 41h10"></path><path d="M 408 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd>
1780 </dl>
1782 <h3 class="heading settled heading" data-level=5.2 id=definitions><span class=secno>5.2 </span><span class=content>
1783 Definitions</span><a class=self-link href=#definitions></a></h3>
1785 <dl>
1786 <dt><dfn data-dfn-type=dfn data-noexport="" id=current-input-token>current input token<a class=self-link href=#current-input-token></a></dfn>
1787 <dd>
1788 The token or <a href=#component-value>component value</a> currently being operated on, from the list of tokens produced by the tokenizer.
1790 <dt><dfn data-dfn-type=dfn data-noexport="" id=next-input-token>next input token<a class=self-link href=#next-input-token></a></dfn>
1791 <dd>
1792 The token or <a href=#component-value>component value</a> following the <a href=#current-input-token>current input token</a> in the list of tokens produced by the tokenizer.
1793 If there isn’t a token following the <a href=#current-input-token>current input token</a>,
1794 the <a href=#next-input-token>next input token</a> is an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>.
1796 <dt><dfn class=css-code data-dfn-type=token data-export="" id=tokendef-eof><a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a><a class=self-link href=#tokendef-eof></a></dfn>
1797 <dd>
1798 A conceptual token representing the end of the list of tokens.
1799 Whenever the list of tokens is empty,
1800 the <a href=#next-input-token>next input token</a> is always an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>.
1802 <dt><dfn data-dfn-type=dfn data-noexport="" id=consume-the-next-input-token>consume the next input token<a class=self-link href=#consume-the-next-input-token></a></dfn>
1803 <dd>
1804 Let the <a href=#current-input-token>current input token</a> be the current <a href=#next-input-token>next input token</a>,
1805 adjusting the <a href=#next-input-token>next input token</a> accordingly.
1807 <dt><dfn data-dfn-type=dfn data-noexport="" id=reconsume-the-current-input-token>reconsume the current input token<a class=self-link href=#reconsume-the-current-input-token></a></dfn>
1808 <dd>
1809 The next time an algorithm instructs you to <a href=#consume-the-next-input-token>consume the next input token</a>,
1810 instead do nothing
1811 (retain the <a href=#current-input-token>current input token</a> unchanged).
1813 <dt><dfn data-dfn-type=dfn data-noexport="" id=ascii-case-insensitive>ASCII case-insensitive<a class=self-link href=#ascii-case-insensitive></a></dfn>
1814 <dd>
1815 When two strings are to be matched ASCII case-insensitively,
1816 temporarily convert both of them to ASCII lower-case form
1817 by adding 32 (0x20) to the value of each <a href=#code-point>code point</a> between
1818 U+0041 LATIN CAPITAL LETTER A (A)
1819 and U+005A LATIN CAPITAL LETTER Z (Z),
1820 inclusive,
1821 and check if this results in identical sequences of <a href=#code-point>code point</a>.
1822 </dl>
1826 <h3 class="heading settled heading" data-level=5.3 id=parser-entry-points><span class=secno>5.3 </span><span class=content>
1827 Parser Entry Points</span><a class=self-link href=#parser-entry-points></a></h3>
1829 <p> The algorithms defined in this section produce high-level CSS objects
1830 from lower-level objects.
1831 They assume that they are invoked on a token stream,
1832 but they may also be invoked on a string;
1833 if so,
1834 first perform <a href=#preprocessing-the-input-stream>input preprocessing</a>
1835 to produce a <a href=#code-point>code point</a> stream,
1836 then perform <a href=#tokenization>tokenization</a>
1837 to produce a token stream.
1839 <p> "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" can also be invoked on a byte stream,
1840 in which case <a href=#the-input-byte-stream>The input byte stream</a>
1841 defines how to decode it into Unicode.
1843 <p class=note> Note: This specification does not define how a byte stream is decoded for other entry points.
1845 <p class=note> Note: Other specs can define additional entry points for their own purposes.
1847 <div class=issue id=issue-c8316c9e><a class=self-link href=#issue-c8316c9e></a>
1848 The following notes should probably be translated into normative text in the relevant specs,
1849 hooking this spec’s terms:
1851 <p> <ul>
1852 <li>
1853 "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" is intended to be the normal parser entry point,
1854 for parsing stylesheets.
1856 <li>
1857 "<a href=#parse-a-list-of-rules0>Parse a list of rules</a>" is intended for the content of at-rules such as <span class=css data-link-type=maybe>@media</span>.
1858 It differs from "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" in the handling of <a class=css-code data-link-type=token href=#tokendef-cdo>〈CDO〉</a> and <a class=css-code data-link-type=token href=#tokendef-cdc>〈CDC〉</a>.
1860 <li>
1861 "<a href=#parse-a-rule0>Parse a rule</a>" is intended for use by the <code>CSSStyleSheet#insertRule</code> method,
1862 and similar functions which might exist,
1863 which parse text into a single rule.
1865 <li>
1866 "<a href=#parse-a-declaration0>Parse a declaration</a>" is used in <span class=css data-link-type=maybe>@supports</span> conditions. <a data-biblio-type=informative data-link-type=biblio href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a>
1868 <li>
1869 "<a href=#parse-a-list-of-declarations0>Parse a list of declarations</a>" is for the contents of a <code>style</code> attribute,
1870 which parses text into the contents of a single style rule.
1872 <li>
1873 "<a href=#parse-a-component-value0>Parse a component value</a>" is for things that need to consume a single value,
1874 like the parsing rules for <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-values-3/#attr>attr()</a>.
1876 <li>
1877 "<a href=#parse-a-list-of-component-values0>Parse a list of component values</a>" is for the contents of presentational attributes,
1878 which parse text into a single declaration’s value,
1879 or for parsing a stand-alone selector <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a> or list of Media Queries <a data-biblio-type=informative data-link-type=biblio href=#mediaq title=MEDIAQ>[MEDIAQ]</a>,
1880 as in <a href=http://www.w3.org/TR/selectors-api/>Selectors API</a>
1881 or the <code>media</code> HTML attribute.
1882 </ul>
1883 </div>
1885 <p> All of the algorithms defined in this spec may be called with either a list of tokens or of component values.
1886 Either way produces an identical result.
1889 <h4 class="heading settled heading" data-level=5.3.1 id=parse-a-stylesheet><span class=secno>5.3.1 </span><span class=content>
1890 <dfn data-dfn-type=dfn data-noexport="" id=parse-a-stylesheet0>Parse a stylesheet<a class=self-link href=#parse-a-stylesheet0></a></dfn></span><a class=self-link href=#parse-a-stylesheet></a></h4>
1892 <p> To <a href=#parse-a-stylesheet0>parse a stylesheet</a> from a stream of tokens:
1894 <ol>
1895 <li>
1896 Create a new stylesheet.
1898 <li>
1899 <a href=#consume-a-list-of-rules0>Consume a list of rules</a> from the stream of tokens, with the <var>top-level flag</var> set.
1901 <li>
1902 Assign the returned value to the stylesheet’s value.
1904 <li>
1905 Return the stylesheet.
1906 </ol>
1908 <h4 class="heading settled heading" data-level=5.3.2 id=parse-a-list-of-rules><span class=secno>5.3.2 </span><span class=content>
1909 <dfn data-dfn-type=dfn data-noexport="" id=parse-a-list-of-rules0>Parse a list of rules<a class=self-link href=#parse-a-list-of-rules0></a></dfn></span><a class=self-link href=#parse-a-list-of-rules></a></h4>
1911 <p> To <a href=#parse-a-list-of-rules0>parse a list of rules</a> from a stream of tokens:
1913 <ol>
1914 <li>
1915 <a href=#consume-a-list-of-rules0>Consume a list of rules</a> from the stream of tokens, with the <var>top-level flag</var> unset.
1917 <li>
1918 Return the returned list.
1919 </ol>
1921 <h4 class="heading settled heading" data-level=5.3.3 id=parse-a-rule><span class=secno>5.3.3 </span><span class=content>
1922 <dfn data-dfn-type=dfn data-noexport="" id=parse-a-rule0>Parse a rule<a class=self-link href=#parse-a-rule0></a></dfn></span><a class=self-link href=#parse-a-rule></a></h4>
1924 <p> To <a href=#parse-a-rule0>parse a rule</a> from a stream of tokens:
1926 <ol>
1927 <li>
1928 <a href=#consume-the-next-input-token>Consume the next input token</a>.
1930 <li>
1931 While the <a href=#current-input-token>current input token</a> is a <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>,
1932 <a href=#consume-the-next-input-token>consume the next input token</a>.
1934 <li>
1935 If the <a href=#current-input-token>current input token</a> is an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>,
1936 return a syntax error.
1938 <p> Otherwise,
1939 if the <a href=#current-input-token>current input token</a> is an <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a>,
1940 <a href=#consume-an-at-rule0>consume an at-rule</a>.
1942 <p> Otherwise,
1943 <a href=#consume-a-qualified-rule0>consume a qualified rule</a>.
1944 If nothing was returned,
1945 return a syntax error.
1947 <li>
1948 While the <a href=#current-input-token>current input token</a> is a <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>,
1949 <a href=#consume-the-next-input-token>consume the next input token</a>.
1951 <li>
1952 If the <a href=#current-input-token>current input token</a> is an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>,
1953 return the rule obtained in step 2.
1954 Otherwise, return a syntax error.
1955 </ol>
1957 <h4 class="heading settled heading" data-level=5.3.4 id=parse-a-declaration><span class=secno>5.3.4 </span><span class=content>
1958 <dfn data-dfn-type=dfn data-noexport="" id=parse-a-declaration0>Parse a declaration<a class=self-link href=#parse-a-declaration0></a></dfn></span><a class=self-link href=#parse-a-declaration></a></h4>
1960 <p class=note> Note: Unlike "<a href=#parse-a-list-of-declarations0>Parse a list of declarations</a>",
1961 this parses only a declaration and not an at-rule.
1963 <p> To <a href=#parse-a-declaration0>parse a declaration</a>:
1965 <ol>
1966 <li>
1967 <a href=#consume-the-next-input-token>Consume the next input token</a>.
1969 <li>
1970 While the <a href=#current-input-token>current input token</a> is a <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>,
1971 <a href=#consume-the-next-input-token>consume the next input token</a>.
1973 <li>
1974 <a href=#consume-a-declaration0>Consume a declaration</a>.
1975 If anything was returned, return it.
1976 Otherwise, return a syntax error.
1977 </ol>
1979 <h4 class="heading settled heading" data-level=5.3.5 id=parse-a-list-of-declarations><span class=secno>5.3.5 </span><span class=content>
1980 <dfn data-dfn-type=dfn data-noexport="" id=parse-a-list-of-declarations0>Parse a list of declarations<a class=self-link href=#parse-a-list-of-declarations0></a></dfn></span><a class=self-link href=#parse-a-list-of-declarations></a></h4>
1982 <p class=note> Note: Despite the name,
1983 this actually parses a mixed list of declarations and at-rules,
1984 as CSS 2.1 does for <a href=http://www.w3.org/TR/CSS21/page.html#page-box><span class=css data-link-type=maybe>@page</span></a>.
1985 Unexpected at-rules (which could be all of them, in a given context)
1986 are invalid and should be ignored by the consumer.
1988 <p> To <a href=#parse-a-list-of-declarations0>parse a list of declarations</a>:
1990 <ol>
1991 <li>
1992 <a href=#consume-a-list-of-declarations0>Consume a list of declarations</a>.
1994 <li>
1995 Return the returned list.
1996 </ol>
1998 <h4 class="heading settled heading" data-level=5.3.6 id=parse-a-component-value><span class=secno>5.3.6 </span><span class=content>
1999 <dfn data-dfn-type=dfn data-noexport="" id=parse-a-component-value0>Parse a component value<a class=self-link href=#parse-a-component-value0></a></dfn></span><a class=self-link href=#parse-a-component-value></a></h4>
2001 <p> To <a href=#parse-a-component-value0>parse a component value</a>:
2003 <ol>
2004 <li>
2005 <a href=#consume-the-next-input-token>Consume the next input token</a>.
2007 <li>
2008 While the <a href=#current-input-token>current input token</a> is a <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>,
2009 <a href=#consume-the-next-input-token>consume the next input token</a>.
2011 <li>
2012 If the <a href=#current-input-token>current input token</a> is an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>,
2013 return a syntax error.
2015 <li>
2016 <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>.
2017 <a href=#consume-a-component-value0>Consume a component value</a>.
2018 If nothing is returned,
2019 return a syntax error.
2021 <li>
2022 While the <a href=#current-input-token>current input token</a> is a <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>,
2023 <a href=#consume-the-next-input-token>consume the next input token</a>.
2025 <li>
2026 If the <a href=#current-input-token>current input token</a> is an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>,
2027 return the <a href=#component-value>component value</a> returned in step 3.
2028 Otherwise,
2029 return a syntax error.
2030 </ol>
2032 <h4 class="heading settled heading" data-level=5.3.7 id=parse-a-list-of-component-values><span class=secno>5.3.7 </span><span class=content>
2033 <dfn data-dfn-type=dfn data-noexport="" id=parse-a-list-of-component-values0>Parse a list of component values<a class=self-link href=#parse-a-list-of-component-values0></a></dfn></span><a class=self-link href=#parse-a-list-of-component-values></a></h4>
2035 <p> To <a href=#parse-a-list-of-component-values0>parse a list of component values</a>:
2037 <ol>
2038 <li>
2039 Repeatedly <a href=#consume-a-component-value0>consume a component value</a> until an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a> is returned,
2040 appending the returned values (except the final <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>) into a list.
2041 Return the list.
2042 </ol>
2044 <h3 class="heading settled heading" data-level=5.4 id=parser-algorithms><span class=secno>5.4 </span><span class=content>
2045 Parser Algorithms</span><a class=self-link href=#parser-algorithms></a></h3>
2047 <p> The following algorithms comprise the parser.
2048 They are called by the parser entry points above.
2050 <p> These algorithms may be called with a list of either tokens or of component values.
2051 (The difference being that some tokens are replaced by <a href=#function>functions</a> and <a href=#simple-block>simple blocks</a> in a list of component values.)
2052 Similar to how the input stream returned EOF code points to represent when it was empty during the tokenization stage,
2053 the lists in this stage must return an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a> when the next token is requested but they are empty.
2055 <p> An algorithm may be invoked with a specific list,
2056 in which case it consumes only that list
2057 (and when that list is exhausted,
2058 it begins returning <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>s).
2059 Otherwise,
2060 it is implicitly invoked with the same list as the invoking algorithm.
2063 <h4 class="heading settled heading" data-level=5.4.1 id=consume-a-list-of-rules><span class=secno>5.4.1 </span><span class=content>
2064 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-list-of-rules0>Consume a list of rules<a class=self-link href=#consume-a-list-of-rules0></a></dfn></span><a class=self-link href=#consume-a-list-of-rules></a></h4>
2066 <p> Create an initially empty list of rules.
2068 <p> Repeatedly consume the <a href=#next-input-token>next input token</a>:
2070 <dl>
2071 <dt><a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>
2072 <dd>
2073 Do nothing.
2075 <dt><a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>
2076 <dd>
2077 Return the list of rules.
2079 <dt><a class=css-code data-link-type=token href=#tokendef-cdo>〈CDO〉</a>
2080 <dt><a class=css-code data-link-type=token href=#tokendef-cdc>〈CDC〉</a>
2081 <dd>
2082 If the <dfn data-dfn-type=dfn data-noexport="" id=top-level-flag><var>top-level flag</var><a class=self-link href=#top-level-flag></a></dfn> is set,
2083 do nothing.
2085 <p> Otherwise,
2086 <a href=#reconsume-the-current-input-token>reconsume the current input token</a>.
2087 <a href=#consume-a-qualified-rule0>Consume a qualified rule</a>.
2088 If anything is returned,
2089 append it to the list of rules.
2091 <dt><a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a>
2092 <dd>
2093 <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>.
2094 <a href=#consume-an-at-rule0>Consume an at-rule</a>.
2095 If anything is returned,
2096 append it to the list of rules.
2098 <dt>anything else
2099 <dd>
2100 <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>.
2101 <a href=#consume-a-qualified-rule0>Consume a qualified rule</a>.
2102 If anything is returned,
2103 append it to the list of rules.
2104 </dl>
2107 <h4 class="heading settled heading" data-level=5.4.2 id=consume-an-at-rule><span class=secno>5.4.2 </span><span class=content>
2108 <dfn data-dfn-type=dfn data-noexport="" id=consume-an-at-rule0>Consume an at-rule<a class=self-link href=#consume-an-at-rule0></a></dfn></span><a class=self-link href=#consume-an-at-rule></a></h4>
2110 <p> Create a new at-rule
2111 with its name set to the value of the <a href=#current-input-token>current input token</a>,
2112 its prelude initially set to an empty list,
2113 and its value initially set to nothing.
2115 <p> Repeatedly consume the <a href=#next-input-token>next input token</a>:
2117 <dl>
2118 <dt><a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a>
2119 <dt><a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>
2120 <dd>
2121 Return the at-rule.
2123 <dt><a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>
2124 <dd>
2125 <a href=#consume-a-simple-block0>Consume a simple block</a>
2126 and assign it to the at-rule’s block.
2127 Return the at-rule.
2129 <dt><a href=#simple-block>simple block</a> with an associated token of <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>
2130 <dd>
2131 Assign the block to the at-rule’s block.
2132 Return the at-rule.
2134 <dt>anything else
2135 <dd>
2136 <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>.
2137 <a href=#consume-a-component-value0>Consume a component value</a>.
2138 Append the returned value to the at-rule’s prelude.
2139 </dl>
2142 <h4 class="heading settled heading" data-level=5.4.3 id=consume-a-qualified-rule><span class=secno>5.4.3 </span><span class=content>
2143 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-qualified-rule0>Consume a qualified rule<a class=self-link href=#consume-a-qualified-rule0></a></dfn></span><a class=self-link href=#consume-a-qualified-rule></a></h4>
2145 <p> Create a new qualified rule
2146 with its prelude initially set to an empty list,
2147 and its value initially set to nothing.
2149 <p> Repeatedly consume the <a href=#next-input-token>next input token</a>:
2151 <dl>
2152 <dt><a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>
2153 <dd>
2154 This is a <a href=#parse-errors>parse error</a>.
2155 Return nothing.
2157 <dt><a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>
2158 <dd>
2159 <a href=#consume-a-simple-block0>Consume a simple block</a>
2160 and assign it to the qualified rule’s block.
2161 Return the qualified rule.
2163 <dt><a href=#simple-block>simple block</a> with an associated token of <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>
2164 <dd>
2165 Assign the block to the qualified rule’s block.
2166 Return the qualified rule.
2168 <dt>anything else
2169 <dd>
2170 <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>.
2171 <a href=#consume-a-component-value0>Consume a component value</a>.
2172 Append the returned value to the qualified rule’s prelude.
2173 </dl>
2176 <h4 class="heading settled heading" data-level=5.4.4 id=consume-a-list-of-declarations><span class=secno>5.4.4 </span><span class=content>
2177 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-list-of-declarations0>Consume a list of declarations<a class=self-link href=#consume-a-list-of-declarations0></a></dfn></span><a class=self-link href=#consume-a-list-of-declarations></a></h4>
2179 <p> Create an initially empty list of declarations.
2181 <p> Repeatedly consume the <a href=#next-input-token>next input token</a>:
2183 <dl>
2184 <dt><a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>
2185 <dt><a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a>
2186 <dd>
2187 Do nothing.
2189 <dt><a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>
2190 <dd>
2191 Return the list of declarations.
2193 <dt><a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a>
2194 <dd>
2195 <a href=#consume-an-at-rule0>Consume an at-rule</a>.
2196 Append the returned rule to the list of declarations.
2198 <dt><a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>
2199 <dd>
2200 Initialize a temporary list initially filled with the <a href=#current-input-token>current input token</a>.
2201 <a href=#consume-the-next-input-token>Consume the next input token</a>.
2202 While the <a href=#current-input-token>current input token</a> is anything other than a <a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a> or <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>,
2203 append it to the temporary list
2204 and <a href=#consume-the-next-input-token>consume the next input token</a>.
2205 <a href=#consume-a-declaration0>Consume a declaration</a> from the temporary list.
2206 If anything was returned,
2207 append it to the list of declarations.
2209 <dt>anything else
2210 <dd>
2211 This is a <a href=#parse-errors>parse error</a>.
2212 Repeatedly <a href=#consume-a-component-value0>consume a component value</a>
2213 until it is a <a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a> or <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>.
2214 </dl>
2217 <h4 class="heading settled heading" data-level=5.4.5 id=consume-a-declaration><span class=secno>5.4.5 </span><span class=content>
2218 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-declaration0>Consume a declaration<a class=self-link href=#consume-a-declaration0></a></dfn></span><a class=self-link href=#consume-a-declaration></a></h4>
2220 <p> Create a new declaration
2221 with its name set to the value of the <a href=#current-input-token>current input token</a>
2222 and its value initially set to the empty list.
2224 <ol>
2225 <li>
2226 <a href=#consume-the-next-input-token>Consume the next input token</a>.
2228 <li>
2229 While the <a href=#current-input-token>current input token</a> is a <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>,
2230 <a href=#consume-the-next-input-token>consume the next input token</a>.
2232 <li>
2233 If the <a href=#current-input-token>current input token</a> is anything other than a <a class=css-code data-link-type=token href=#tokendef-colon>〈colon〉</a>,
2234 this is a <a href=#parse-errors>parse error</a>.
2235 Return nothing.
2237 <p> Otherwise, <a href=#consume-the-next-input-token>consume the next input token</a>.
2239 <li>
2240 While the <a href=#current-input-token>current input token</a> is anything other than an <a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>,
2241 append it to the declaration’s value
2242 and <a href=#consume-the-next-input-token>consume the next input token</a>.
2244 <li>
2245 If the last two non-<a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>s in the declaration’s value are
2246 a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> with the value "!"
2247 followed by an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a> with a value that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "important",
2248 remove them from the declaration’s value
2249 and set the declaration’s <var>important</var> flag to true.
2251 <li>
2252 Return the declaration.
2253 </ol>
2256 <h4 class="heading settled heading" data-level=5.4.6 id=consume-a-component-value><span class=secno>5.4.6 </span><span class=content>
2257 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-component-value0>Consume a component value<a class=self-link href=#consume-a-component-value0></a></dfn></span><a class=self-link href=#consume-a-component-value></a></h4>
2259 <p> This section describes how to <a href=#consume-a-component-value0>consume a component value</a>.
2261 <p> <a href=#consume-the-next-input-token>Consume the next input token</a>.
2263 <p> If the <a href=#current-input-token>current input token</a>
2264 is a <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>, <a class=css-code data-link-type=token href=#tokendef-open-square>〈[〉</a>, or <a class=css-code data-link-type=token href=#tokendef-open-paren>〈(〉</a>,
2265 <a href=#consume-a-simple-block0>consume a simple block</a>
2266 and return it.
2268 <p> Otherwise, if the <a href=#current-input-token>current input token</a>
2269 is a <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>,
2270 <a href=#consume-a-function0>consume a function</a>
2271 and return it.
2273 <p> Otherwise, return the <a href=#current-input-token>current input token</a>.
2276 <h4 class="heading settled heading" data-level=5.4.7 id=consume-a-simple-block><span class=secno>5.4.7 </span><span class=content>
2277 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-simple-block0>Consume a simple block<a class=self-link href=#consume-a-simple-block0></a></dfn></span><a class=self-link href=#consume-a-simple-block></a></h4>
2279 <p> This section describes how to <a href=#consume-a-simple-block0>consume a simple block</a>.
2281 <p> The <dfn data-dfn-type=dfn data-noexport="" id=ending-token>ending token<a class=self-link href=#ending-token></a></dfn> is the mirror variant of the <a href=#current-input-token>current input token</a>.
2282 (E.g. if it was called with <a class=css-code data-link-type=token href=#tokendef-open-square>〈[〉</a>, the <a href=#ending-token>ending token</a> is <a class=css-code data-link-type=token href=#tokendef-close-square>〈]〉</a>.)
2284 <p> Create a <a href=#simple-block>simple block</a> with its associated token set to the <a href=#current-input-token>current input token</a>
2285 and with a value with is initially an empty list.
2287 <p> Repeatedly consume the <a href=#next-input-token>next input token</a> and process it as follows:
2289 <dl>
2290 <dt><a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>
2291 <dt><a href=#ending-token>ending token</a>
2292 <dd>
2293 Return the block.
2295 <dt>anything else
2296 <dd>
2297 <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>.
2298 <a href=#consume-a-component-value0>Consume a component value</a>
2299 and append it to the value of the block.
2300 </dl>
2303 <h4 class="heading settled heading" data-level=5.4.8 id=consume-a-function><span class=secno>5.4.8 </span><span class=content>
2304 <dfn data-dfn-type=dfn data-noexport="" id=consume-a-function0>Consume a function<a class=self-link href=#consume-a-function0></a></dfn></span><a class=self-link href=#consume-a-function></a></h4>
2306 <p> This section describes how to <a href=#consume-a-function0>consume a function</a>.
2308 <p> Create a function with a name equal to the value of the <a href=#current-input-token>current input token</a>,
2309 and with a value which is initially an empty list.
2311 <p> Repeatedly consume the <a href=#next-input-token>next input token</a> and process it as follows:
2313 <dl>
2314 <dt><a class=css-code data-link-type=token href=#tokendef-eof>〈EOF〉</a>
2315 <dt><a class=css-code data-link-type=token href=#tokendef-close-paren>〈)〉</a>
2316 <dd>
2317 Return the function.
2319 <dt>anything else
2320 <dd>
2321 <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>.
2322 <a href=#consume-a-component-value0>Consume a component value</a>
2323 and append the returned value
2324 to the function’s value.
2325 </dl>
2329 <h2 class="heading settled heading" data-level=6 id=anb><span class=secno>6 </span><span class=content>
2330 The <var>An+B</var> microsyntax</span><a class=self-link href=#anb></a></h2>
2332 <p> Several things in CSS,
2333 such as the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#nth-child-pseudo>:nth-child()</a> pseudoclass,
2334 need to indicate indexes in a list.
2335 The <var>An+B</var> microsyntax is useful for this,
2336 allowing an author to easily indicate single elements
2337 or all elements at regularly-spaced intervals in a list.
2339 <p> The <dfn data-dfn-type=dfn data-noexport="" id=anb0>An+B<a class=self-link href=#anb0></a></dfn> notation defines an integer step (<dfn data-dfn-type=dfn data-noexport="" id=a>A<a class=self-link href=#a></a></dfn>) and offset (<dfn data-dfn-type=dfn data-noexport="" id=b>B<a class=self-link href=#b></a></dfn>),
2340 and represents the <var>An+B</var>th elements in a list,
2341 for every positive integer or zero value of <var>n</var>,
2342 with the first element in the list having index 1 (not 0).
2344 <p> For values of <var>A</var> and <var>B</var> greater than 0,
2345 this effectively divides the list into groups of <var>A</var> elements
2346 (the last group taking the remainder),
2347 and selecting the <var>B</var>th element of each group.
2349 <p> The <var>An+B</var> notation also accepts the <span class=css data-link-type=maybe>even</span> and <span class=css data-link-type=maybe>odd</span> keywords,
2350 which have the same meaning as <span class=css data-link-type=maybe>2n</span> and <span class=css data-link-type=maybe>2n+1</span>, respectively.
2352 <div class=example>
2353 <p>Examples:
2354 <pre><!--
2355 -->2n+0 /* represents all of the even elements in the list */
2356 <!--
2357 -->even /* same */
2358 <!--
2359 -->4n+1 /* represents the 1st, 5th, 9th, 13th, etc. elements in the list */</pre> </div>
2361 <p> The values of <var>A</var> and <var>B</var> can be negative,
2362 but only the positive results of <var>An+B</var>,
2363 for <var>n</var> ≥ 0,
2364 are used.
2366 <div class=example>
2367 <p>Example:
2368 <pre>-n+6 /* represents the first 6 elements of the list */</pre> </div>
2370 <p> If both <var>A</var> and <var>B</var> are 0,
2371 the pseudo-class represents no element in the list.
2373 <h3 class="heading settled heading" data-level=6.1 id=anb-syntax><span class=secno>6.1 </span><span class=content>
2374 Informal Syntax Description</span><a class=self-link href=#anb-syntax></a></h3>
2376 <p> <em>This section is non-normative.</em>
2378 <p> When <var>A</var> is 0, the <var>An</var> part may be omitted
2379 (unless the <var>B</var> part is already omitted).
2380 When <var>An</var> is not included
2381 and <var>B</var> is non-negative,
2382 the <span class=css data-link-type=maybe>+</span> sign before <var>B</var> (when allowed)
2383 may also be omitted.
2384 In this case the syntax simplifies to just <var>B</var>.
2386 <div class=example>
2387 <p>Examples:
2388 <pre><!--
2389 -->0n+5 /* represents the 5th element in the list */
2390 <!--
2391 -->5 /* same */</pre> </div>
2393 <p> When <var>A</var> is 1 or -1,
2394 the <code>1</code> may be omitted from the rule.
2396 <div class=example>
2397 <p>Examples:
2398 <p>The following notations are therefore equivalent:
2399 <pre><!--
2400 -->1n+0 /* represents all elements in the list */
2401 <!--
2402 -->n+0 /* same */
2403 <!--
2404 -->n /* same */</pre> </div>
2406 <p> If <var>B</var> is 0, then every <var>A</var>th element is picked.
2407 In such a case,
2408 the <var>+B</var> (or <var>-B</var>) part may be omitted
2409 unless the <var>A</var> part is already omitted.
2411 <div class=example>
2412 <p>Examples:
2413 <pre><!--
2414 -->2n+0 /* represents every even element in the list */
2415 <!--
2416 -->2n /* same */</pre> </div>
2418 <p> Whitespace is permitted on either side of the <span class=css data-link-type=maybe>+</span> or <span class=css data-link-type=maybe>-</span>
2419 that separates the <var>An</var> and <var>B</var> parts when both are present.
2421 <div class=example>
2422 <p>Valid Examples with white space:
2423 <pre><!--
2424 -->3n + 1
2425 <!--
2426 -->+3n - 2
2427 <!--
2428 -->-n+ 6
2429 <!--
2430 -->+6</pre> <p>Invalid Examples with white space:
2431 <pre><!--
2432 -->3 n
2433 <!--
2434 -->+ 2n
2435 <!--
2436 -->+ 2</pre> </div>
2439 <h3 class="heading settled heading" data-level=6.2 id=the-anb-type><span class=secno>6.2 </span><span class=content>
2440 The <code><an+b></code> type</span><a class=self-link href=#the-anb-type></a></h3>
2442 <p> The <var>An+B</var> notation was originally defined using a slightly different tokenizer than the rest of CSS,
2443 resulting in a somewhat odd definition when expressed in terms of CSS tokens.
2444 This section describes how to recognize the <var>An+B</var> notation in terms of CSS tokens
2445 (thus defining the <var><an+b></var> type for CSS grammar purposes),
2446 and how to interpret the CSS tokens to obtain values for <var>A</var> and <var>B</var>.
2448 <p> The <var><an+b></var> type is defined
2449 (using the <a href=http://www.w3.org/TR/css3-values/#value-defs>Value Definition Syntax in the Values & Units spec</a>)
2450 as:
2452 <pre class=prod> <dfn class=css-code data-dfn-type=type data-export="" id=anb-production><an+b><a class=self-link href=#anb-production></a></dfn> =
2453 odd | even |
2454 <var><integer></var> |
2456 <var><n-dimension></var> |
2457 '+'?<sup><a href=#anb-plus>†</a></sup> n |
2458 -n |
2460 <var><ndashdigit-dimension></var> |
2461 '+'?<sup><a href=#anb-plus>†</a></sup> <var><ndashdigit-ident></var> |
2462 <var><dashndashdigit-ident></var> |
2464 <var><n-dimension></var> <var><signed-integer></var> |
2465 '+'?<sup><a href=#anb-plus>†</a></sup> n <var><signed-integer></var> |
2466 -n <var><signed-integer></var> |
2468 <var><ndash-dimension></var> <var><signless-integer></var> |
2469 '+'?<sup><a href=#anb-plus>†</a></sup> n- <var><signless-integer></var> |
2470 -n- <var><signless-integer></var> |
2472 <var><n-dimension></var> ['+' | '-'] <var><signless-integer></var>
2473 '+'?<sup><a href=#anb-plus>†</a></sup> n ['+' | '-'] <var><signless-integer></var> |
2474 -n ['+' | '-'] <var><signless-integer></var>
2475 </pre>
2476 <p> where:
2478 <p> <ul>
2479 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-n-dimension><code><n-dimension></code><a class=self-link href=#typedef-n-dimension></a></dfn> is a <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> with its type flag set to "integer", and a unit that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n"
2480 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-ndash-dimension><code><ndash-dimension></code><a class=self-link href=#typedef-ndash-dimension></a></dfn> is a <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> with its type flag set to "integer", and a unit that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n-"
2481 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-ndashdigit-dimension><code><ndashdigit-dimension></code><a class=self-link href=#typedef-ndashdigit-dimension></a></dfn> is a <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> with its type flag set to "integer", and a unit that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n-*", where "*" is a series of one or more <a href=#digit>digits</a>
2482 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-ndashdigit-ident><code><ndashdigit-ident></code><a class=self-link href=#typedef-ndashdigit-ident></a></dfn> is an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a> whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "n-*", where "*" is a series of one or more <a href=#digit>digits</a>
2483 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-dashndashdigit-ident><code><dashndashdigit-ident></code><a class=self-link href=#typedef-dashndashdigit-ident></a></dfn> is an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a> whose value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "-n-*", where "*" is a series of one or more <a href=#digit>digits</a>
2484 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-integer><code><integer></code><a class=self-link href=#typedef-integer></a></dfn> is a <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a> with its type flag set to "integer"
2485 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-signed-integer><code><signed-integer></code><a class=self-link href=#typedef-signed-integer></a></dfn> is a <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a> with its type flag set to "integer", and whose representation starts with "+" or "-"
2486 <li><dfn class=css-code data-dfn-type=type data-export="" id=typedef-signless-integer><code><signless-integer></code><a class=self-link href=#typedef-signless-integer></a></dfn> is a <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a> with its type flag set to "integer", and whose representation start with a <a href=#digit>digit</a>
2487 </ul>
2489 <p id=anb-plus>
2490 <sup>†</sup>: When a plus sign (+) precedes an ident starting with "n", as in the cases marked above,
2491 there must be no whitespace between the two tokens,
2492 or else the tokens do not match the above grammar.
2494 <p> The clauses of the production are interpreted as follows:
2496 <dl>
2497 <dt><span class=css data-link-type=maybe>odd</span>
2498 <dd>
2499 <var>A</var> is 2, <var>B</var> is 1.
2501 <dt><span class=css data-link-type=maybe>even</span>
2502 <dd>
2503 <var>A</var> is 2, <var>B</var> is 0.
2505 <dt><code><var><integer></var></code>
2506 <dd>
2507 <var>A</var> is 0, <var>B</var> is the integer’s value.
2509 <dt><code><var><n-dimension></var></code>
2510 <dt><code>'+'? n</code>
2511 <dt><code>-n</code>
2512 <dd>
2513 <var>A</var> is the dimension’s value, 1, or -1, respectively.
2514 <var>B</var> is 0.
2516 <dt><code><var><ndashdigit-dimension></var></code>
2517 <dt><code>'+'? <var><ndashdigit-ident></var></code>
2518 <dd>
2519 <var>A</var> is the dimension’s value or 1, respectively.
2520 <var>B</var> is the dimension’s unit or ident’s value, respectively,
2521 with the first <a href=#code-point>code point</a> removed and the remainder interpreted as a base-10 number.
2522 <span class=note>B is negative.</span>
2524 <dt><code><var><dashndashdigit-ident></var></code>
2525 <dd>
2526 <var>A</var> is -1.
2527 <var>B</var> is the ident’s value, with the first two <a href=#code-point>code points</a> removed and the remainder interpreted as a base-10 number.
2528 <span class=note>B is negative.</span>
2530 <dt><code><var><n-dimension></var> <var><signed-integer></var></code>
2531 <dt><code>'+'? n <var><signed-integer></var></code>
2532 <dt><code>-n <var><signed-integer></var></code>
2533 <dd>
2534 <var>A</var> is the dimension’s value, 1, or -1, respectively.
2535 <var>B</var> is the integer’s value.
2537 <dt><code><var><ndash-dimension></var> <var><signless-integer></var></code>
2538 <dt><code>'+'? n- <var><signless-integer></var></code>
2539 <dt><code>-n- <var><signless-integer></var></code>
2540 <dd>
2541 <var>A</var> is the dimension’s value, 1, or -1, respectively.
2542 <var>B</var> is the negation of the integer’s value.
2544 <dt><code><var><n-dimension></var> ['+' | '-'] <var><signless-integer></var></code>
2545 <dt><code>'+'? n ['+' | '-'] <var><signless-integer></var></code>
2546 <dt><code>-n ['+' | '-'] <var><signless-integer></var></code>
2547 <dd>
2548 <var>A</var> is the dimension’s value, 1, or -1, respectively.
2549 <var>B</var> is the integer’s value.
2550 If a '-' was provided between the two, <var>B</var> is instead the negation of the integer’s value.
2551 </dl>
2555 <h2 class="heading settled heading" data-level=7 id=rule-defs><span class=secno>7 </span><span class=content>
2556 Defining Grammars for Rules and Other Values</span><a class=self-link href=#rule-defs></a></h2>
2558 <p> The <a href=http://www.w3.org/TR/css3-values/>Values</a> spec defines how to specify a grammar for properties.
2559 This section does the same, but for rules.
2561 <p> Just like in property grammars,
2562 the notation <code><foo></code> refers to the "foo" grammar term,
2563 assumed to be defined elsewhere.
2564 Substituting the <code><foo></code> for its definition results in a semantically identical grammar.
2566 <p> Several types of tokens are written literally, without quotes:
2568 <p> <ul>
2569 <li><a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>s (such as <span class=css data-link-type=maybe>auto</span>, <span class=css data-link-type=maybe>disc</span>, etc), which are simply written as their value.
2570 <li><a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a>s, which are written as an @ character followed by the token’s value, like "@media".
2571 <li><a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>s, which are written as the function name followed by a ( character, like "translate(".
2572 <li>The <a class=css-code data-link-type=token href=#tokendef-colon>〈colon〉</a> (written as <code>:</code>), <a class=css-code data-link-type=token href=#tokendef-comma>〈comma〉</a> (written as <code>,</code>), <a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a> (written as <code>;</code>), <a class=css-code data-link-type=token href=#tokendef-open-paren>〈(〉</a>, <a class=css-code data-link-type=token href=#tokendef-close-paren>〈)〉</a>, <a class=css-code data-link-type=token href=#tokendef-open-curly>〈{〉</a>, and <a class=css-code data-link-type=token href=#tokendef-close-curly>〈}〉</a>s.
2573 </ul>
2575 <p> Tokens match if their value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match
2576 for the value defined in the grammar.
2578 <p class=note>
2579 Although it is possible, with <a href=#escaping0>escaping</a>,
2580 to construct an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a> whose value starts with <code>@</code> or ends with <code>(</code>,
2581 such a tokens is not an <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a> or a <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>
2582 and does not match corresponding grammar definitions.
2584 <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>s are written with their value enclosed in single quotes.
2585 For example, a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> containing the "+" <a href=#code-point>code point</a> is written as <code>'+'</code>.
2586 Similarly, the <a class=css-code data-link-type=token href=#tokendef-open-square>〈[〉</a> and <a class=css-code data-link-type=token href=#tokendef-close-square>〈]〉</a>s must be written in single quotes,
2587 as they’re used by the syntax of the grammar itself to group clauses.
2588 <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a> is never indicated in the grammar;
2589 <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>s are allowed before, after, and between any two tokens,
2590 unless explicitly specified otherwise in prose definitions.
2591 (For example, if the prelude of a rule is a selector,
2592 whitespace is significant.)
2594 <p> When defining a function or a block,
2595 the ending token must be specified in the grammar,
2596 but if it’s not present in the eventual token stream,
2597 it still matches.
2599 <div class=example>
2600 For example, the syntax of the <span class=css data-link-type=maybe>translateX()</span> function is:
2602 <pre>translateX( <a class="production css-code" data-link-type=type><translation-value></a> )</pre>
2603 <p> However, the stylesheet may end with the function unclosed, like:
2605 <pre>.foo { transform: translate(50px</pre>
2606 <p> The CSS parser parses this as a style rule containing one declaration,
2607 whose value is a function named "translate".
2608 This matches the above grammar,
2609 even though the ending token didn’t appear in the token stream,
2610 because by the time the parser is finished,
2611 the presence of the ending token is no longer possible to determine;
2612 all you have is the fact that there’s a block and a function.
2613 </div>
2615 <h3 class="heading settled heading" data-level=7.1 id=declaration-rule-list><span class=secno>7.1 </span><span class=content>
2616 Defining Block Contents: the <a class="production css-code" data-link-type=type href=#typedef-declaration-list><declaration-list></a>, <a class="production css-code" data-link-type=type href=#typedef-rule-list><rule-list></a>, and <a class="production css-code" data-link-type=type href=#typedef-stylesheet><stylesheet></a> productions</span><a class=self-link href=#declaration-rule-list></a></h3>
2618 <p> The CSS parser is agnostic as to the contents of blocks,
2619 such as those that come at the end of some at-rules.
2620 Defining the generic grammar of the blocks in terms of tokens is non-trivial,
2621 but there are dedicated and unambiguous algorithms defined for parsing this.
2623 <p> The <dfn class=css-code data-dfn-type=type data-export="" id=typedef-declaration-list><declaration-list><a class=self-link href=#typedef-declaration-list></a></dfn> production represents a list of declarations.
2624 It may only be used in grammars as the sole value in a block,
2625 and represents that the contents of the block must be parsed using the <a href=#consume-a-list-of-declarations0>consume a list of declarations</a> algorithm.
2627 <p> Similarly, the <dfn class=css-code data-dfn-type=type data-export="" id=typedef-rule-list><rule-list><a class=self-link href=#typedef-rule-list></a></dfn> production represents a list of rules,
2628 and may only be used in grammars as the sole value in a block.
2629 It represents that the contents of the block must be parsed using the <a href=#consume-a-list-of-rules0>consume a list of rules</a> algorithm.
2631 <p> Finally, the <dfn class=css-code data-dfn-type=type data-export="" id=typedef-stylesheet><stylesheet><a class=self-link href=#typedef-stylesheet></a></dfn> production represents a list of rules.
2632 It is identical to <a class="production css-code" data-link-type=type href=#typedef-rule-list><rule-list></a>,
2633 except that blocks using it default to accepting all rules
2634 that aren’t otherwise limited to a particular context.
2636 <div class=example>
2637 For example, the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> rule is defined to have an empty prelude,
2638 and to contain a list of declarations.
2639 This is expressed with the following grammar:
2641 <pre>@font-face { <a class="production css-code" data-link-type=type href=#typedef-declaration-list><declaration-list></a> }</pre>
2642 <p> This is a complete and sufficient definition of the rule’s grammar.
2644 <p> For another example,
2645 <span class=css data-link-type=maybe>@keyframes</span> rules are more complex,
2646 interpreting their prelude as a name and containing keyframes rules in their block
2647 Their grammar is:
2649 <pre>@keyframes <a class="production css-code" data-link-type=type><keyframes-name></a> { <a class="production css-code" data-link-type=type href=#typedef-rule-list><rule-list></a> }</pre> </div>
2651 <p> For rules that use <a class="production css-code" data-link-type=type href=#typedef-declaration-list><declaration-list></a>,
2652 the spec for the rule must define which properties, descriptors, and/or at-rules are valid inside the rule;
2653 this may be as simple as saying "The @foo rule accepts the properties/descriptors defined in this specification/section.",
2654 and extension specs may simply say "The @foo rule additionally accepts the following properties/descriptors.".
2655 Any declarations or at-rules found inside the block that are not defined as valid
2656 must be removed from the rule’s value.
2658 <p> Within a <a class="production css-code" data-link-type=type href=#typedef-declaration-list><declaration-list></a>,
2659 <code>!important</code> is automatically invalid on any descriptors.
2660 If the rule accepts properties,
2661 the spec for the rule must define whether the properties interact with the cascade,
2662 and with what specificity.
2663 If they don’t interact with the cascade,
2664 properties containing <code>!important</code> are automatically invalid;
2665 otherwise using <code>!important</code> is valid and has its usual effect on the cascade origin of the property.
2667 <div class=example>
2668 For example, the grammar for <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> in the previous example must,
2669 in addition to what is written there,
2670 define that the allowed declarations are the descriptors defined in the Fonts spec.
2671 </div>
2673 <p> For rules that use <a class="production css-code" data-link-type=type href=#typedef-rule-list><rule-list></a>,
2674 the spec for the rule must define what types of rules are valid inside the rule,
2675 same as <a class="production css-code" data-link-type=type href=#typedef-declaration-list><declaration-list></a>,
2676 and unrecognized rules must similarly be removed from the rule’s value.
2678 <div class=example>
2679 For example, the grammar for <span class=css data-link-type=maybe>@keyframes</span> in the previous example must,
2680 in addition to what is written there,
2681 define that the only allowed rules are <a class="production css-code" data-link-type=type><keyframe-rule></a>s,
2682 which are defined as:
2684 <pre><a class="production css-code" data-link-type=type><keyframe-rule></a> = <a class="production css-code" data-link-type=type><keyframe-selector></a> { <a class="production css-code" data-link-type=type href=#typedef-declaration-list><declaration-list></a> }</pre>
2685 <p> Keyframe rules, then,
2686 must further define that they accept as declarations all animatable CSS properties,
2687 plus the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#animation-timing-function title=animation-timing-function>animation-timing-function</a> property,
2688 but that they do not interact with the cascade.
2689 </div>
2691 <p> For rules that use <a class="production css-code" data-link-type=type href=#typedef-stylesheet><stylesheet></a>,
2692 all rules are allowed by default,
2693 but the spec for the rule may define what types of rules are <em>invalid</em> inside the rule.
2695 <div class=example>
2696 For example, the <span class=css data-link-type=maybe>@media</span> rule accepts anything that can be placed in a stylesheet,
2697 except more <span class=css data-link-type=maybe>@media</span> rules.
2698 As such, its grammar is:
2700 <pre>@media <a class="production css-code" data-link-type=type><media-query-list></a> { <a class="production css-code" data-link-type=type href=#typedef-stylesheet><stylesheet></a> }</pre>
2701 <p> It additionally defines a restriction that the <a class="production css-code" data-link-type=type href=#typedef-stylesheet><stylesheet></a> can not contain <span class=css data-link-type=maybe>@media</span> rules,
2702 which causes them to be dropped from the outer rule’s value if they appear.
2703 </div>
2706 <h2 class="heading settled heading" data-level=8 id=css-stylesheets><span class=secno>8 </span><span class=content>
2707 CSS stylesheets</span><a class=self-link href=#css-stylesheets></a></h2>
2709 <p> To parse a CSS stylesheet,
2710 first <a href=#parse-a-stylesheet0>parse a stylesheet</a>.
2711 Interpret all of the resulting top-level <a href=#qualified-rule>qualified rules</a> as <a href=#style-rule>style rules</a>, defined below.
2713 <p> If any style rule is invalid,
2714 or any at-rule is not recognized or is invalid according to its grammar or context,
2715 it’s a <a href=#parse-errors>parse error</a>.
2716 Discard that rule.
2718 <h3 class="heading settled heading" data-level=8.1 id=style-rules><span class=secno>8.1 </span><span class=content>
2719 Style rules</span><a class=self-link href=#style-rules></a></h3>
2721 <p> A <dfn data-dfn-type=dfn data-noexport="" id=style-rule>style rule<a class=self-link href=#style-rule></a></dfn> is a <a href=#qualified-rule>qualified rule</a>
2722 that associates a <a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a> <a data-biblio-type=normative data-link-type=biblio href=#select title=SELECT>[SELECT]</a>
2723 with a list of property declarations.
2724 They are also called
2725 <a href=http://www.w3.org/TR/CSS21/syndata.html#rule-sets>rule sets</a> in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=CSS21>[CSS21]</a>.
2726 CSS Cascading and Inheritance <a data-biblio-type=normative data-link-type=biblio href=#css3cascade title=CSS3CASCADE>[CSS3CASCADE]</a> defines how the declarations inside of style rules participate in the cascade.
2728 <p> The prelude of the qualified rule is parsed as a
2729 <a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a>.
2730 If this results in an <a href=http://dev.w3.org/csswg/selectors4/#invalid>invalid selector list</a>,
2731 the entire style rule is invalid.
2733 <p> The content of the qualified rule’s block is parsed as a
2734 <a href=#parse-a-list-of-declarations0 title="parse a list of declarations">list of declarations</a>.
2735 Unless defined otherwise by another specification or a future level of this specification,
2736 at-rules in that list are invalid
2737 and must be ignored.
2738 Declaration for an unknown CSS property
2739 or whose value does not match the syntax defined by the property are invalid
2740 and must be ignored.
2741 The validity of the style rule’s contents have no effect on the validity of the style rule itself.
2742 Unless otherwise specified, property names are <a href=#ascii-case-insensitive>ASCII case-insensitive</a>.
2744 <p class=note> Note: The names of Custom Properties <a data-biblio-type=informative data-link-type=biblio href=#css-variables title=CSS-VARIABLES>[CSS-VARIABLES]</a> are case-sensitive.
2746 <p> <a href=#qualified-rule>Qualified rules</a> at the top-level of a CSS stylesheet are style rules.
2747 Qualified rules in other contexts may or may not be style rules,
2748 as defined by the context.
2750 <p class=example>
2751 For example, qualified rules inside <span class=css data-link-type=maybe>@media</span> rules <a data-biblio-type=informative data-link-type=biblio href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a> are style rules,
2752 but qualified rules inside <span class=css data-link-type=maybe>@keyframes</span> rules are not <a data-biblio-type=informative data-link-type=biblio href=#css3-animations title=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]</a>.
2754 <h3 class="heading settled heading" data-level=8.2 id=the-charset-rule><span class=secno>8.2 </span><span class=content>
2755 The <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> Rule</span><a class=self-link href=#the-charset-rule></a></h3>
2757 <p> The <dfn class=css-code data-dfn-type=at-rule data-export="" id=at-ruledef-charset><a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a><a class=self-link href=#at-ruledef-charset></a></dfn> rule is a very special <a href=#at-rule>at-rule</a> associated with determining the character encoding of the stylesheet.
2758 In general, its grammar is:
2760 <pre class=prod><dfn class=css-code data-dfn-type=type data-export="" id=typedef-at-charset-rule><at-charset-rule><a class=self-link href=#typedef-at-charset-rule></a></dfn> = @charset <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value><string></a>;</pre>
2761 <p> Additionally, an <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule is invalid if it is not at the top-level of a stylesheet,
2762 or if it is not the very first rule of a stylesheet.
2764 <p> <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules have an <dfn data-dfn-type=dfn data-noexport="" id=encoding>encoding<a class=self-link href=#encoding></a></dfn>,
2765 given by the value of the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value><string></a>.
2767 <p> The <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule has <strong>no effect on a stylesheet</strong>.
2769 <p class=note> Note: However, the algorithm to <a href=#determine-the-fallback-encoding>determine the fallback encoding</a>
2770 looks at the first several bytes of the stylesheet
2771 to see if they’re a match for the ASCII characters <code>@charset "XXX";</code>,
2772 where XXX is a sequence of bytes other than 22 (ASCII for <code>"</code>).
2773 While this resembles an <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule,
2774 it’s not actually the same thing.
2775 For example, the necessary sequence of bytes will spell out something entirely different
2776 if the stylesheet is in an encoding that’s not ASCII-compatible,
2777 such as UTF-16.
2781 <h2 class="heading settled heading" data-level=9 id=serialization><span class=secno>9 </span><span class=content>
2782 Serialization</span><a class=self-link href=#serialization></a></h2>
2784 <p> This specification does not define how to serialize CSS in general,
2785 leaving that task to the CSSOM and individual feature specifications.
2786 However, there is one important facet that must be specified here regarding comments,
2787 to ensure accurate "round-tripping" of data from text to CSS objects and back.
2789 <p> The tokenizer described in this specification does not produce tokens for comments,
2790 or otherwise preserve them in any way.
2791 Implementations may preserve the contents of comments and their location in the token stream.
2792 If they do, this preserved information must have no effect on the parsing step,
2793 but must be serialized in its position as
2794 "/*"
2795 followed by its contents
2796 followed by "*/".
2798 <p> If the implementation does not preserve comments,
2799 it must insert the text "/**/" between the serialization of adjacent tokens
2800 when the two tokens are of the following pairs:
2802 <p> <ul>
2803 <li>
2804 a <a class=css-code data-link-type=token href=#tokendef-hash>〈hash〉</a> or <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a> followed by a <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a>, <a class=css-code data-link-type=token href=#tokendef-percentage>〈percentage〉</a>, <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>, <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a>, <a class=css-code data-link-type=token href=#tokendef-unicode-range>〈unicode-range〉</a>, <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>, or a <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a> token;
2806 <li>
2807 <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a>s, <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>s, and <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a>s in any combination;
2809 <li>
2810 a <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a>, <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>, or <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> followed by a <a class=css-code data-link-type=token href=#tokendef-percentage>〈percentage〉</a>, <a class=css-code data-link-type=token href=#tokendef-unicode-range>〈unicode-range〉</a>, <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>, or <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>;
2812 <li>
2813 an <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a> followed by a <a class=css-code data-link-type=token href=#tokendef-open-paren>〈(〉</a>;
2815 <li>
2816 a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> containing "#" or "@" followed by any token except <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>;
2818 <li>
2819 a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> containing "-", "+", ".", "<", ">", or "!" following or followed by any token except <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>;
2821 <li>
2822 a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> containing "/" following or followed by a <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> containing "*".
2823 </ul>
2825 <p class=note> Note: The preceding pairs of tokens can only be adjacent due to comments in the original text,
2826 so the above rule reinserts the minimum number of comments into the serialized text to ensure an accurate round-trip.
2827 (Roughly. The <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> rules are slightly too powerful, for simplicity.)
2829 <p class=note> Note: No comment is inserted between consecutive <a class=css-code data-link-type=token href=#tokendef-whitespace>〈whitespace〉</a>.
2830 As a consequence such token sequences will not "round-trip" exactly.
2831 This shouldn’t be an issue as CSS grammars always interpret
2832 any amount of whitespace as identical to a single space.
2834 <h3 class="heading settled heading" data-level=9.1 id=serializing-anb><span class=secno>9.1 </span><span class=content>
2835 Serializing <var><an+b></var></span><a class=self-link href=#serializing-anb></a></h3>
2837 <p> To serialize an <var><an+b></var> value,
2838 let <var>s</var> initially be the empty string:
2840 <dl>
2841 <dt><var>A</var> and <var>B</var> are both zero
2842 <dd>
2843 Append "0" to <var>s</var>.
2845 <dt><var>A</var> is zero, <var>B</var> is non-zero
2846 <dd>
2847 Serialize <var>B</var> and append it to <var>s</var>.
2849 <dt><var>A</var> is non-zero, <var>B</var> is zero
2850 <dd>
2851 Serialize <var>A</var> and append it to <var>s</var>.
2852 Append "n" to <var>s</var>.
2854 <dt><var>A</var> and <var>B</var> are both non-zero
2855 <dd>
2856 Serialize <var>A</var> and append it to <var>s</var>.
2857 Append "n" to <var>s</var>.
2858 If <var>B</var> is positive,
2859 append "+" to <var>s</var>
2860 Serialize <var>B</var> and append it to <var>s</var>.
2861 </dl>
2863 <p> Return <var>s</var>.
2865 <h2 class="heading settled heading" data-level=10 id=changes><span class=secno>10 </span><span class=content>Changes from CSS 2.1 and Selectors Level 3</span><a class=self-link href=#changes></a></h2>
2867 <p> <em>This section is non-normative.</em>
2869 <p class=note> Note: The point of this spec is to match reality;
2870 changes from CSS2.1 are nearly always because CSS 2.1 specified something that doesn’t match actual browser behavior,
2871 or left something unspecified.
2872 If some detail doesn’t match browsers,
2873 please let me know
2874 as it’s almost certainly unintentional.
2876 <p> Changes in decoding from a byte stream:
2878 <p> <ul>
2879 <li>
2880 Only detect <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules in ASCII-compatible byte patterns.
2882 <li>
2883 Ignore <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules that specify an ASCII-incompatible encoding,
2884 as that would cause the rule itself to not decode properly.
2886 <li>
2887 Refer to the the <a href=http://encoding.spec.whatwg.org/>Encoding Standard</a>
2888 rather than the IANA registery for character encodings.
2890 </ul>
2892 <p> Tokenization changes:
2894 <p> <ul>
2895 <li>
2896 Any U+0000 NULL <a href=#code-point>code point</a> in the CSS source is replaced with U+FFFD REPLACEMENT CHARACTER.
2898 <li>
2899 Any hexadecimal escape sequence such as <span class=css data-link-type=maybe>\0</span> that evaluate to zero
2900 produce U+FFFD REPLACEMENT r rather than U+0000 NULL.
2901 <!--
2902 This covers a security issue:
2903 https://bugzilla.mozilla.org/show_bug.cgi?id=228856
2904 -->
2906 <li>
2907 The definition of <a href=#non-ascii-code-point>non-ASCII code point</a> was changed
2908 to be consistent with every definition of ASCII.
2909 This affects <a href=#code-point>code points</a> U+0080 to U+009F,
2910 which are now <a href=#name-code-point>name code points</a> rather than <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a>s,
2911 like the rest of <a href=#non-ascii-code-point>non-ASCII code points</a>.
2913 <li>
2914 Tokenization does not emit COMMENT or BAD_COMMENT tokens anymore.
2915 BAD_COMMENT is now considered the same as normal token (not an error.)
2916 <a href=#serialization>Serialization</a> is responsible
2917 for inserting comments as necessary between tokens that need to be separated,
2918 e.g. two consecutive <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>s.
2920 <li>
2921 Apply the <a href=http://www.w3.org/TR/CSS21/syndata.html#unexpected-eof>EOF error handling rule</a> in the tokenizer
2922 and emit normal <a class=css-code data-link-type=token href=#tokendef-string>〈string〉</a> and <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a> tokens rather than BAD_STRING or BAD_URI
2923 on EOF.
2925 <li>
2926 The <a class=css-code data-link-type=token href=#tokendef-prefix-match>〈prefix-match〉</a>, <a class=css-code data-link-type=token href=#tokendef-suffix-match>〈suffix-match〉</a>, and <a class=css-code data-link-type=token href=#tokendef-substring-match>〈substring-match〉</a> tokens have been imported from Selectors 3.
2928 <li>
2929 The BAD_URI token (now <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a>) is "self-contained".
2930 In other words, once the tokenizer realizes it’s in a <a class=css-code data-link-type=token href=#tokendef-bad-url>〈bad-url〉</a> rather than a <a class=css-code data-link-type=token href=#tokendef-url>〈url〉</a>,
2931 it just seeks forward to look for the closing ),
2932 ignoring everything else.
2933 This behavior is simpler than treating it like a <a class=css-code data-link-type=token href=#tokendef-function>〈function〉</a>
2934 and paying attention to opened blocks and such.
2935 Only WebKit exhibits this behavior,
2936 but it doesn’t appear that we’ve gotten any compat bugs from it.
2938 <li>
2939 The <a class=css-code data-link-type=token href=#tokendef-comma>〈comma〉</a> has been added.
2941 <li>
2942 The <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a>, <a class=css-code data-link-type=token href=#tokendef-number>〈number〉</a>, and <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> tokens have been changed
2943 to include the preceding +/- sign as part of their value
2944 (rather than as a separate <a class=css-code data-link-type=token href=#tokendef-delim>〈delim〉</a> that needs to be manually handled every time the token is mentioned in other specs).
2945 The only consequence of this is that comments can no longer be inserted between the sign and the number.
2947 <li>
2948 Scientific notation is supported for numbers/percentages/dimensions to match SVG,
2949 per WG resolution.
2951 <li>
2952 <a class=css-code data-link-type=token href=#tokendef-column>〈column〉</a> has been added,
2953 to keep Selectors parsing in single-token lookahead.
2955 <li>
2956 Hexadecimal escape for <a href=#surrogate-code-point>surrogate code points</a> now emit a replacement character rather than the surrogate.
2957 This allows implementations to safely use UTF-16 internally.
2959 </ul>
2961 <p> Parsing changes:
2963 <p> <ul>
2964 <li>
2965 Any list of declaration now also accepts at-rules, like <span class=css data-link-type=maybe>@page</span>,
2966 per WG resolution.
2967 This makes a difference in error handling
2968 even if no such at-rules are defined yet:
2969 an at-rule, valid or not, ends and lets the next declaration being
2970 at a {} block without a <a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a>.
2972 <li>
2973 The handling of some miscellanous "special" tokens
2974 (like an unmatched <a class=css-code data-link-type=token href=#tokendef-close-curly>〈}〉</a>)
2975 showing up in various places in the grammar
2976 has been specified with some reasonable behavior shown by at least one browser.
2977 Previously, stylesheets with those tokens in those places just didn’t match the stylesheet grammar at all,
2978 so their handling was totally undefined.
2979 Specifically:
2981 <p> <ul>
2982 <li>
2983 [] blocks, () blocks and functions can now contain {} blocks, <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a>s or <a class=css-code data-link-type=token href=#tokendef-semicolon>〈semicolon〉</a>s
2985 <li>
2986 Qualified rule preludes can now contain semicolons
2988 <li>
2989 Qualified rule and at-rule preludes can now contain <a class=css-code data-link-type=token href=#tokendef-at-keyword>〈at-keyword〉</a>s
2990 </ul>
2992 </ul>
2994 <p> <var>An+B</var> changes from Selectors Level 3 <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a>:
2996 <p> <ul>
2997 <li>
2998 The <var>An+B</var> microsyntax has now been formally defined in terms of CSS tokens,
2999 rather than with a separate tokenizer.
3000 This has resulted in minor differences:
3002 <p> <ul>
3003 <li>
3004 In some cases, minus signs or digits can be escaped
3005 (when they appear as part of the unit of a <a class=css-code data-link-type=token href=#tokendef-dimension>〈dimension〉</a> or <a class=css-code data-link-type=token href=#tokendef-ident>〈ident〉</a>).
3006 </ul>
3007 </ul>
3009 <h2 class="no-num heading settled heading" id=acknowledgments><span class=content>
3010 Acknowledgments</span><a class=self-link href=#acknowledgments></a></h2>
3012 <p>
3013 Thanks for feedback and contributions from
3014 David Baron,
3015 呂康豪 (Kang-Hao Lu),
3016 and Marc O’Morain.
3018 <h2 class="no-ref no-num heading settled heading" id=conformance><span class=content>
3019 Conformance</span><a class=self-link href=#conformance></a></h2>
3021 <h3 class="no-ref heading settled heading" id=conventions><span class=content>
3022 Document conventions</span><a class=self-link href=#conventions></a></h3>
3024 <p>Conformance requirements are expressed with a combination of
3025 descriptive assertions and RFC 2119 terminology. The key words "MUST",
3026 "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
3027 "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
3028 document are to be interpreted as described in RFC 2119.
3029 However, for readability, these words do not appear in all uppercase
3030 letters in this specification.
3032 <p>All of the text of this specification is normative except sections
3033 explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=RFC2119>[RFC2119]</a></p>
3035 <p>Examples in this specification are introduced with the words "for example"
3036 or are set apart from the normative text with <code>class="example"</code>,
3037 like this:
3039 <div class=example>
3040 <p>This is an example of an informative example.</p>
3041 </div>
3043 <p>Informative notes begin with the word "Note" and are set apart from the
3044 normative text with <code>class="note"</code>, like this:
3046 <p class=note>Note, this is an informative note.</p>
3048 <h3 class="no-ref heading settled heading" id=conformance-classes><span class=content>
3049 Conformance classes</span><a class=self-link href=#conformance-classes></a></h3>
3051 <p>Conformance to this specification
3052 is defined for three conformance classes:
3053 <dl>
3054 <dt>style sheet
3055 <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS
3056 style sheet</a>.
3057 <dt>renderer
3058 <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a>
3059 that interprets the semantics of a style sheet and renders
3060 documents that use them.
3061 <dt>authoring tool
3062 <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a>
3063 that writes a style sheet.
3064 </dl>
3066 <p>A style sheet is conformant to this specification
3067 if all of its statements that use syntax defined in this module are valid
3068 according to the generic CSS grammar and the individual grammars of each
3069 feature defined in this module.
3071 <p>A renderer is conformant to this specification
3072 if, in addition to interpreting the style sheet as defined by the
3073 appropriate specifications, it supports all the features defined
3074 by this specification by parsing them correctly
3075 and rendering the document accordingly. However, the inability of a
3076 UA to correctly render a document due to limitations of the device
3077 does not make the UA non-conformant. (For example, a UA is not
3078 required to render color on a monochrome monitor.)
3080 <p>An authoring tool is conformant to this specification
3081 if it writes style sheets that are syntactically correct according to the
3082 generic CSS grammar and the individual grammars of each feature in
3083 this module, and meet all other conformance requirements of style sheets
3084 as described in this module.
3086 <h3 class="no-ref heading settled heading" id=partial><span class=content>
3087 Partial implementations</span><a class=self-link href=#partial></a></h3>
3089 <p>So that authors can exploit the forward-compatible parsing rules to
3090 assign fallback values, CSS renderers <strong>must</strong>
3091 treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore
3092 as appropriate</a>) any at-rules, properties, property values, keywords,
3093 and other syntactic constructs for which they have no usable level of
3094 support. In particular, user agents <strong>must not</strong> selectively
3095 ignore unsupported component values and honor supported values in a single
3096 multi-value property declaration: if any value is considered invalid
3097 (as unsupported values must be), CSS requires that the entire declaration
3098 be ignored.</p>
3100 <h3 class="no-ref heading settled heading" id=experimental><span class=content>
3101 Experimental implementations</span><a class=self-link href=#experimental></a></h3>
3103 <p>To avoid clashes with future CSS features, the CSS2.1 specification
3104 reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed
3105 syntax</a> for proprietary and experimental extensions to CSS.
3107 <p>Prior to a specification reaching the Candidate Recommendation stage
3108 in the W3C process, all implementations of a CSS feature are considered
3109 experimental. The CSS Working Group recommends that implementations
3110 use a vendor-prefixed syntax for such features, including those in
3111 W3C Working Drafts. This avoids incompatibilities with future changes
3112 in the draft.
3113 </p>
3115 <h3 class="no-ref heading settled heading" id=testing><span class=content>
3116 Non-experimental implementations</span><a class=self-link href=#testing></a></h3>
3118 <p>Once a specification reaches the Candidate Recommendation stage,
3119 non-experimental implementations are possible, and implementors should
3120 release an unprefixed implementation of any CR-level feature they
3121 can demonstrate to be correctly implemented according to spec.
3123 <p>To establish and maintain the interoperability of CSS across
3124 implementations, the CSS Working Group requests that non-experimental
3125 CSS renderers submit an implementation report (and, if necessary, the
3126 testcases used for that implementation report) to the W3C before
3127 releasing an unprefixed implementation of any CSS features. Testcases
3128 submitted to W3C are subject to review and correction by the CSS
3129 Working Group.
3131 <p>Further information on submitting testcases and implementation reports
3132 can be found from on the CSS Working Group’s website at
3133 <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>.
3134 Questions should be directed to the
3135 <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a>
3136 mailing list.
3138 <h2 class="no-num no-ref heading settled heading" id=references><span class=content>
3139 References</span><a class=self-link href=#references></a></h2>
3141 <h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
3142 Normative References</span><a class=self-link href=#normative></a></h3>
3143 <div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#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><dt id=css3cascade title=CSS3CASCADE><a class=self-link href=#css3cascade></a>[CSS3CASCADE]<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-css3-cascade-20130103/>CSS Cascading and Inheritance Level 3</a>. 3 January 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-cascade-20130103/>http://www.w3.org/TR/2013/WD-css3-cascade-20130103/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#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><dt id=select title=SELECT><a class=self-link href=#select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl></div>
3145 <h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
3146 Informative References</span><a class=self-link href=#informative></a></h3>
3147 <div data-fill-with=informative-references><dl><dt id=css-variables title=CSS-VARIABLES><a class=self-link href=#css-variables></a>[CSS-VARIABLES]<dd>Luke Macpherson; Tab Atkins Jr.; Daniel Glazman. <a href=http://www.w3.org/TR/2012/WD-css-variables-20120410/>CSS Variables Module Level 1</a>. 10 April 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css-variables-20120410/>http://www.w3.org/TR/2012/WD-css-variables-20120410/</a><dt id=css3-animations title=CSS3-ANIMATIONS><a class=self-link href=#css3-animations></a>[CSS3-ANIMATIONS]<dd>Dean Jackson; et al. <a href=http://www.w3.org/TR/2012/WD-css3-animations-20120403/>CSS Animations</a>. 3 April 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-animations-20120403/>http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a><dt id=css3-conditional title=CSS3-CONDITIONAL><a class=self-link href=#css3-conditional></a>[CSS3-CONDITIONAL]<dd>L. David Baron. <a href=http://www.w3.org/TR/2012/WD-css3-conditional-20121213/>CSS Conditional Rules Module Level 3</a>. 13 December 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-conditional-20121213/>http://www.w3.org/TR/2012/WD-css3-conditional-20121213/</a><dt id=css3-fonts title=CSS3-FONTS><a class=self-link href=#css3-fonts></a>[CSS3-FONTS]<dd>John Daggett. <a href=http://www.w3.org/TR/2012/WD-css3-fonts-20121211/>CSS Fonts Module Level 3</a>. 11 December 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-fonts-20121211/>http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a><dt id=mediaq title=MEDIAQ><a class=self-link href=#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></dl></div>
3149 <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
3150 Index</span><a class=self-link href=#index></a></h2>
3151 <div data-fill-with=index><ul class=indexlist>
3152 <li>〈[〉, <a href=#tokendef-open-square title="section 4">4</a>
3153 <li>〈]〉, <a href=#tokendef-close-square title="section 4">4</a>
3154 <li>〈(〉, <a href=#tokendef-open-paren title="section 4">4</a>
3155 <li>〈)〉, <a href=#tokendef-close-paren title="section 4">4</a>
3156 <li>〈{〉, <a href=#tokendef-open-curly title="section 4">4</a>
3157 <li>〈}〉, <a href=#tokendef-close-curly title="section 4">4</a>
3158 <li>A, <a href=#a title="section 6">6</a>
3159 <li>An+B, <a href=#anb0 title="section 6">6</a>
3160 <li><an+b>, <a href=#anb-production title="section 6.2">6.2</a>
3161 <li>are a valid escape, <a href=#check-if-two-code-points-are-a-valid-escape0 title="section 4.3.8">4.3.8</a>
3162 <li>ASCII case-insensitive, <a href=#ascii-case-insensitive title="section 5.2">5.2</a>
3163 <li><at-charset-rule>, <a href=#typedef-at-charset-rule title="section 8.2">8.2</a>
3164 <li>〈at-keyword〉, <a href=#tokendef-at-keyword title="section 4">4</a>
3165 <li>at-rule, <a href=#at-rule title="section 5">5</a>
3166 <li>B, <a href=#b title="section 6">6</a>
3167 <li>〈bad-string〉, <a href=#tokendef-bad-string title="section 4">4</a>
3168 <li>〈bad-url〉, <a href=#tokendef-bad-url title="section 4">4</a>
3169 <li>〈CDC〉, <a href=#tokendef-cdc title="section 4">4</a>
3170 <li>〈CDO〉, <a href=#tokendef-cdo title="section 4">4</a>
3171 <li>@charset, <a href=#at-ruledef-charset title="section 8.2">8.2</a>
3172 <li>check if three code points would start an identifier, <a href=#check-if-three-code-points-would-start-an-identifier0 title="section 4.3.9">4.3.9</a>
3173 <li>check if three code points would start a number, <a href=#check-if-three-code-points-would-start-a-number0 title="section 4.3.10">4.3.10</a>
3174 <li>check if two code points are a valid escape, <a href=#check-if-two-code-points-are-a-valid-escape0 title="section 4.3.8">4.3.8</a>
3175 <li>code point, <a href=#code-point title="section 4.2">4.2</a>
3176 <li>〈colon〉, <a href=#tokendef-colon title="section 4">4</a>
3177 <li>〈column〉, <a href=#tokendef-column title="section 4">4</a>
3178 <li>〈comma〉, <a href=#tokendef-comma title="section 4">4</a>
3179 <li>component value, <a href=#component-value title="section 5">5</a>
3180 <li>Consume a component value, <a href=#consume-a-component-value0 title="section 5.4.6">5.4.6</a>
3181 <li>Consume a declaration, <a href=#consume-a-declaration0 title="section 5.4.5">5.4.5</a>
3182 <li>Consume a function, <a href=#consume-a-function0 title="section 5.4.8">5.4.8</a>
3183 <li>Consume a list of declarations, <a href=#consume-a-list-of-declarations0 title="section 5.4.4">5.4.4</a>
3184 <li>Consume a list of rules, <a href=#consume-a-list-of-rules0 title="section 5.4.1">5.4.1</a>
3185 <li>Consume a name, <a href=#consume-a-name0 title="section 4.3.11">4.3.11</a>
3186 <li>Consume an at-rule, <a href=#consume-an-at-rule0 title="section 5.4.2">5.4.2</a>
3187 <li>Consume an escaped code point, <a href=#consume-an-escaped-code-point0 title="section 4.3.7">4.3.7</a>
3188 <li>Consume an ident-like token, <a href=#consume-an-ident-like-token0 title="section 4.3.3">4.3.3</a>
3189 <li>Consume a number, <a href=#consume-a-number0 title="section 4.3.12">4.3.12</a>
3190 <li>Consume a numeric token, <a href=#consume-a-numeric-token0 title="section 4.3.2">4.3.2</a>
3191 <li>Consume a qualified rule, <a href=#consume-a-qualified-rule0 title="section 5.4.3">5.4.3</a>
3192 <li>Consume a simple block, <a href=#consume-a-simple-block0 title="section 5.4.7">5.4.7</a>
3193 <li>Consume a string token, <a href=#consume-a-string-token0 title="section 4.3.4">4.3.4</a>
3194 <li>Consume a token, <a href=#consume-a-token0 title="section 4.3.1">4.3.1</a>
3195 <li>Consume a unicode-range token, <a href=#consume-a-unicode-range-token0 title="section 4.3.6">4.3.6</a>
3196 <li>Consume a url token, <a href=#consume-a-url-token0 title="section 4.3.5">4.3.5</a>
3197 <li>consume the next input token, <a href=#consume-the-next-input-token title="section 5.2">5.2</a>
3198 <li>Consume the remnants of a bad url, <a href=#consume-the-remnants-of-a-bad-url0 title="section 4.3.14">4.3.14</a>
3199 <li>Convert a string to a number, <a href=#convert-a-string-to-a-number0 title="section 4.3.13">4.3.13</a>
3200 <li>current input code point, <a href=#current-input-code-point title="section 4.2">4.2</a>
3201 <li>current input token, <a href=#current-input-token title="section 5.2">5.2</a>
3202 <li>〈dash-match〉, <a href=#tokendef-dash-match title="section 4">4</a>
3203 <li><dashndashdigit-ident>, <a href=#typedef-dashndashdigit-ident title="section 6.2">6.2</a>
3204 <li>declaration, <a href=#declaration title="section 5">5</a>
3205 <li><declaration-list>, <a href=#typedef-declaration-list title="section 7.1">7.1</a>
3206 <li>decode, <a href=#decode title="section 3.2">3.2</a>
3207 <li>〈delim〉, <a href=#tokendef-delim title="section 4">4</a>
3208 <li>determine the fallback encoding, <a href=#determine-the-fallback-encoding title="section 3.2">3.2</a>
3209 <li>digit, <a href=#digit title="section 4.2">4.2</a>
3210 <li>〈dimension〉, <a href=#tokendef-dimension title="section 4">4</a>
3211 <li>encoding, <a href=#encoding title="section 8.2">8.2</a>
3212 <li>ending token, <a href=#ending-token title="section 5.4.7">5.4.7</a>
3213 <li>〈EOF〉, <a href=#tokendef-eof title="section 5.2">5.2</a>
3214 <li>EOF code point, <a href=#eof-code-point title="section 4.2">4.2</a>
3215 <li>escaping, <a href=#escaping0 title="section 2.1">2.1</a>
3216 <li>〈function〉, <a href=#tokendef-function title="section 4">4</a>
3217 <li>function, <a href=#function title="section 5">5</a>
3218 <li>get an encoding, <a href=#get-an-encoding title="section 3.2">3.2</a>
3219 <li>〈hash〉, <a href=#tokendef-hash title="section 4">4</a>
3220 <li>hex digit, <a href=#hex-digit title="section 4.2">4.2</a>
3221 <li>〈ident〉, <a href=#tokendef-ident title="section 4">4</a>
3222 <li>〈include-match〉, <a href=#tokendef-include-match title="section 4">4</a>
3223 <li><integer>, <a href=#typedef-integer title="section 6.2">6.2</a>
3224 <li>letter, <a href=#letter title="section 4.2">4.2</a>
3225 <li>lowercase letter, <a href=#lowercase-letter title="section 4.2">4.2</a>
3226 <li>maximum allowed code point, <a href=#maximum-allowed-code-point title="section 4.2">4.2</a>
3227 <li>name code point, <a href=#name-code-point title="section 4.2">4.2</a>
3228 <li>name-start code point, <a href=#name-start-code-point title="section 4.2">4.2</a>
3229 <li><ndashdigit-dimension>, <a href=#typedef-ndashdigit-dimension title="section 6.2">6.2</a>
3230 <li><ndashdigit-ident>, <a href=#typedef-ndashdigit-ident title="section 6.2">6.2</a>
3231 <li><ndash-dimension>, <a href=#typedef-ndash-dimension title="section 6.2">6.2</a>
3232 <li><n-dimension>, <a href=#typedef-n-dimension title="section 6.2">6.2</a>
3233 <li>newline, <a href=#newline title="section 4.2">4.2</a>
3234 <li>next input code point, <a href=#next-input-code-point title="section 4.2">4.2</a>
3235 <li>next input token, <a href=#next-input-token title="section 5.2">5.2</a>
3236 <li>non-ASCII code point, <a href=#non-ascii-code-point title="section 4.2">4.2</a>
3237 <li>non-printable code point, <a href=#non-printable-code-point title="section 4.2">4.2</a>
3238 <li>〈number〉, <a href=#tokendef-number title="section 4">4</a>
3239 <li>Parse a component value, <a href=#parse-a-component-value0 title="section 5.3.6">5.3.6</a>
3240 <li>Parse a declaration, <a href=#parse-a-declaration0 title="section 5.3.4">5.3.4</a>
3241 <li>Parse a list of component values, <a href=#parse-a-list-of-component-values0 title="section 5.3.7">5.3.7</a>
3242 <li>Parse a list of declarations, <a href=#parse-a-list-of-declarations0 title="section 5.3.5">5.3.5</a>
3243 <li>Parse a list of rules, <a href=#parse-a-list-of-rules0 title="section 5.3.2">5.3.2</a>
3244 <li>Parse a rule, <a href=#parse-a-rule0 title="section 5.3.3">5.3.3</a>
3245 <li>Parse a stylesheet, <a href=#parse-a-stylesheet0 title="section 5.3.1">5.3.1</a>
3246 <li>parse error, <a href=#parse-errors title="section 3">3</a>
3247 <li>〈percentage〉, <a href=#tokendef-percentage title="section 4">4</a>
3248 <li>〈prefix-match〉, <a href=#tokendef-prefix-match title="section 4">4</a>
3249 <li>preserved tokens, <a href=#preserved-tokens title="section 5">5</a>
3250 <li>qualified rule, <a href=#qualified-rule title="section 5">5</a>
3251 <li>reconsume the current input code point, <a href=#reconsume-the-current-input-code-point title="section 4.2">4.2</a>
3252 <li>reconsume the current input token, <a href=#reconsume-the-current-input-token title="section 5.2">5.2</a>
3253 <li><rule-list>, <a href=#typedef-rule-list title="section 7.1">7.1</a>
3254 <li>〈semicolon〉, <a href=#tokendef-semicolon title="section 4">4</a>
3255 <li><signed-integer>, <a href=#typedef-signed-integer title="section 6.2">6.2</a>
3256 <li><signless-integer>, <a href=#typedef-signless-integer title="section 6.2">6.2</a>
3257 <li>simple block, <a href=#simple-block title="section 5">5</a>
3258 <li>starts with an identifier, <a href=#check-if-three-code-points-would-start-an-identifier0 title="section 4.3.9">4.3.9</a>
3259 <li>starts with a number, <a href=#check-if-three-code-points-would-start-a-number0 title="section 4.3.10">4.3.10</a>
3260 <li>starts with a valid escape, <a href=#check-if-two-code-points-are-a-valid-escape0 title="section 4.3.8">4.3.8</a>
3261 <li>start with an identifier, <a href=#check-if-three-code-points-would-start-an-identifier0 title="section 4.3.9">4.3.9</a>
3262 <li>start with a number, <a href=#check-if-three-code-points-would-start-a-number0 title="section 4.3.10">4.3.10</a>
3263 <li>〈string〉, <a href=#tokendef-string title="section 4">4</a>
3264 <li>style rule, <a href=#style-rule title="section 8.1">8.1</a>
3265 <li><stylesheet>, <a href=#typedef-stylesheet title="section 7.1">7.1</a>
3266 <li>〈substring-match〉, <a href=#tokendef-substring-match title="section 4">4</a>
3267 <li>〈suffix-match〉, <a href=#tokendef-suffix-match title="section 4">4</a>
3268 <li>surrogate code point, <a href=#surrogate-code-point title="section 4.2">4.2</a>
3269 <li>top-level flag, <a href=#top-level-flag title="section 5.4.1">5.4.1</a>
3270 <li>〈unicode-range〉, <a href=#tokendef-unicode-range title="section 4">4</a>
3271 <li>unicode-range-end, <a href=#unicode-range-end title="section 4">4</a>
3272 <li>unicode-range-start, <a href=#unicode-range-start title="section 4">4</a>
3273 <li>uppercase letter, <a href=#uppercase-letter title="section 4.2">4.2</a>
3274 <li>〈url〉, <a href=#tokendef-url title="section 4">4</a>
3275 <li>〈whitespace〉, <a href=#tokendef-whitespace title="section 4">4</a>
3276 <li>whitespace, <a href=#whitespace title="section 4.2">4.2</a>
3277 <li>would start an identifier, <a href=#check-if-three-code-points-would-start-an-identifier0 title="section 4.3.9">4.3.9</a>
3278 <li>would start a number, <a href=#check-if-three-code-points-would-start-a-number0 title="section 4.3.10">4.3.10</a>
3279 </ul></div>
3281 <h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
3282 Property index</span><a class=self-link href=#property-index></a></h2>
3283 <div data-fill-with=property-index><p>No properties defined.</div>
3286 <h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><p class=issue>
3287 Anne says that steps 3/4 should be an input to this algorithm from the specs that define importing stylesheet,
3288 to make the algorithm as a whole cleaner.
3289 Perhaps abstract it into the concept of an "environment charset" or something?
3291 <a href=#issue-b26a56fd> ↵ </a><p class=issue>
3292 Should we only take the charset from the referring document if it’s same-origin?
3295 <a href=#issue-ab273e4b> ↵ </a><p class=issue>
3296 Should we go ahead and generalize the important flag to be a list of bang values?
3297 Suggested by Zack Weinburg.
3299 <a href=#issue-a4ffb0dd> ↵ </a><div class=issue>
3300 The following notes should probably be translated into normative text in the relevant specs,
3301 hooking this spec’s terms:
3303 <p> <ul>
3304 <li>
3305 "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" is intended to be the normal parser entry point,
3306 for parsing stylesheets.
3308 <li>
3309 "<a href=#parse-a-list-of-rules0>Parse a list of rules</a>" is intended for the content of at-rules such as <span class=css data-link-type=maybe>@media</span>.
3310 It differs from "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" in the handling of <a class=css-code data-link-type=token href=#tokendef-cdo>〈CDO〉</a> and <a class=css-code data-link-type=token href=#tokendef-cdc>〈CDC〉</a>.
3312 <li>
3313 "<a href=#parse-a-rule0>Parse a rule</a>" is intended for use by the <code>CSSStyleSheet#insertRule</code> method,
3314 and similar functions which might exist,
3315 which parse text into a single rule.
3317 <li>
3318 "<a href=#parse-a-declaration0>Parse a declaration</a>" is used in <span class=css data-link-type=maybe>@supports</span> conditions. <a data-biblio-type=informative data-link-type=biblio href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a>
3320 <li>
3321 "<a href=#parse-a-list-of-declarations0>Parse a list of declarations</a>" is for the contents of a <code>style</code> attribute,
3322 which parses text into the contents of a single style rule.
3324 <li>
3325 "<a href=#parse-a-component-value0>Parse a component value</a>" is for things that need to consume a single value,
3326 like the parsing rules for <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-values-3/#attr>attr()</a>.
3328 <li>
3329 "<a href=#parse-a-list-of-component-values0>Parse a list of component values</a>" is for the contents of presentational attributes,
3330 which parse text into a single declaration’s value,
3331 or for parsing a stand-alone selector <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a> or list of Media Queries <a data-biblio-type=informative data-link-type=biblio href=#mediaq title=MEDIAQ>[MEDIAQ]</a>,
3332 as in <a href=http://www.w3.org/TR/selectors-api/>Selectors API</a>
3333 or the <code>media</code> HTML attribute.
3334 </ul>
3335 <a href=#issue-c8316c9e> ↵ </a></div>
3337 </div>
