Mon, 12 Aug 2013 15:17:33 +0100
[css-syntax] Return U+FFFD for escaped surrogate code points.
jackalmage@8589 | 1 | <!DOCTYPE html><html lang=en><head> |
jackalmage@8600 | 2 | <meta content="text/html; charset=utf-8" http-equiv=Content-Type> |
jackalmage@8571 | 3 | <title>CSS Syntax Module Level 3</title> |
jackalmage@8600 | 4 | <link href=../default.css rel=stylesheet type=text/css> |
jackalmage@8600 | 5 | <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon> |
jackalmage@8600 | 6 | <link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css> |
jackalmage@8571 | 7 | </head> |
jackalmage@8589 | 8 | <body class=h-entry> |
jackalmage@8589 | 9 | <div class=head> |
jackalmage@8600 | 10 | <p data-fill-with=logo><a class=logo href=http://www.w3.org/> |
jackalmage@8600 | 11 | <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72> |
jackalmage@8571 | 12 | </a></p> |
jackalmage@8589 | 13 | <h1 class="p-name no-ref" id=title>CSS Syntax Module Level 3</h1> |
simon@8739 | 14 | <h2 class="no-num no-toc no-ref" id=subtitle><span class=content>Editor's Draft, |
simon@8808 | 15 | <span class=dt-updated><span class=value-title title=20130812>12 August 2013</span></span></span></h2> |
jackalmage@8600 | 16 | <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> |
jackalmage@8589 | 17 | <dt>Feedback:</dt> |
simon@8739 | 18 | <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-syntax%5D%20feedback">www-style@w3.org</a> |
simon@8739 | 19 | with subject line |
jackalmage@8589 | 20 | “<kbd>[css-syntax] <var>… message topic …</var></kbd>” |
simon@8739 | 21 | (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors: |
jackalmage@8796 | 22 | <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>)<dt>Ignored Properties:<dd>color, animation-timing-function, text-decoration</dl></div> |
jackalmage@8589 | 23 | <div data-fill-with=warning></div> |
jackalmage@8600 | 24 | <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> |
jackalmage@8571 | 25 | <hr title="Separator for header"> |
jackalmage@8571 | 26 | </div> |
jackalmage@8571 | 27 | |
simon@8739 | 28 | <h2 class="no-num no-toc no-ref" id=abstract><span class=content>Abstract</span></h2> |
jackalmage@8600 | 29 | <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. |
jackalmage@8589 | 30 | <a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents |
jackalmage@8571 | 31 | (such as HTML and XML) |
jackalmage@8571 | 32 | on screen, on paper, in speech, etc.</p> |
jackalmage@8571 | 33 | |
simon@8739 | 34 | <h2 class="no-num no-toc no-ref" id=status><span class=content>Status of this document</span></h2> |
jackalmage@8589 | 35 | <div data-fill-with=status><p> |
jackalmage@8571 | 36 | This is a public copy of the editors' draft. |
jackalmage@8571 | 37 | It is provided for discussion only and may change at any moment. |
jackalmage@8571 | 38 | Its publication here does not imply endorsement of its contents by W3C. |
jackalmage@8571 | 39 | Don't cite this document other than as work in progress. |
jackalmage@8571 | 40 | |
jackalmage@8589 | 41 | <p> |
jackalmage@8589 | 42 | The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list |
jackalmage@8571 | 43 | <a href="mailto:www-style@w3.org?Subject=%5Bcss-syntax%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a> |
jackalmage@8589 | 44 | (see <a href=http://www.w3.org/Mail/Request>instructions</a>) |
jackalmage@8571 | 45 | is preferred for discussion of this specification. |
jackalmage@8571 | 46 | When sending e-mail, |
jackalmage@8589 | 47 | please put the text “css-syntax” in the subject, |
jackalmage@8571 | 48 | preferably like this: |
jackalmage@8589 | 49 | “[css-syntax] <em>…summary of comment…</em>” |
jackalmage@8589 | 50 | |
jackalmage@8589 | 51 | <p> |
jackalmage@8589 | 52 | This document was produced by the <a href=/Style/CSS/members>CSS Working Group</a> |
jackalmage@8589 | 53 | (part of the <a href=/Style/>Style Activity</a>). |
jackalmage@8589 | 54 | |
jackalmage@8589 | 55 | <p> |
jackalmage@8571 | 56 | This document was produced by a group operating under |
jackalmage@8589 | 57 | the <a href=/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>. |
jackalmage@8598 | 58 | W3C maintains a <a href=/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a> |
jackalmage@8571 | 59 | made in connection with the deliverables of the group; |
jackalmage@8571 | 60 | that page also includes instructions for disclosing a patent. |
jackalmage@8589 | 61 | 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> |
jackalmage@8589 | 62 | must disclose the information in accordance with <a href=/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div> |
jackalmage@8589 | 63 | <div data-fill-with=at-risk></div> |
jackalmage@8589 | 64 | |
simon@8739 | 65 | <h2 class="no-num no-toc no-ref" id=contents><span class=content>Table of contents</span></h2> |
simon@8739 | 66 | <div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span> |
simon@8739 | 67 | Introduction</a><ul class=toc><li><a href=#placement><span class=secno>1.1</span> |
simon@8739 | 68 | Module interactions</a></ul><li><a href=#syntax-description><span class=secno>2</span> |
simon@8751 | 69 | Description of CSS's Syntax</a><ul class=toc><li><a href=#escaping><span class=secno>2.1</span> |
simon@8751 | 70 | Escaping</a><li><a href=#error-handling><span class=secno>2.2</span> |
simon@8739 | 71 | Error Handling</a></ul><li><a href=#tokenizing-and-parsing-css><span class=secno>3</span> |
simon@8739 | 72 | Tokenizing and Parsing CSS</a><ul class=toc><li><a href=#overview-of-the-parsing-model><span class=secno>3.1</span> |
simon@8739 | 73 | Overview of the Parsing Model</a><li><a href=#the-input-byte-stream><span class=secno>3.2</span> |
simon@8739 | 74 | The input byte stream</a><li><a href=#preprocessing-the-input-stream><span class=secno>3.3</span> |
simon@8739 | 75 | Preprocessing the input stream</a></ul><li><a href=#tokenization><span class=secno>4</span> |
simon@8739 | 76 | Tokenization</a><ul class=toc><li><a href=#token-diagrams><span class=secno>4.1</span> |
simon@8739 | 77 | Token Railroad Diagrams</a><li><a href=#definitions0><span class=secno>4.2</span> |
simon@8739 | 78 | Definitions</a><li><a href=#tokenizer-algorithms><span class=secno>4.3</span> |
simon@8739 | 79 | Tokenizer Algorithms</a><ul class=toc><li><a href=#consume-a-token><span class=secno>4.3.1</span> |
simon@8739 | 80 | Consume a token</a><li><a href=#consume-a-numeric-token><span class=secno>4.3.2</span> |
simon@8739 | 81 | Consume a numeric token</a><li><a href=#consume-an-ident-like-token><span class=secno>4.3.3</span> |
simon@8739 | 82 | Consume an ident-like token</a><li><a href=#consume-a-string-token><span class=secno>4.3.4</span> |
simon@8739 | 83 | Consume a string token</a><li><a href=#consume-a-url-token><span class=secno>4.3.5</span> |
simon@8739 | 84 | Consume a url token</a><li><a href=#consume-a-unicode-range-token><span class=secno>4.3.6</span> |
simon@8739 | 85 | Consume a unicode-range token</a><li><a href=#consume-an-escaped-character><span class=secno>4.3.7</span> |
simon@8739 | 86 | Consume an escaped character</a><li><a href=#check-if-two-characters-are-a-valid-escape><span class=secno>4.3.8</span> |
simon@8739 | 87 | Check if two characters are a valid escape</a><li><a href=#check-if-three-characters-would-start-an-identifier><span class=secno>4.3.9</span> |
simon@8739 | 88 | Check if three characters would start an identifier</a><li><a href=#check-if-three-characters-would-start-a-number><span class=secno>4.3.10</span> |
simon@8739 | 89 | Check if three characters would start a number</a><li><a href=#consume-a-name><span class=secno>4.3.11</span> |
simon@8739 | 90 | Consume a name</a><li><a href=#consume-a-number><span class=secno>4.3.12</span> |
simon@8739 | 91 | Consume a number</a><li><a href=#convert-a-string-to-a-number><span class=secno>4.3.13</span> |
simon@8739 | 92 | Convert a string to a number</a><li><a href=#consume-the-remnants-of-a-bad-url><span class=secno>4.3.14</span> |
simon@8739 | 93 | Consume the remnants of a bad url</a><li><a href=#set-the-unicode-ranges-range><span class=secno>4.3.15</span> |
simon@8739 | 94 | Set the 〈unicode-range〉’s range</a></ul></ul><li><a href=#parsing><span class=secno>5</span> |
simon@8739 | 95 | Parsing</a><ul class=toc><li><a href=#parser-diagrams><span class=secno>5.1</span> |
simon@8739 | 96 | Parser Railroad Diagrams</a><li><a href=#definitions><span class=secno>5.2</span> |
simon@8739 | 97 | Definitions</a><li><a href=#parser-entry-points><span class=secno>5.3</span> |
simon@8739 | 98 | Parser Entry Points</a><ul class=toc><li><a href=#parse-a-stylesheet><span class=secno>5.3.1</span> |
simon@8739 | 99 | Parse a stylesheet</a><li><a href=#parse-a-list-of-rules><span class=secno>5.3.2</span> |
simon@8739 | 100 | Parse a list of rules</a><li><a href=#parse-a-rule><span class=secno>5.3.3</span> |
simon@8739 | 101 | Parse a rule</a><li><a href=#parse-a-declaration><span class=secno>5.3.4</span> |
simon@8739 | 102 | Parse a declaration</a><li><a href=#parse-a-list-of-declarations><span class=secno>5.3.5</span> |
simon@8739 | 103 | Parse a list of declarations</a><li><a href=#parse-a-component-value><span class=secno>5.3.6</span> |
simon@8739 | 104 | Parse a component value</a><li><a href=#parse-a-list-of-component-values><span class=secno>5.3.7</span> |
simon@8739 | 105 | Parse a list of component values</a></ul><li><a href=#parser-algorithms><span class=secno>5.4</span> |
simon@8739 | 106 | Parser Algorithms</a><ul class=toc><li><a href=#consume-a-list-of-rules><span class=secno>5.4.1</span> |
simon@8739 | 107 | Consume a list of rules</a><li><a href=#consume-an-at-rule><span class=secno>5.4.2</span> |
simon@8739 | 108 | Consume an at-rule</a><li><a href=#consume-a-qualified-rule><span class=secno>5.4.3</span> |
simon@8739 | 109 | Consume a qualified rule</a><li><a href=#consume-a-list-of-declarations><span class=secno>5.4.4</span> |
simon@8739 | 110 | Consume a list of declarations</a><li><a href=#consume-a-declaration><span class=secno>5.4.5</span> |
simon@8739 | 111 | Consume a declaration</a><li><a href=#consume-a-component-value><span class=secno>5.4.6</span> |
simon@8739 | 112 | Consume a component value</a><li><a href=#consume-a-simple-block><span class=secno>5.4.7</span> |
simon@8739 | 113 | Consume a simple block</a><li><a href=#consume-a-function><span class=secno>5.4.8</span> |
simon@8739 | 114 | Consume a function</a></ul></ul><li><a href=#anb><span class=secno>6</span> |
simon@8739 | 115 | The <var>An+B</var> microsyntax</a><ul class=toc><li><a href=#anb-syntax><span class=secno>6.1</span> |
simon@8739 | 116 | Informal Syntax Description</a><li><a href=#the-anb-type><span class=secno>6.2</span> |
simon@8739 | 117 | The <code><an+b></code> type</a></ul><li><a href=#rule-defs><span class=secno>7</span> |
simon@8739 | 118 | Defining Grammars for Rules and Other Values</a><ul class=toc><li><a href=#declaration-rule-list><span class=secno>7.1</span> |
jackalmage@8796 | 119 | Defining Block Contents: the <span class=production data-link-type=type><var><declaration-list></var></span>, <span class=production data-link-type=type><var><rule-list></var></span>, and <span class=production data-link-type=type><var><stylesheet></var></span> productions</a></ul><li><a href=#css-stylesheets><span class=secno>8</span> |
jackalmage@8743 | 120 | CSS stylesheets</a><ul class=toc><li><a href=#style-rules><span class=secno>8.1</span> |
jackalmage@8744 | 121 | Style rules</a><li><a href=#the-charset-rule><span class=secno>8.2</span> |
jackalmage@8796 | 122 | The <span class=css data-link-type=maybe>@charset</span> Rule</a></ul><li><a href=#serialization><span class=secno>9</span> |
jackalmage@8743 | 123 | Serialization</a><ul class=toc><li><a href=#serializing-anb><span class=secno>9.1</span> |
simon@8741 | 124 | 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> |
simon@8739 | 125 | Acknowledgments</a><li><a href=#conformance><span class=secno></span> |
simon@8739 | 126 | Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span> |
simon@8739 | 127 | Document conventions</a><li><a href=#conformance-classes><span class=secno></span> |
simon@8739 | 128 | Conformance classes</a><li><a href=#partial><span class=secno></span> |
simon@8739 | 129 | Partial implementations</a><li><a href=#experimental><span class=secno></span> |
simon@8739 | 130 | Experimental implementations</a><li><a href=#testing><span class=secno></span> |
simon@8739 | 131 | Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span> |
simon@8739 | 132 | References</a><ul class=toc><li><a href=#normative><span class=secno></span> |
simon@8739 | 133 | Normative References</a><li><a href=#informative><span class=secno></span> |
simon@8739 | 134 | Informative References</a></ul><li><a href=#index><span class=secno></span> |
simon@8739 | 135 | Index</a><li><a href=#property-index><span class=secno></span> |
jackalmage@8589 | 136 | Property index</a></ul></div> |
jackalmage@8589 | 137 | |
jackalmage@8589 | 138 | |
jackalmage@8589 | 139 | |
jackalmage@8600 | 140 | <link href=railroad-diagrams.css rel=stylesheet type=text/css> |
jackalmage@8589 | 141 | |
simon@8739 | 142 | <h2 data-level=1 id=intro><span class=secno>1 </span><span class=content> |
simon@8739 | 143 | Introduction</span><a class=section-link href=#intro>§</a></h2> |
jackalmage@8571 | 144 | |
jackalmage@8572 | 145 | <p> <em>This section is not normative.</em> |
jackalmage@8572 | 146 | |
jackalmage@8589 | 147 | <p> This module defines the abstract syntax and parsing of CSS stylesheets |
jackalmage@8572 | 148 | and other things which use CSS syntax |
jackalmage@8572 | 149 | (such as the HTML <code>style</code> attribute). |
jackalmage@8572 | 150 | |
jackalmage@8589 | 151 | <p> It defines algorithms for converting a stream of codepoints |
jackalmage@8572 | 152 | (in other words, text) |
jackalmage@8572 | 153 | into a stream of CSS tokens, |
jackalmage@8572 | 154 | and then further into CSS objects |
jackalmage@8572 | 155 | such as stylesheets, rules, and declarations. |
jackalmage@8571 | 156 | |
simon@8739 | 157 | <h3 data-level=1.1 id=placement><span class=secno>1.1 </span><span class=content> |
simon@8739 | 158 | Module interactions</span><a class=section-link href=#placement>§</a></h3> |
jackalmage@8571 | 159 | |
jackalmage@8572 | 160 | <p> This module defines the syntax and parsing of CSS stylesheets. |
jackalmage@8572 | 161 | It supersedes the lexical scanner and grammar defined in CSS 2.1. |
jackalmage@8571 | 162 | |
simon@8739 | 163 | <h2 data-level=2 id=syntax-description><span class=secno>2 </span><span class=content> |
simon@8739 | 164 | Description of CSS's Syntax</span><a class=section-link href=#syntax-description>§</a></h2> |
jackalmage@8571 | 165 | |
jackalmage@8572 | 166 | <p> <em>This section is not normative.</em> |
jackalmage@8572 | 167 | |
simon@8739 | 168 | <p> A CSS document is a series of <a href=#qualified-rule>qualified rules</a>, |
jackalmage@8572 | 169 | which are usually style rules that apply CSS properties to elements, |
simon@8739 | 170 | and <a href=#at-rule>at-rules</a>, |
jackalmage@8572 | 171 | which define special processing rules or values for the CSS document. |
jackalmage@8572 | 172 | |
jackalmage@8589 | 173 | <p> A qualified rule starts with a prelude |
jackalmage@8572 | 174 | then has a {}-wrapped block containing a sequence of declarations. |
jackalmage@8598 | 175 | The meaning of the prelude varies based on the context that the rule appears in - |
jackalmage@8572 | 176 | for style rules, it's a selector which specifies what elements the declarations will apply to. |
jackalmage@8572 | 177 | Each declaration has a name, |
jackalmage@8572 | 178 | followed by a colon and the declaration value. |
jackalmage@8572 | 179 | Declarations are separated by semicolons. |
jackalmage@8571 | 180 | |
jackalmage@8589 | 181 | <div class=example> |
jackalmage@8572 | 182 | |
jackalmage@8572 | 183 | <p> A typical rule might look something like this: |
jackalmage@8572 | 184 | |
jackalmage@8589 | 185 | <pre> p > a { |
jackalmage@8572 | 186 | color: blue; |
jackalmage@8572 | 187 | text-decoration: underline; |
jackalmage@8572 | 188 | } |
jackalmage@8572 | 189 | </pre> |
jackalmage@8572 | 190 | <p> In the above rule, "<code>p > a</code>" is the selector, |
jackalmage@8572 | 191 | which, if the source document is HTML, |
jackalmage@8572 | 192 | selects any <code><a></code> elements that are children of a <code><p></code> element. |
jackalmage@8572 | 193 | |
jackalmage@8589 | 194 | <p> "<code>color: blue;</code>" is a declaration specifying that, |
jackalmage@8572 | 195 | for the elements that match the selector, |
jackalmage@8796 | 196 | their <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/colors.html#propdef-color title=color>color</a> property should have the value <span class=css data-link-type=maybe>blue</span>. |
jackalmage@8796 | 197 | Similiarly, their <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-4/#text-decoration0 title=text-decoration>text-decoration</a> property should have the value <span class=css data-link-type=maybe>underline</span>. |
jackalmage@8589 | 198 | </div> |
jackalmage@8571 | 199 | |
jackalmage@8572 | 200 | <p> At-rules are all different, but they have a basic structure in common. |
jackalmage@8572 | 201 | They start with an "@" character followed by their name. |
simon@8739 | 202 | Some <a href=#at-rule>at-rules</a> are simple statements, |
jackalmage@8572 | 203 | with their name followed by more CSS values to specify their behavior, |
jackalmage@8572 | 204 | and finally ended by a semicolon. |
jackalmage@8572 | 205 | Others are blocks; |
jackalmage@8572 | 206 | they can have CSS values following their name, |
jackalmage@8572 | 207 | but they end with a {}-wrapped block, |
simon@8739 | 208 | similar to a <a href=#qualified-rule>qualified rule</a>. |
simon@8739 | 209 | Even the contents of these blocks are specific to the given <a href=#at-rule>at-rule</a>: |
simon@8739 | 210 | sometimes they contain a sequence of declarations, like a <a href=#qualified-rule>qualified rule</a>; |
jackalmage@8572 | 211 | other times, they may contain additional blocks, or at-rules, or other structures altogether. |
jackalmage@8571 | 212 | |
jackalmage@8589 | 213 | <div class=example> |
jackalmage@8589 | 214 | |
simon@8739 | 215 | <p> Here are several examples of <a href=#at-rule>at-rules</a> that illustrate the varied syntax they may contain. |
jackalmage@8589 | 216 | |
jackalmage@8589 | 217 | <pre>@import "my-styles.css";</pre> |
jackalmage@8796 | 218 | <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. |
jackalmage@8796 | 219 | 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. |
jackalmage@8589 | 220 | |
jackalmage@8589 | 221 | <pre> @page :left { |
jackalmage@8572 | 222 | margin-left: 4cm; |
jackalmage@8572 | 223 | margin-right: 3cm; |
jackalmage@8572 | 224 | } |
jackalmage@8572 | 225 | </pre> |
jackalmage@8796 | 226 | <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), |
jackalmage@8572 | 227 | followed by a block of properties that apply to the page when printed. |
jackalmage@8572 | 228 | In this way, it's very similar to a normal style rule, |
jackalmage@8572 | 229 | except that its properties don't apply to any "element", |
jackalmage@8572 | 230 | but rather the page itself. |
jackalmage@8572 | 231 | |
jackalmage@8589 | 232 | <pre> @media print { |
jackalmage@8572 | 233 | body { font-size: 10pt } |
jackalmage@8572 | 234 | } |
jackalmage@8572 | 235 | </pre> |
jackalmage@8796 | 236 | <p> The <span class=css data-link-type=maybe>@media</span> <a href=#at-rule>at-rule</a> begins with a media type |
jackalmage@8572 | 237 | and a list of optional media queries. |
jackalmage@8572 | 238 | Its block contains entire rules, |
jackalmage@8796 | 239 | which are only applied when the <span class=css data-link-type=maybe>@media</span>s conditions are fulfilled. |
jackalmage@8589 | 240 | </div> |
jackalmage@8589 | 241 | |
simon@8739 | 242 | <p> Property names and <a href=#at-rule>at-rule</a> names are always <b>identifiers</b>, |
jackalmage@8572 | 243 | which have to start with a letter or a hyphen followed by a letter, |
jackalmage@8572 | 244 | and then can contain letters, numbers, hyphens, or underscores. |
jackalmage@8572 | 245 | You can include any character at all, |
jackalmage@8572 | 246 | even ones that CSS uses in its syntax, |
simon@8751 | 247 | by <a href=#escaping0>escaping</a> it. |
jackalmage@8572 | 248 | |
jackalmage@8589 | 249 | <p> The syntax of selectors is defined in the <a href=http://www.w3.org/TR/selectors/>Selectors spec</a>. |
jackalmage@8589 | 250 | 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>. |
simon@8739 | 251 | The special syntaxes of individual <a href=#at-rule>at-rules</a> can be found in the specs that define them. |
simon@8739 | 252 | |
simon@8751 | 253 | <h3 data-level=2.1 id=escaping><span class=secno>2.1 </span><span class=content> |
simon@8751 | 254 | Escaping</span><a class=section-link href=#escaping>§</a></h3> |
simon@8751 | 255 | |
simon@8751 | 256 | <p> <em>This section is not normative.</em> |
simon@8751 | 257 | |
simon@8751 | 258 | <p> Any Unicode character can be included in an identifier or quoted string |
jackalmage@8796 | 259 | by <dfn data-dfn-type=dfn id=escaping0>escaping</dfn> it. |
simon@8751 | 260 | CSS escape sequences start with a backslash (\), and continue with: |
simon@8751 | 261 | |
simon@8751 | 262 | <p> <ul> |
simon@8751 | 263 | <li> |
simon@8751 | 264 | Any Unicode character that is not a <a href=#hex-digit>hex digits</a> or a <a href=#newline>newline</a>. |
simon@8751 | 265 | The escape sequence is replaced by that character. |
simon@8751 | 266 | <li> |
simon@8751 | 267 | Or one to six <a href=#hex-digit>hex digits</a>, followed by an optional <a href=#whitespace>whitespace</a>. |
simon@8751 | 268 | The escape sequence is replaced by the Unicode character |
simon@8751 | 269 | whose codepoint number is given by the hexadecimal digits. |
simon@8751 | 270 | This optional whitespace allow hexadecimal escape sequences |
simon@8751 | 271 | to be followed by "real" hex digits. |
simon@8751 | 272 | |
simon@8751 | 273 | <p class=example> |
simon@8751 | 274 | An identifier with the value "&B" |
jackalmage@8796 | 275 | could be written as <span class=css data-link-type=maybe>\26 B</span> or <span class=css data-link-type=maybe>\000026B</span>. |
simon@8751 | 276 | |
simon@8751 | 277 | <p class=note> |
simon@8751 | 278 | A "real" space after the escape sequence must be doubled. |
simon@8751 | 279 | </ul> |
simon@8751 | 280 | |
simon@8751 | 281 | <h3 data-level=2.2 id=error-handling><span class=secno>2.2 </span><span class=content> |
simon@8739 | 282 | Error Handling</span><a class=section-link href=#error-handling>§</a></h3> |
jackalmage@8571 | 283 | |
jackalmage@8572 | 284 | <p> <em>This section is not normative.</em> |
jackalmage@8572 | 285 | |
jackalmage@8589 | 286 | <p> When errors occur in CSS, |
jackalmage@8572 | 287 | the parser attempts to recover gracefully, |
jackalmage@8572 | 288 | throwing away only the minimum amount of content |
jackalmage@8572 | 289 | before returning to parsing as normal. |
jackalmage@8598 | 290 | This is because errors aren't always mistakes - |
jackalmage@8572 | 291 | new syntax looks like an error to an old parser, |
jackalmage@8572 | 292 | and it's useful to be able to add new syntax to the language |
jackalmage@8572 | 293 | without worrying about stylesheets that include it being completely broken in older UAs. |
jackalmage@8572 | 294 | |
jackalmage@8589 | 295 | <p> The precise error-recovery behavior is detailed in the parser itself, |
jackalmage@8572 | 296 | but it's simple enough that a short description is fairly accurate: |
jackalmage@8571 | 297 | |
jackalmage@8589 | 298 | <p> <ul> |
jackalmage@8571 | 299 | <li> |
jackalmage@8571 | 300 | At the "top level" of a stylesheet, |
jackalmage@8589 | 301 | an 〈at-keyword〉 starts an at-rule. |
jackalmage@8571 | 302 | Anything else starts a qualified rule, |
jackalmage@8571 | 303 | and is included in the rule's prelude. |
jackalmage@8571 | 304 | This may produce an invalid selector, |
jackalmage@8589 | 305 | but that's not the concern of the CSS parser — |
jackalmage@8571 | 306 | at worst, it means the selector will match nothing. |
jackalmage@8571 | 307 | |
jackalmage@8589 | 308 | <li> |
jackalmage@8571 | 309 | Once an at-rule starts, |
jackalmage@8571 | 310 | nothing is invalid from the parser's standpoint; |
jackalmage@8571 | 311 | it's all part of the at-rule's prelude. |
jackalmage@8589 | 312 | Encountering a semicolon 〈;〉 ends the at-rule immediately, |
jackalmage@8589 | 313 | while encountering an opening curly-brace 〈{〉 starts the at-rule's body. |
jackalmage@8571 | 314 | The at-rule seeks forward, matching blocks (content surrounded by (), {}, or []) |
jackalmage@8589 | 315 | until it finds a closing curly-brace 〈}〉 that isn't matched by anything else |
jackalmage@8571 | 316 | or inside of another block. |
jackalmage@8571 | 317 | The contents of the at-rule are then interpreted according to the at-rule's own grammar. |
jackalmage@8571 | 318 | |
jackalmage@8589 | 319 | <li> |
jackalmage@8598 | 320 | Qualified rules work similarly, |
jackalmage@8571 | 321 | except that semicolons don't end them; |
jackalmage@8571 | 322 | instead, they are just taken in as part of the rule's prelude. |
jackalmage@8571 | 323 | When the first {} block is found, |
jackalmage@8571 | 324 | the contents are always interpreted as a list of declarations. |
jackalmage@8571 | 325 | |
jackalmage@8589 | 326 | <li> |
jackalmage@8571 | 327 | When interpreting a list of declarations, |
jackalmage@8571 | 328 | unknown syntax at any point causes the parser to throw away whatever declaration it's currently building, |
jackalmage@8571 | 329 | and seek forward until it finds a semicolon (or the end of the block). |
jackalmage@8571 | 330 | It then starts fresh, trying to parse a declaration again. |
jackalmage@8571 | 331 | |
jackalmage@8589 | 332 | <li> |
jackalmage@8571 | 333 | If the stylesheet ends while any rule, declaration, function, string, etc. are still open, |
jackalmage@8571 | 334 | everything is automatically closed. |
jackalmage@8571 | 335 | This doesn't make them invalid, |
jackalmage@8571 | 336 | though they may be incomplete |
jackalmage@8571 | 337 | and thus thrown away when they are verified against their grammar. |
jackalmage@8589 | 338 | </ul> |
jackalmage@8589 | 339 | |
simon@8739 | 340 | <h2 data-level=3 id=tokenizing-and-parsing-css><span class=secno>3 </span><span class=content> |
simon@8739 | 341 | Tokenizing and Parsing CSS</span><a class=section-link href=#tokenizing-and-parsing-css>§</a></h2> |
jackalmage@8571 | 342 | |
jackalmage@8572 | 343 | <p> User agents must use the parsing rules described in this specification |
jackalmage@8572 | 344 | to generate the CSSOM trees from text/css resources. |
jackalmage@8572 | 345 | Together, these rules define what is referred to as the CSS parser. |
jackalmage@8572 | 346 | |
jackalmage@8589 | 347 | <p> This specification defines the parsing rules for CSS documents, |
jackalmage@8572 | 348 | whether they are syntactically correct or not. |
jackalmage@8796 | 349 | Certain points in the parsing algorithm are said to be a <dfn data-dfn-type=dfn id=parse-errors title="parse error">parse errors</dfn>. |
jackalmage@8572 | 350 | The error handling for parse errors is well-defined: |
jackalmage@8572 | 351 | user agents must either act as described below when encountering such problems, |
jackalmage@8572 | 352 | or must abort processing at the first error that they encounter for which they do not wish to apply the rules described below. |
jackalmage@8572 | 353 | |
jackalmage@8589 | 354 | <p> Conformance checkers must report at least one parse error condition to the user |
jackalmage@8572 | 355 | if one or more parse error conditions exist in the document |
jackalmage@8572 | 356 | and must not report parse error conditions |
jackalmage@8572 | 357 | if none exist in the document. |
jackalmage@8572 | 358 | Conformance checkers may report more than one parse error condition if more than one parse error condition exists in the document. |
jackalmage@8572 | 359 | Conformance checkers are not required to recover from parse errors, |
jackalmage@8572 | 360 | but if they do, |
jackalmage@8572 | 361 | they must recover in the same way as user agents. |
jackalmage@8571 | 362 | |
simon@8739 | 363 | <h3 data-level=3.1 id=overview-of-the-parsing-model><span class=secno>3.1 </span><span class=content> |
simon@8739 | 364 | Overview of the Parsing Model</span><a class=section-link href=#overview-of-the-parsing-model>§</a></h3> |
jackalmage@8571 | 365 | |
jackalmage@8572 | 366 | <p> The input to the CSS parsing process consists of a stream of Unicode code points, |
jackalmage@8572 | 367 | which is passed through a tokenization stage followed by a tree construction stage. |
jackalmage@8572 | 368 | The output is a CSSStyleSheet object. |
jackalmage@8572 | 369 | |
jackalmage@8589 | 370 | <p class=note> Note: Implementations that do not support scripting do not have to actually create a CSSOM CSSStyleSheet object, |
jackalmage@8572 | 371 | but the CSSOM tree in such cases is still used as the model for the rest of the specification. |
jackalmage@8571 | 372 | |
simon@8739 | 373 | <h3 data-level=3.2 id=the-input-byte-stream><span class=secno>3.2 </span><span class=content> |
simon@8739 | 374 | The input byte stream</span><a class=section-link href=#the-input-byte-stream>§</a></h3> |
jackalmage@8571 | 375 | |
jackalmage@8572 | 376 | <p> When parsing a stylesheet, |
jackalmage@8572 | 377 | the stream of Unicode code points that comprises the input to the tokenization stage may be initially seen by the user agent as a stream of bytes |
jackalmage@8572 | 378 | (typically coming over the network or from the local file system). |
jackalmage@8572 | 379 | The bytes encode the actual characters according to a particular character encoding, |
jackalmage@8572 | 380 | which the user agent must use to decode the bytes into characters. |
jackalmage@8572 | 381 | |
jackalmage@8589 | 382 | <p> To decode the stream of bytes into a stream of characters, |
jackalmage@8572 | 383 | UAs must follow these steps. |
jackalmage@8572 | 384 | |
jackalmage@8796 | 385 | <p> The algorithms to <a href=http://encoding.spec.whatwg.org/#concept-encoding-get><dfn data-dfn-type=dfn id=get-an-encoding>get an encoding</dfn></a> |
jackalmage@8796 | 386 | and <a href=http://encoding.spec.whatwg.org/#decode><dfn data-dfn-type=dfn id=decode>decode</dfn></a> |
jackalmage@8589 | 387 | are defined in the <a href=http://encoding.spec.whatwg.org/>Encoding Standard</a>. |
jackalmage@8589 | 388 | |
jackalmage@8796 | 389 | <p> First, <dfn data-dfn-type=dfn id=determine-the-fallback-encoding>determine the fallback encoding</dfn>: |
jackalmage@8589 | 390 | |
jackalmage@8589 | 391 | <ol> |
jackalmage@8571 | 392 | <li> |
jackalmage@8571 | 393 | If HTTP or equivalent protocol defines an encoding (e.g. via the charset parameter of the Content-Type header), |
simon@8739 | 394 | <a href=#get-an-encoding>get an encoding</a> for the specified value. |
jackalmage@8571 | 395 | If that does not return failure, |
jackalmage@8571 | 396 | use the return value as the fallback encoding. |
jackalmage@8571 | 397 | |
jackalmage@8589 | 398 | <li> |
jackalmage@8571 | 399 | Otherwise, check the byte stream. If the first several bytes match the hex sequence |
jackalmage@8571 | 400 | |
jackalmage@8571 | 401 | <pre>40 63 68 61 72 73 65 74 20 22 (not 22)* 22 3B</pre> |
simon@8739 | 402 | <p> then <a href=#get-an-encoding>get an encoding</a> for the sequence of <code>(not 22)*</code> bytes, |
jackalmage@8571 | 403 | decoded per <code>windows-1252</code>. |
jackalmage@8571 | 404 | |
jackalmage@8589 | 405 | <p class=note> Note: Anything ASCII-compatible will do, so using <code>windows-1252</code> is fine. |
jackalmage@8589 | 406 | |
jackalmage@8589 | 407 | |
jackalmage@8589 | 408 | <p class=note> Note: The byte sequence above, |
jackalmage@8572 | 409 | when decoded as ASCII, |
jackalmage@8589 | 410 | is the string "<code>@charset "…";</code>", |
jackalmage@8589 | 411 | where the "…" is the sequence of bytes corresponding to the encoding's name. |
jackalmage@8589 | 412 | |
jackalmage@8589 | 413 | <p> If the return value was <code>utf-16</code> or <code>utf-16be</code>, |
jackalmage@8572 | 414 | use <code>utf-8</code> as the fallback encoding; |
jackalmage@8572 | 415 | if it was anything else except failure, |
jackalmage@8572 | 416 | use the return value as the fallback encoding. |
jackalmage@8572 | 417 | |
jackalmage@8589 | 418 | <p class=note> Note: This mimics HTML <code><meta></code> behavior. |
jackalmage@8589 | 419 | |
jackalmage@8589 | 420 | <li> |
simon@8739 | 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. |
jackalmage@8571 | 422 | If that does not return failure, |
jackalmage@8571 | 423 | use the return value as the fallback encoding. |
jackalmage@8571 | 424 | |
jackalmage@8589 | 425 | <li> |
jackalmage@8571 | 426 | Otherwise, if the referring style sheet or document has an encoding, |
jackalmage@8571 | 427 | use that as the fallback encoding. |
jackalmage@8571 | 428 | |
jackalmage@8589 | 429 | <li> |
jackalmage@8571 | 430 | Otherwise, use <code>utf-8</code> as the fallback encoding. |
jackalmage@8589 | 431 | </ol> |
jackalmage@8589 | 432 | |
simon@8739 | 433 | <p> Then, <a href=#decode>decode</a> the byte stream using the fallback encoding. |
simon@8739 | 434 | |
simon@8739 | 435 | <p class=note> Note: the <a href=#decode>decode</a> algorithm lets the byte order mark (BOM) take precedence, |
jackalmage@8572 | 436 | hence the usage of the term "fallback" above. |
jackalmage@8571 | 437 | |
jackalmage@8589 | 438 | <p class=issue> |
jackalmage@8571 | 439 | Anne says that steps 3/4 should be an input to this algorithm from the specs that define importing stylesheet, |
jackalmage@8571 | 440 | to make the algorithm as a whole cleaner. |
jackalmage@8571 | 441 | Perhaps abstract it into the concept of an "environment charset" or something? |
jackalmage@8571 | 442 | |
jackalmage@8589 | 443 | <p class=issue> |
jackalmage@8571 | 444 | Should we only take the charset from the referring document if it's same-origin? |
jackalmage@8571 | 445 | |
jackalmage@8571 | 446 | |
simon@8739 | 447 | <h3 data-level=3.3 id=preprocessing-the-input-stream><span class=secno>3.3 </span><span class=content> |
simon@8739 | 448 | Preprocessing the input stream</span><a class=section-link href=#preprocessing-the-input-stream>§</a></h3> |
jackalmage@8571 | 449 | |
jackalmage@8572 | 450 | <p> The input stream consists of the characters (individual unicode code-points) |
jackalmage@8572 | 451 | pushed into it as the input byte stream is decoded. |
jackalmage@8572 | 452 | |
jackalmage@8589 | 453 | <p> Before sending the input stream to the tokenizer, |
jackalmage@8572 | 454 | implementations must make the following character substitutions: |
jackalmage@8571 | 455 | |
jackalmage@8589 | 456 | <p> <ul> |
jackalmage@8571 | 457 | <li> |
jackalmage@8571 | 458 | Replace any U+000D CARRIAGE RETURN (CR) characters, |
jackalmage@8571 | 459 | U+000C FORM FEED (FF) characters, |
jackalmage@8571 | 460 | or pairs of U+000D CARRIAGE RETURN (CR) followed by U+000A LINE FEED (LF) |
jackalmage@8571 | 461 | by a single U+000A LINE FEED (LF) character. |
jackalmage@8571 | 462 | |
jackalmage@8589 | 463 | <li> |
jackalmage@8589 | 464 | Replace any U+0000 NULL characters with U+FFFD REPLACEMENT CHARACTER (�). |
jackalmage@8589 | 465 | </ul> |
jackalmage@8589 | 466 | |
jackalmage@8589 | 467 | |
simon@8739 | 468 | <h2 data-level=4 id=tokenization><span class=secno>4 </span><span class=content> |
simon@8739 | 469 | Tokenization</span><a class=section-link href=#tokenization>§</a></h2> |
jackalmage@8571 | 470 | |
jackalmage@8572 | 471 | <p> Implementations must act as if they used the following algorithms to tokenize CSS. |
jackalmage@8572 | 472 | To transform a stream of characters into a stream of tokens, |
simon@8739 | 473 | repeatedly <a href=#consume-a-token0>consume a token</a> |
jackalmage@8589 | 474 | until an 〈EOF〉 is reached, |
jackalmage@8572 | 475 | collecting the returned tokens into a stream. |
simon@8739 | 476 | Each call to the <a href=#consume-a-token0>consume a token</a> algorithm |
jackalmage@8572 | 477 | returns a single token, |
jackalmage@8572 | 478 | so it can also be used "on-demand" to tokenize a stream of characters <em>during</em> parsing, |
jackalmage@8572 | 479 | if so desired. |
jackalmage@8572 | 480 | |
jackalmage@8589 | 481 | <p> The output of the tokenization step is a stream of zero or more of the following tokens: |
jackalmage@8589 | 482 | 〈ident〉, |
jackalmage@8589 | 483 | 〈function〉, |
jackalmage@8598 | 484 | 〈at-keyword〉, |
jackalmage@8589 | 485 | 〈hash〉, |
jackalmage@8589 | 486 | 〈string〉, |
jackalmage@8589 | 487 | 〈bad-string〉, |
jackalmage@8589 | 488 | 〈url〉, |
jackalmage@8589 | 489 | 〈bad-url〉, |
jackalmage@8589 | 490 | 〈delim〉, |
jackalmage@8589 | 491 | 〈number〉, |
jackalmage@8589 | 492 | 〈percentage〉, |
jackalmage@8589 | 493 | 〈dimension〉, |
jackalmage@8589 | 494 | 〈unicode-range〉, |
jackalmage@8589 | 495 | 〈include-match〉, |
jackalmage@8589 | 496 | 〈dash-match〉, |
jackalmage@8589 | 497 | 〈prefix-match〉, |
jackalmage@8589 | 498 | 〈suffix-match〉, |
jackalmage@8589 | 499 | 〈substring-match〉, |
jackalmage@8589 | 500 | 〈column〉, |
jackalmage@8589 | 501 | 〈whitespace〉, |
jackalmage@8589 | 502 | 〈CDO〉, |
jackalmage@8589 | 503 | 〈CDC〉, |
jackalmage@8589 | 504 | 〈colon〉, |
jackalmage@8589 | 505 | 〈semicolon〉, |
jackalmage@8589 | 506 | 〈comma〉, |
jackalmage@8589 | 507 | 〈[〉, |
jackalmage@8589 | 508 | 〈]〉, |
jackalmage@8589 | 509 | 〈(〉, |
jackalmage@8589 | 510 | 〈)〉, |
jackalmage@8589 | 511 | 〈{〉, |
jackalmage@8589 | 512 | and 〈}〉. |
jackalmage@8589 | 513 | |
jackalmage@8589 | 514 | <p> <ul> |
jackalmage@8571 | 515 | <li> |
jackalmage@8589 | 516 | 〈ident〉, 〈function〉, 〈at-keyword〉, 〈hash〉, 〈string〉, and 〈url〉 tokens have a value composed of zero or more characters. |
jackalmage@8571 | 517 | Additionally, hash tokens have a type flag set to either "id" or "unrestricted". The type flag defaults to "unrestricted" if not otherwise set. |
jackalmage@8572 | 518 | |
jackalmage@8589 | 519 | <li> |
jackalmage@8589 | 520 | 〈delim〉 tokens have a value composed of a single character. |
jackalmage@8589 | 521 | |
jackalmage@8589 | 522 | <li> |
jackalmage@8589 | 523 | 〈number〉, 〈percentage〉, and 〈dimension〉 tokens have a representation composed of one or more character, and a numeric value. |
jackalmage@8589 | 524 | 〈number〉 and 〈dimension〉 tokens additionally have a type flag set to either "integer" or "number". The type flag defaults to "integer" if not otherwise set. |
jackalmage@8589 | 525 | 〈dimension〉 tokens additionally have a unit composed of one or more characters. |
jackalmage@8589 | 526 | |
jackalmage@8589 | 527 | <li> |
jackalmage@8589 | 528 | 〈unicode-range〉 tokens have a range of characters. |
jackalmage@8589 | 529 | </ul> |
jackalmage@8589 | 530 | |
jackalmage@8796 | 531 | <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>. |
jackalmage@8589 | 532 | Only hash tokens with the "id" type are valid <a href=http://www.w3.org/TR/selectors/#id-selectors>ID selectors</a>. |
jackalmage@8589 | 533 | |
jackalmage@8589 | 534 | <p class=note> Note: As a technical note, |
jackalmage@8572 | 535 | the tokenizer defined here requires only three characters of look-ahead. |
jackalmage@8572 | 536 | The tokens it produces are designed to allow Selectors to be parsed with one token of look-ahead, |
jackalmage@8572 | 537 | and additional tokens may be added in the future to maintain this invariant. |
jackalmage@8571 | 538 | |
jackalmage@8571 | 539 | |
simon@8739 | 540 | <h3 data-level=4.1 id=token-diagrams><span class=secno>4.1 </span><span class=content> |
simon@8739 | 541 | Token Railroad Diagrams</span><a class=section-link href=#token-diagrams>§</a></h3> |
jackalmage@8571 | 542 | |
jackalmage@8572 | 543 | <p> <em>This section is non-normative.</em> |
jackalmage@8572 | 544 | |
jackalmage@8589 | 545 | <p> This section presents an informative view of the tokenizer, |
jackalmage@8572 | 546 | in the form of railroad diagrams. |
jackalmage@8572 | 547 | Railroad diagrams are more compact than an explicit parser, |
jackalmage@8572 | 548 | but often easier to read than an regular expression. |
jackalmage@8572 | 549 | |
jackalmage@8589 | 550 | <p> These diagrams are <em>informative</em> and <em>incomplete</em>; |
jackalmage@8572 | 551 | they describe the grammar of "correct" tokens, |
jackalmage@8572 | 552 | but do not describe error-handling at all. |
jackalmage@8572 | 553 | They are provided solely to make it easier to get an intuitive grasp of the syntax of each token. |
jackalmage@8572 | 554 | |
jackalmage@8589 | 555 | <p> Diagrams with names between 〈〉 brackets represent tokens. |
jackalmage@8572 | 556 | The rest are productions referred to by other diagrams. |
jackalmage@8571 | 557 | |
jackalmage@8571 | 558 | <!-- |
jackalmage@7882 | 559 | The "source" of these diagrams is in ./Diagrams.src.html |
jackalmage@7882 | 560 | The generated SVG is copied here so that JavaScript is not required |
jackalmage@7882 | 561 | to view the spec. |
jackalmage@7882 | 562 | --> |
jackalmage@7882 | 563 | |
jackalmage@8589 | 564 | <dl> |
jackalmage@8589 | 565 | <dt id=comment-diagram>comment</dt> |
jackalmage@8600 | 566 | <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> |
jackalmage@8589 | 567 | |
jackalmage@8589 | 568 | <dt id=newline-diagram>newline</dt> |
jackalmage@8600 | 569 | <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> |
jackalmage@8589 | 570 | |
jackalmage@8589 | 571 | <dt id=whitespace-character-diagram>whitespace character</dt> |
jackalmage@8600 | 572 | <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> |
jackalmage@8589 | 573 | |
jackalmage@8589 | 574 | <dt id=escape-diagram>escape</dt> |
jackalmage@8600 | 575 | <dd><svg class=railroad-diagram height=122 width=521><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="M480 31h0"></path><path d="M88 31h20"></path><g><path d="M108 31h70"></path><path d="M390 31h70"></path><rect height=22 width=212 x=178 y=20></rect><text x=284 y=35>not newline or hex digit</text></g><path d="M460 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="M460 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="M460 61h0"></path><path d="M240 61h20"></path><g><path d="M260 61h180"></path></g><path d="M440 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="M440 81h0"></path><rect height=22 width=180 x=260 y=70></rect><text x=350 y=85>whitespace character</text></g><path d="M440 81a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path></g></g><path d="M460 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M 480 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd> |
jackalmage@8589 | 576 | |
jackalmage@8589 | 577 | <dt id=〈whitespace〉-diagram>〈whitespace〉</dt> |
jackalmage@8600 | 578 | <dd><svg class=railroad-diagram height=71 width=301><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="M250 31h0"></path><path d="M50 31h10"></path><g><path d="M60 31h0"></path><path d="M240 31h0"></path><rect height=22 width=180 x=60 y=20></rect><text x=150 y=35>whitespace character</text></g><path d="M240 31h10"></path><path d="M60 31a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path><g><path d="M60 51h180"></path></g><path d="M240 51a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path></g><path d="M250 31h10"></path><path d="M 260 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd> |
jackalmage@8589 | 579 | |
jackalmage@8589 | 580 | <dt id=〈ident〉-diagram>〈ident〉</dt> |
jackalmage@8600 | 581 | <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> |
jackalmage@8589 | 582 | |
jackalmage@8589 | 583 | <dt id=〈function〉-diagram>〈function〉</dt> |
jackalmage@8600 | 584 | <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> |
jackalmage@8589 | 585 | |
jackalmage@8589 | 586 | <dt id=〈at-keyword〉-diagram>〈at-keyword〉</dt> |
jackalmage@8600 | 587 | <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> |
jackalmage@8589 | 588 | |
jackalmage@8589 | 589 | <dt id=〈hash〉-diagram>〈hash〉</dt> |
jackalmage@8600 | 590 | <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> |
jackalmage@8589 | 591 | |
jackalmage@8589 | 592 | <dt id=〈string〉-diagram>〈string〉</dt> |
jackalmage@8600 | 593 | <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> |
jackalmage@8589 | 594 | |
jackalmage@8589 | 595 | <dt id=〈url〉-diagram>〈url〉</dt> |
jackalmage@8600 | 596 | <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> |
jackalmage@8589 | 597 | |
jackalmage@8589 | 598 | <dt id=url-unquoted-diagram>url-unquoted</dt> |
jackalmage@8600 | 599 | <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> |
jackalmage@8589 | 600 | |
jackalmage@8589 | 601 | <dt id=〈number〉-diagram>〈number〉</dt> |
jackalmage@8600 | 602 | <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> |
jackalmage@8589 | 603 | |
jackalmage@8589 | 604 | <dt id=〈dimension〉-diagram>〈dimension〉</dt> |
jackalmage@8600 | 605 | <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> |
jackalmage@8589 | 606 | |
jackalmage@8589 | 607 | <dt id=〈percentage〉-diagram>〈percentage〉</dt> |
jackalmage@8600 | 608 | <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> |
jackalmage@8589 | 609 | |
jackalmage@8589 | 610 | <dt id=〈unicode-range〉-diagram>〈unicode-range〉</dt> |
jackalmage@8600 | 611 | <dd><svg class=railroad-diagram height=222 width=600><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="M108 31h0"></path><path d="M40 31h20"></path><g><path d="M60 31h0"></path><path d="M88 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=60 y=20></rect><text x=74 y=35>U</text></g><path d="M88 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="M88 61h0"></path><rect height=22 rx=10 ry=10 width=28 x=60 y=50></rect><text x=74 y=65>u</text></g><path d="M88 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path></g><path d="M108 31h10"></path><g><path d="M118 31h0"></path><path d="M146 31h0"></path><rect height=22 rx=10 ry=10 width=28 x=118 y=20></rect><text x=132 y=35>+</text></g><path d="M146 31h10"></path><g><path d="M156 31h0"></path><path d="M559 31h0"></path><path d="M156 31h20"></path><g><path d="M176 31h115.5"></path><path d="M423.5 31h115.5"></path><path d="M291.5 31h10"></path><g><path d="M301.5 31h0"></path><path d="M413.5 31h0"></path><path d="M301.5 31h10"></path><g><path d="M311.5 31h0"></path><path d="M403.5 31h0"></path><rect height=22 width=92 x=311.5 y=20></rect><text x=357.5 y=35>hex digit</text></g><path d="M403.5 31h10"></path><path d="M311.5 31a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10"></path><g><path d="M311.5 61h9.5"></path><path d="M394 61h9.5"></path><text class=comment x=357.5 y=66>1-6 times</text></g><path d="M403.5 61a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10"></path></g><path d="M413.5 31h10"></path></g><path d="M539 31h20"></path><path d="M156 31a10 10 0 0 1 10 10v50a10 10 0 0 0 10 10"></path><g><path d="M176 101h0"></path><path d="M539 101h0"></path><g><path d="M176 101h0"></path><path d="M328 101h0"></path><path d="M176 101a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><g><path d="M196 81h112"></path></g><path d="M308 81a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><path d="M176 101h20"></path><g><path d="M196 101h0"></path><path d="M308 101h0"></path><path d="M196 101h10"></path><g><path d="M206 101h0"></path><path d="M298 101h0"></path><rect height=22 width=92 x=206 y=90></rect><text x=252 y=105>hex digit</text></g><path d="M298 101h10"></path><path d="M206 101a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10"></path><g><path d="M206 131h9.5"></path><path d="M288.5 131h9.5"></path><text class=comment x=252 y=136>1-5 times</text></g><path d="M298 131a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10"></path></g><path d="M308 101h20"></path></g><path d="M328 101h10"></path><g><path d="M338 101h0"></path><path d="M529 101h0"></path><path d="M338 101h10"></path><g><path d="M348 101h71.5"></path><path d="M447.5 101h71.5"></path><rect height=22 rx=10 ry=10 width=28 x=419.5 y=90></rect><text x=433.5 y=105>?</text></g><path d="M519 101h10"></path><path d="M348 101a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10"></path><g><path d="M348 131h0"></path><path d="M519 131h0"></path><text class=comment x=433.5 y=136>1 to (6 - digits) times</text></g><path d="M519 131a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10"></path></g><path d="M529 101h10"></path></g><path d="M539 101a10 10 0 0 0 10 -10v-50a10 10 0 0 1 10 -10"></path><path d="M156 31a10 10 0 0 1 10 10v110a10 10 0 0 0 10 10"></path><g><path d="M176 161h25.5"></path><path d="M513.5 161h25.5"></path><path d="M201.5 161h10"></path><g><path d="M211.5 161h0"></path><path d="M323.5 161h0"></path><path d="M211.5 161h10"></path><g><path d="M221.5 161h0"></path><path d="M313.5 161h0"></path><rect height=22 width=92 x=221.5 y=150></rect><text x=267.5 y=165>hex digit</text></g><path d="M313.5 161h10"></path><path d="M221.5 161a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10"></path><g><path d="M221.5 191h9.5"></path><path d="M304 191h9.5"></path><text class=comment x=267.5 y=196>1-6 times</text></g><path d="M313.5 191a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10"></path></g><path d="M323.5 161h10"></path><path d="M333.5 161h10"></path><g><path d="M343.5 161h0"></path><path d="M371.5 161h0"></path><rect height=22 rx=10 ry=10 width=28 x=343.5 y=150></rect><text x=357.5 y=165>-</text></g><path d="M371.5 161h10"></path><path d="M381.5 161h10"></path><g><path d="M391.5 161h0"></path><path d="M503.5 161h0"></path><path d="M391.5 161h10"></path><g><path d="M401.5 161h0"></path><path d="M493.5 161h0"></path><rect height=22 width=92 x=401.5 y=150></rect><text x=447.5 y=165>hex digit</text></g><path d="M493.5 161h10"></path><path d="M401.5 161a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10"></path><g><path d="M401.5 191h9.5"></path><path d="M484 191h9.5"></path><text class=comment x=447.5 y=196>1-6 times</text></g><path d="M493.5 191a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10"></path></g><path d="M503.5 161h10"></path></g><path d="M539 161a10 10 0 0 0 10 -10v-110a10 10 0 0 1 10 -10"></path></g><path d="M 559 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path></g></svg></dd> |
jackalmage@8589 | 612 | |
jackalmage@8589 | 613 | <dt id=〈include-match〉-diagram>〈include-match〉</dt> |
jackalmage@8600 | 614 | <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> |
jackalmage@8589 | 615 | |
jackalmage@8589 | 616 | <dt id=〈dash-match〉-diagram>〈dash-match〉</dt> |
jackalmage@8600 | 617 | <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> |
jackalmage@8589 | 618 | |
jackalmage@8589 | 619 | <dt id=〈prefix-match〉-diagram>〈prefix-match〉</dt> |
jackalmage@8600 | 620 | <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> |
jackalmage@8589 | 621 | |
jackalmage@8589 | 622 | <dt id=〈suffix-match〉-diagram>〈suffix-match〉</dt> |
jackalmage@8600 | 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> |
jackalmage@8589 | 624 | |
jackalmage@8589 | 625 | <dt id=〈substring-match〉-diagram>〈substring-match〉</dt> |
jackalmage@8600 | 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> |
jackalmage@8589 | 627 | |
jackalmage@8589 | 628 | <dt id=〈column〉-diagram>〈column〉</dt> |
jackalmage@8600 | 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> |
jackalmage@8589 | 630 | |
jackalmage@8589 | 631 | <dt id=〈CDO〉-diagram>〈CDO〉</dt> |
jackalmage@8600 | 632 | <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> |
jackalmage@8589 | 633 | |
jackalmage@8589 | 634 | <dt id=〈CDC〉-diagram>〈CDC〉</dt> |
jackalmage@8600 | 635 | <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> |
jackalmage@8571 | 636 | |
jackalmage@8571 | 637 | </dl> |
jackalmage@8571 | 638 | |
simon@8739 | 639 | <h3 data-level=4.2 id=definitions0><span class=secno>4.2 </span><span class=content> |
simon@8739 | 640 | Definitions</span><a class=section-link href=#definitions0>§</a></h3> |
jackalmage@8571 | 641 | |
jackalmage@8572 | 642 | <p> This section defines several terms used during the tokenization phase. |
jackalmage@8571 | 643 | |
jackalmage@8589 | 644 | <dl> |
jackalmage@8796 | 645 | <dt><dfn data-dfn-type=dfn id=next-input-character>next input character</dfn> |
jackalmage@8589 | 646 | <dd> |
jackalmage@8571 | 647 | The first character in the input stream that has not yet been consumed. |
jackalmage@8571 | 648 | |
jackalmage@8796 | 649 | <dt><dfn data-dfn-type=dfn id=current-input-character>current input character</dfn> |
jackalmage@8589 | 650 | <dd> |
jackalmage@8571 | 651 | The last character to have been consumed. |
jackalmage@8571 | 652 | |
jackalmage@8796 | 653 | <dt><dfn data-dfn-type=dfn id=reconsume-the-current-input-character>reconsume the current input character</dfn> |
jackalmage@8589 | 654 | <dd> |
simon@8739 | 655 | Push the <a href=#current-input-character>current input character</a> back onto the front of the input stream, |
jackalmage@8598 | 656 | so that the next time you are instructed to consume the next input character, |
simon@8739 | 657 | it will instead reconsume the <a href=#current-input-character>current input character</a>. |
simon@8739 | 658 | |
jackalmage@8796 | 659 | <dt><dfn data-dfn-type=dfn id=eof-character>EOF character</dfn> |
jackalmage@8589 | 660 | <dd> |
jackalmage@8571 | 661 | A conceptual character representing the end of the input stream. |
jackalmage@8571 | 662 | Whenever the input stream is empty, |
simon@8739 | 663 | the <a href=#next-input-character>next input character</a> is always an EOF character. |
simon@8739 | 664 | |
jackalmage@8796 | 665 | <dt><dfn data-dfn-type=dfn id=digit>digit</dfn> |
jackalmage@8589 | 666 | <dd> |
jackalmage@8571 | 667 | A character between U+0030 DIGIT ZERO (0) and U+0039 DIGIT NINE (9). |
jackalmage@8571 | 668 | |
jackalmage@8796 | 669 | <dt><dfn data-dfn-type=dfn id=hex-digit>hex digit</dfn> |
jackalmage@8589 | 670 | <dd> |
simon@8739 | 671 | A <a href=#digit>digit</a>, |
jackalmage@8571 | 672 | or a character between U+0041 LATIN CAPITAL LETTER A (A) and U+0046 LATIN CAPITAL LETTER F (F), |
jackalmage@8571 | 673 | or a character between U+0061 LATIN SMALL LETTER A (a) and U+0066 LATIN SMALL LETTER F (f). |
jackalmage@8571 | 674 | |
jackalmage@8796 | 675 | <dt><dfn data-dfn-type=dfn id=uppercase-letter>uppercase letter</dfn> |
jackalmage@8589 | 676 | <dd> |
jackalmage@8571 | 677 | A character between U+0041 LATIN CAPITAL LETTER A (A) and U+005A LATIN CAPITAL LETTER Z (Z). |
jackalmage@8571 | 678 | |
jackalmage@8796 | 679 | <dt><dfn data-dfn-type=dfn id=lowercase-letter>lowercase letter</dfn> |
jackalmage@8589 | 680 | <dd> |
jackalmage@8571 | 681 | A character between U+0061 LATIN SMALL LETTER A (a) and U+007A LATIN SMALL LETTER Z (z). |
jackalmage@8571 | 682 | |
jackalmage@8796 | 683 | <dt><dfn data-dfn-type=dfn id=letter>letter</dfn> |
jackalmage@8589 | 684 | <dd> |
simon@8739 | 685 | An <a href=#uppercase-letter>uppercase letter</a> |
simon@8739 | 686 | or a <a href=#lowercase-letter>lowercase letter</a>. |
simon@8739 | 687 | |
jackalmage@8796 | 688 | <dt><dfn data-dfn-type=dfn id=non-ascii-character>non-ASCII character</dfn> |
jackalmage@8589 | 689 | <dd> |
jackalmage@8571 | 690 | A character with a codepoint equal to or greater than U+0080 <control>. |
jackalmage@8571 | 691 | |
jackalmage@8796 | 692 | <dt><dfn data-dfn-type=dfn id=name-start-character>name-start character</dfn> |
jackalmage@8589 | 693 | <dd> |
simon@8739 | 694 | A <a href=#letter>letter</a>, |
simon@8739 | 695 | a <a href=#non-ascii-character>non-ASCII character</a>, |
jackalmage@8571 | 696 | or U+005F LOW LINE (_). |
jackalmage@8571 | 697 | |
jackalmage@8796 | 698 | <dt><dfn data-dfn-type=dfn id=name-character>name character</dfn> |
jackalmage@8589 | 699 | <dd> |
simon@8739 | 700 | A <a href=#name-start-character>name-start character</a>, |
simon@8739 | 701 | A <a href=#digit>digit</a>, |
jackalmage@8571 | 702 | or U+002D HYPHEN-MINUS (-). |
jackalmage@8571 | 703 | |
jackalmage@8796 | 704 | <dt><dfn data-dfn-type=dfn id=non-printable-character>non-printable character</dfn> |
jackalmage@8589 | 705 | <dd> |
jackalmage@8571 | 706 | A character between U+0000 NULL and U+0008 BACKSPACE, |
jackalmage@8571 | 707 | or U+000B LINE TABULATION, |
jackalmage@8571 | 708 | or a character between U+000E SHIFT OUT and U+001F INFORMATION SEPARATOR ONE, |
jackalmage@8571 | 709 | or U+007F DELETE. |
jackalmage@8571 | 710 | |
jackalmage@8796 | 711 | <dt><dfn data-dfn-type=dfn id=newline>newline</dfn> |
jackalmage@8589 | 712 | <dd> |
jackalmage@8571 | 713 | U+000A LINE FEED. |
jackalmage@8589 | 714 | <span class=note> |
jackalmage@8571 | 715 | Note that U+000D CARRIAGE RETURN and U+000C FORM FEED are not included in this definition, |
jackalmage@8589 | 716 | as they are converted to U+000A LINE FEED during <a href=#preprocessing-the-input-stream>preprocessing</a>. |
jackalmage@8571 | 717 | </span> |
jackalmage@8571 | 718 | |
jackalmage@8796 | 719 | <dt><dfn data-dfn-type=dfn id=whitespace>whitespace</dfn> |
simon@8739 | 720 | <dd>A <a href=#newline>newline</a>, U+0009 CHARACTER TABULATION, or U+0020 SPACE. |
simon@8739 | 721 | |
jackalmage@8796 | 722 | <dt><dfn data-dfn-type=dfn id=maximum-allowed-codepoint>maximum allowed codepoint</dfn> |
jackalmage@8589 | 723 | <dd>The greatest codepoint defined by Unicode. This is currently U+10FFFF. |
jackalmage@8589 | 724 | |
jackalmage@8589 | 725 | </dl> |
jackalmage@8589 | 726 | |
simon@8739 | 727 | <h3 data-level=4.3 id=tokenizer-algorithms><span class=secno>4.3 </span><span class=content> |
simon@8739 | 728 | Tokenizer Algorithms</span><a class=section-link href=#tokenizer-algorithms>§</a></h3> |
jackalmage@8571 | 729 | |
jackalmage@8572 | 730 | <p> The algorithms defined in this section transform a stream of characters into a stream of tokens. |
jackalmage@8571 | 731 | |
simon@8739 | 732 | <h4 data-level=4.3.1 id=consume-a-token><span class=secno>4.3.1 </span><span class=content> |
jackalmage@8796 | 733 | <dfn data-dfn-type=dfn id=consume-a-token0>Consume a token</dfn></span><a class=section-link href=#consume-a-token>§</a></h4> |
simon@8739 | 734 | |
simon@8739 | 735 | <p> This section describes how to <a href=#consume-a-token0>consume a token</a> from a stream of characters. |
jackalmage@8572 | 736 | It will return a single token of any type. |
jackalmage@8572 | 737 | |
simon@8739 | 738 | <p> Consume the <a href=#next-input-character>next input character</a>. |
jackalmage@8589 | 739 | |
jackalmage@8589 | 740 | <dl> |
simon@8739 | 741 | <dt><a href=#whitespace>whitespace</a> |
jackalmage@8589 | 742 | <dd> |
simon@8739 | 743 | Consume as much <a href=#whitespace>whitespace</a> as possible. |
jackalmage@8589 | 744 | Return a 〈whitespace〉. |
jackalmage@8589 | 745 | |
jackalmage@8589 | 746 | <dt>U+0022 QUOTATION MARK (") |
jackalmage@8589 | 747 | <dd> |
simon@8739 | 748 | <a href=#consume-a-string-token0>Consume a string token</a> with the ending character U+0022 QUOTATION MARK (") |
jackalmage@8571 | 749 | and return it. |
jackalmage@8571 | 750 | |
jackalmage@8589 | 751 | <dt>U+0023 NUMBER SIGN (#) |
jackalmage@8589 | 752 | <dd> |
simon@8739 | 753 | If the <a href=#next-input-character>next input character</a> is a <a href=#name-character>name character</a> |
simon@8739 | 754 | or the <a href=#next-input-character title="next input character">next two input characters</a> |
simon@8739 | 755 | <a href=#check-if-two-characters-are-a-valid-escape0>are a valid escape</a>, |
jackalmage@8571 | 756 | then: |
jackalmage@8571 | 757 | |
jackalmage@8571 | 758 | <ol> |
jackalmage@8571 | 759 | <li> |
jackalmage@8589 | 760 | Create a 〈hash〉. |
jackalmage@8589 | 761 | |
jackalmage@8589 | 762 | <li> |
simon@8739 | 763 | If the <a href=#next-input-character title="next input character">next 3 input characters</a> <a href=#check-if-three-characters-would-start-an-identifier0>would start an identifier</a>, |
jackalmage@8589 | 764 | set the 〈hash〉’s type flag to "id". |
jackalmage@8589 | 765 | |
jackalmage@8589 | 766 | <li> |
simon@8739 | 767 | <a href=#consume-a-name0>Consume a name</a>, |
jackalmage@8589 | 768 | and set the 〈hash〉’s value to the returned string. |
jackalmage@8589 | 769 | |
jackalmage@8589 | 770 | <li> |
jackalmage@8589 | 771 | Return the 〈hash〉. |
jackalmage@8589 | 772 | </ol> |
jackalmage@8571 | 773 | |
jackalmage@8572 | 774 | <p> Otherwise, |
jackalmage@8589 | 775 | return a 〈delim〉 |
simon@8739 | 776 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 777 | |
jackalmage@8589 | 778 | <dt>U+0024 DOLLAR SIGN ($) |
jackalmage@8589 | 779 | <dd> |
simon@8739 | 780 | If the <a href=#next-input-character>next input character</a> is |
jackalmage@8571 | 781 | U+003D EQUALS SIGN (=), |
jackalmage@8571 | 782 | consume it |
jackalmage@8589 | 783 | and return a 〈suffix-match〉. |
jackalmage@8571 | 784 | |
jackalmage@8572 | 785 | <p> Otherwise, |
jackalmage@8589 | 786 | emit a 〈delim〉 |
simon@8739 | 787 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 788 | |
jackalmage@8589 | 789 | <dt>U+0027 APOSTROPHE (') |
jackalmage@8589 | 790 | <dd> |
simon@8739 | 791 | <a href=#consume-a-string-token0>Consume a string token</a> with the ending character U+0027 APOSTROPHE (') |
jackalmage@8571 | 792 | and return it. |
jackalmage@8571 | 793 | |
jackalmage@8589 | 794 | <dt>U+0028 LEFT PARENTHESIS (() |
jackalmage@8589 | 795 | <dd> |
jackalmage@8589 | 796 | Return a 〈(〉. |
jackalmage@8589 | 797 | |
jackalmage@8589 | 798 | <dt>U+0029 RIGHT PARENTHESIS ()) |
jackalmage@8589 | 799 | <dd> |
jackalmage@8589 | 800 | Return a 〈)〉. |
jackalmage@8589 | 801 | |
jackalmage@8589 | 802 | <dt>U+002A ASTERISK (*) |
jackalmage@8589 | 803 | <dd> |
simon@8739 | 804 | If the <a href=#next-input-character>next input character</a> is |
jackalmage@8571 | 805 | U+003D EQUALS SIGN (=), |
jackalmage@8571 | 806 | consume it |
jackalmage@8589 | 807 | and return a 〈substring-match〉. |
jackalmage@8571 | 808 | |
jackalmage@8572 | 809 | <p> Otherwise, |
jackalmage@8589 | 810 | return a 〈delim〉 |
simon@8739 | 811 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 812 | |
jackalmage@8589 | 813 | <dt>U+002B PLUS SIGN (+) |
jackalmage@8589 | 814 | <dd> |
simon@8739 | 815 | If the input stream <a href=#check-if-three-characters-would-start-a-number0>starts with a number</a>, |
simon@8739 | 816 | <a href=#reconsume-the-current-input-character>reconsume the current input character</a>, |
simon@8739 | 817 | <a href=#consume-a-numeric-token0>consume a numeric token</a> |
jackalmage@8571 | 818 | and return it. |
jackalmage@8571 | 819 | |
jackalmage@8572 | 820 | <p> Otherwise, |
jackalmage@8589 | 821 | return a 〈delim〉 |
simon@8739 | 822 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 823 | |
jackalmage@8589 | 824 | <dt>U+002C COMMA (,) |
jackalmage@8589 | 825 | <dd> |
jackalmage@8589 | 826 | Return a 〈comma〉. |
jackalmage@8589 | 827 | |
jackalmage@8589 | 828 | <dt>U+002D HYPHEN-MINUS (-) |
jackalmage@8589 | 829 | <dd> |
simon@8739 | 830 | If the input stream <a href=#check-if-three-characters-would-start-a-number0>starts with a number</a>, |
simon@8739 | 831 | <a href=#reconsume-the-current-input-character>reconsume the current input character</a>, |
simon@8739 | 832 | <a href=#consume-a-numeric-token0>consume a numeric token</a>, |
jackalmage@8571 | 833 | and return it. |
jackalmage@8571 | 834 | |
jackalmage@8572 | 835 | <p> Otherwise, |
simon@8739 | 836 | if the input stream <a href=#check-if-three-characters-would-start-an-identifier0>starts with an identifier</a>, |
simon@8739 | 837 | <a href=#reconsume-the-current-input-character>reconsume the current input character</a>, |
simon@8739 | 838 | <a href=#consume-an-ident-like-token0>consume an ident-like token</a>, |
jackalmage@8572 | 839 | and return it. |
jackalmage@8572 | 840 | |
jackalmage@8589 | 841 | <p> Otherwise, |
simon@8739 | 842 | if the <a href=#next-input-character title="next input character">next 2 input characters</a> are |
jackalmage@8572 | 843 | U+002D HYPHEN-MINUS |
jackalmage@8572 | 844 | U+003E GREATER-THAN SIGN |
jackalmage@8572 | 845 | (->), |
jackalmage@8572 | 846 | consume them |
jackalmage@8589 | 847 | and return a 〈CDC〉. |
jackalmage@8589 | 848 | |
jackalmage@8589 | 849 | <p> Otherwise, |
jackalmage@8589 | 850 | return a 〈delim〉 |
simon@8739 | 851 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 852 | |
jackalmage@8589 | 853 | <dt>U+002E FULL STOP (.) |
jackalmage@8589 | 854 | <dd> |
simon@8739 | 855 | If the input stream <a href=#check-if-three-characters-would-start-a-number0>starts with a number</a>, |
simon@8739 | 856 | <a href=#reconsume-the-current-input-character>reconsume the current input character</a>, |
simon@8739 | 857 | <a href=#consume-a-numeric-token0>consume a numeric token</a>, |
jackalmage@8571 | 858 | and return it. |
jackalmage@8571 | 859 | |
jackalmage@8572 | 860 | <p> Otherwise, |
jackalmage@8589 | 861 | return a 〈delim〉 |
simon@8739 | 862 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 863 | |
jackalmage@8589 | 864 | <dt>U+002F SOLIDUS (/) |
jackalmage@8589 | 865 | <dd> |
simon@8739 | 866 | If the <a href=#next-input-character>next input character</a> is U+002A ASTERISK (*), |
jackalmage@8571 | 867 | consume it |
jackalmage@8571 | 868 | and all following characters up to and including |
jackalmage@8571 | 869 | the first U+002A ASTERISK (*) followed by a U+002F SOLIDUS (/), |
jackalmage@8571 | 870 | or up to an EOF character. |
simon@8739 | 871 | Then <a href=#consume-a-token0>consume a token</a> |
jackalmage@8571 | 872 | and return it. |
jackalmage@8571 | 873 | |
jackalmage@8572 | 874 | <p> Otherwise, |
jackalmage@8589 | 875 | return a 〈delim〉 |
simon@8739 | 876 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 877 | |
jackalmage@8589 | 878 | <dt>U+003A COLON (:) |
jackalmage@8589 | 879 | <dd> |
jackalmage@8589 | 880 | Return a 〈colon〉. |
jackalmage@8589 | 881 | |
jackalmage@8589 | 882 | <dt>U+003B SEMICOLON (;) |
jackalmage@8589 | 883 | <dd> |
jackalmage@8589 | 884 | Return a 〈semicolon〉. |
jackalmage@8589 | 885 | |
jackalmage@8589 | 886 | <dt>U+003C LESS-THAN SIGN (<) |
jackalmage@8589 | 887 | <dd> |
simon@8739 | 888 | If the <a href=#next-input-character title="next input character">next 3 input characters</a> are |
jackalmage@8571 | 889 | U+0021 EXCLAMATION MARK |
jackalmage@8571 | 890 | U+002D HYPHEN-MINUS |
jackalmage@8571 | 891 | U+002D HYPHEN-MINUS |
jackalmage@8571 | 892 | (!--), |
jackalmage@8571 | 893 | consume them |
jackalmage@8589 | 894 | and return a 〈CDO〉. |
jackalmage@8571 | 895 | |
jackalmage@8572 | 896 | <p> Otherwise, |
jackalmage@8589 | 897 | return a 〈delim〉 |
simon@8739 | 898 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 899 | |
jackalmage@8589 | 900 | <dt>U+0040 COMMERCIAL AT (@) |
jackalmage@8589 | 901 | <dd> |
simon@8739 | 902 | If the <a href=#next-input-character title="next input character">next 3 input characters</a> |
simon@8739 | 903 | <a href=#check-if-three-characters-would-start-an-identifier0>would start an identifier</a>, |
simon@8739 | 904 | <a href=#consume-a-name0>consume a name</a>, |
jackalmage@8589 | 905 | create an 〈at-keyword〉 with its value set to the returned value, |
jackalmage@8571 | 906 | and return it. |
jackalmage@8571 | 907 | |
jackalmage@8572 | 908 | <p> Otherwise, |
jackalmage@8589 | 909 | return a 〈delim〉 |
simon@8739 | 910 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 911 | |
jackalmage@8589 | 912 | <dt>U+005B LEFT SQUARE BRACKET ([) |
jackalmage@8589 | 913 | <dd> |
jackalmage@8589 | 914 | Return a 〈[〉. |
jackalmage@8589 | 915 | |
jackalmage@8589 | 916 | <dt>U+005C REVERSE SOLIDUS (\) |
jackalmage@8589 | 917 | <dd> |
simon@8739 | 918 | If the input stream <a href=#check-if-two-characters-are-a-valid-escape0>starts with a valid escape</a>, |
simon@8739 | 919 | <a href=#reconsume-the-current-input-character>reconsume the current input character</a>, |
simon@8739 | 920 | <a href=#consume-an-ident-like-token0>consume an ident-like token</a>, |
jackalmage@8571 | 921 | and return it. |
jackalmage@8571 | 922 | |
jackalmage@8572 | 923 | <p> Otherwise, |
simon@8739 | 924 | this is a <a href=#parse-errors>parse error</a>. |
jackalmage@8589 | 925 | Return a 〈delim〉 |
simon@8739 | 926 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 927 | |
jackalmage@8589 | 928 | <dt>U+005D RIGHT SQUARE BRACKET (]) |
jackalmage@8589 | 929 | <dd> |
jackalmage@8589 | 930 | Return a 〈]〉. |
jackalmage@8589 | 931 | |
jackalmage@8589 | 932 | <dt>U+005E CIRCUMFLEX ACCENT (^) |
jackalmage@8589 | 933 | <dd> |
simon@8739 | 934 | If the <a href=#next-input-character>next input character</a> is |
jackalmage@8571 | 935 | U+003D EQUALS SIGN (=), |
jackalmage@8571 | 936 | consume it |
jackalmage@8589 | 937 | and return a 〈prefix-match〉. |
jackalmage@8571 | 938 | |
jackalmage@8572 | 939 | <p> Otherwise, |
jackalmage@8589 | 940 | return a 〈delim〉 |
simon@8739 | 941 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 942 | |
jackalmage@8589 | 943 | <dt>U+007B LEFT CURLY BRACKET ({) |
jackalmage@8589 | 944 | <dd> |
jackalmage@8589 | 945 | Return a 〈{〉. |
jackalmage@8589 | 946 | |
jackalmage@8589 | 947 | <dt>U+007D RIGHT CURLY BRACKET (}) |
jackalmage@8589 | 948 | <dd> |
jackalmage@8589 | 949 | Return a 〈}〉. |
jackalmage@8589 | 950 | |
simon@8739 | 951 | <dt><a href=#digit>digit</a> |
jackalmage@8589 | 952 | <dd> |
simon@8739 | 953 | <a href=#consume-a-numeric-token0>Consume a numeric token</a>, |
jackalmage@8571 | 954 | and return it. |
jackalmage@8571 | 955 | |
jackalmage@8589 | 956 | <dt>U+0055 LATIN CAPITAL LETTER U (U) |
jackalmage@8589 | 957 | <dt>U+0075 LATIN SMALL LETTER U (u) |
jackalmage@8589 | 958 | <dd> |
simon@8739 | 959 | If the <a href=#next-input-character title="next input character">next 2 input character</a> are |
jackalmage@8571 | 960 | U+002B PLUS SIGN (+) |
simon@8739 | 961 | followed by a <a href=#hex-digit>hex digit</a> |
jackalmage@8571 | 962 | or U+003F QUESTION MARK (?), |
simon@8739 | 963 | consume the <a href=#next-input-character>next input character</a>. |
jackalmage@8589 | 964 | <span class=note>Note: don't consume both of them.</span> |
simon@8739 | 965 | <a href=#consume-a-unicode-range-token0>Consume a unicode-range token</a> |
jackalmage@8571 | 966 | and return it. |
jackalmage@8571 | 967 | |
jackalmage@8572 | 968 | <p> Otherwise, |
simon@8739 | 969 | <a href=#reconsume-the-current-input-character>reconsume the current input character</a>, |
simon@8739 | 970 | <a href=#consume-an-ident-like-token0>consume an ident-like token</a>, |
jackalmage@8572 | 971 | and return it. |
jackalmage@8571 | 972 | |
simon@8739 | 973 | <dt><a href=#name-start-character>name-start character</a> |
jackalmage@8589 | 974 | <dd> |
simon@8739 | 975 | <a href=#reconsume-the-current-input-character>Reconsume the current input character</a>, |
simon@8739 | 976 | <a href=#consume-an-ident-like-token0>consume an ident-like token</a>, |
jackalmage@8571 | 977 | and return it. |
jackalmage@8571 | 978 | |
jackalmage@8589 | 979 | <dt>U+007C VERTICAL LINE (|) |
jackalmage@8589 | 980 | <dd> |
simon@8739 | 981 | If the <a href=#next-input-character>next input character</a> is |
jackalmage@8571 | 982 | U+003D EQUALS SIGN (=), |
jackalmage@8571 | 983 | consume it |
jackalmage@8589 | 984 | and return a 〈dash-match〉. |
jackalmage@8571 | 985 | |
jackalmage@8572 | 986 | <p> Otherwise, |
simon@8739 | 987 | if the <a href=#next-input-character>next input character</a> is |
jackalmage@8572 | 988 | U+0073 VERTICAL LINE (|), |
jackalmage@8572 | 989 | consume it |
jackalmage@8589 | 990 | and return a 〈column〉. |
jackalmage@8589 | 991 | |
jackalmage@8589 | 992 | <p> Otherwise, |
jackalmage@8589 | 993 | return a 〈delim〉 |
simon@8739 | 994 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 995 | |
jackalmage@8589 | 996 | <dt>U+007E TILDE (~) |
jackalmage@8589 | 997 | <dd> |
simon@8739 | 998 | If the <a href=#next-input-character>next input character</a> is |
jackalmage@8571 | 999 | U+003D EQUALS SIGN (=), |
jackalmage@8571 | 1000 | consume it |
jackalmage@8589 | 1001 | and return an 〈include-match〉. |
jackalmage@8571 | 1002 | |
jackalmage@8572 | 1003 | <p> Otherwise, |
jackalmage@8589 | 1004 | return a 〈delim〉 |
simon@8739 | 1005 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 1006 | |
jackalmage@8589 | 1007 | <dt>EOF |
jackalmage@8589 | 1008 | <dd> |
jackalmage@8589 | 1009 | Return an 〈EOF〉 token. |
jackalmage@8589 | 1010 | |
jackalmage@8589 | 1011 | <dt>anything else |
jackalmage@8589 | 1012 | <dd> |
jackalmage@8589 | 1013 | Return a 〈delim〉 |
simon@8739 | 1014 | with its value set to the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 1015 | </dl> |
jackalmage@8589 | 1016 | |
jackalmage@8589 | 1017 | |
jackalmage@8589 | 1018 | |
jackalmage@8589 | 1019 | |
simon@8739 | 1020 | <h4 data-level=4.3.2 id=consume-a-numeric-token><span class=secno>4.3.2 </span><span class=content> |
jackalmage@8796 | 1021 | <dfn data-dfn-type=dfn id=consume-a-numeric-token0>Consume a numeric token</dfn></span><a class=section-link href=#consume-a-numeric-token>§</a></h4> |
simon@8739 | 1022 | |
simon@8739 | 1023 | <p> This section describes how to <a href=#consume-a-numeric-token0>consume a numeric token</a> from a stream of characters. |
jackalmage@8589 | 1024 | It returns either a 〈number〉, 〈percentage〉, or 〈dimension〉. |
jackalmage@8589 | 1025 | |
simon@8739 | 1026 | <p> <a href=#consume-a-number0>Consume a number</a>. |
simon@8739 | 1027 | |
simon@8739 | 1028 | <p> If the <a href=#next-input-character title="next input character">next 3 input characters</a> <a href=#check-if-three-characters-would-start-an-identifier0>would start an identifier</a>, |
jackalmage@8572 | 1029 | then: |
jackalmage@8572 | 1030 | |
jackalmage@8589 | 1031 | <ol> |
jackalmage@8589 | 1032 | <li>Create a 〈dimension〉 with the same representation, value, and type flag as the returned number, |
jackalmage@8572 | 1033 | and a unit set initially to the empty string. |
jackalmage@8572 | 1034 | |
simon@8739 | 1035 | <li><a href=#consume-a-name0>Consume a name</a>. |
jackalmage@8589 | 1036 | Set the 〈dimension〉’s unit to the returned value. |
jackalmage@8589 | 1037 | |
jackalmage@8589 | 1038 | <li>Return the 〈dimension〉. |
jackalmage@8589 | 1039 | </ol> |
jackalmage@8572 | 1040 | |
jackalmage@8572 | 1041 | <p> Otherwise, |
simon@8739 | 1042 | if the <a href=#next-input-character>next input character</a> is U+0025 PERCENTAGE SIGN (%), |
jackalmage@8572 | 1043 | consume it. |
jackalmage@8589 | 1044 | Create a 〈percentage〉 with the same representation and value as the returned number, |
jackalmage@8572 | 1045 | and return it. |
jackalmage@8572 | 1046 | |
jackalmage@8589 | 1047 | <p> Otherwise, |
jackalmage@8589 | 1048 | create a 〈number〉 with the same representation, value, and type flag as the returned number, |
jackalmage@8572 | 1049 | and return it. |
jackalmage@8571 | 1050 | |
jackalmage@8571 | 1051 | |
simon@8739 | 1052 | <h4 data-level=4.3.3 id=consume-an-ident-like-token><span class=secno>4.3.3 </span><span class=content> |
jackalmage@8796 | 1053 | <dfn data-dfn-type=dfn id=consume-an-ident-like-token0>Consume an ident-like token</dfn></span><a class=section-link href=#consume-an-ident-like-token>§</a></h4> |
simon@8739 | 1054 | |
simon@8739 | 1055 | <p> This section describes how to <a href=#consume-an-ident-like-token0>consume an ident-like token</a> from a stream of characters. |
jackalmage@8589 | 1056 | It returns an 〈ident〉, 〈function〉, 〈url〉, or 〈bad-url〉. |
jackalmage@8589 | 1057 | |
simon@8739 | 1058 | <p> <a href=#consume-a-name0>Consume a name</a>. |
simon@8739 | 1059 | |
simon@8739 | 1060 | <p> If the returned string's value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "url", |
simon@8739 | 1061 | and the <a href=#next-input-character>next input character</a> is U+0028 LEFT PARENTHESIS ((), |
jackalmage@8572 | 1062 | consume it. |
simon@8739 | 1063 | <a href=#consume-a-url-token0>Consume a url token</a>, |
jackalmage@8572 | 1064 | and return it. |
jackalmage@8572 | 1065 | |
jackalmage@8589 | 1066 | <p> Otherwise, |
simon@8739 | 1067 | if the <a href=#next-input-character>next input character</a> is U+0028 LEFT PARENTHESIS ((), |
jackalmage@8572 | 1068 | consume it. |
jackalmage@8589 | 1069 | Create a 〈function〉 token |
jackalmage@8572 | 1070 | with its value set to the returned string |
jackalmage@8572 | 1071 | and return it. |
jackalmage@8572 | 1072 | |
jackalmage@8589 | 1073 | <p> Otherwise, |
jackalmage@8589 | 1074 | create an 〈ident〉 token |
jackalmage@8572 | 1075 | with its value set to the returned string |
jackalmage@8572 | 1076 | and return it. |
jackalmage@8571 | 1077 | |
jackalmage@8571 | 1078 | |
simon@8739 | 1079 | <h4 data-level=4.3.4 id=consume-a-string-token><span class=secno>4.3.4 </span><span class=content> |
jackalmage@8796 | 1080 | <dfn data-dfn-type=dfn id=consume-a-string-token0>Consume a string token</dfn></span><a class=section-link href=#consume-a-string-token>§</a></h4> |
simon@8739 | 1081 | |
simon@8739 | 1082 | <p> This section describes how to <a href=#consume-a-string-token0>consume a string token</a> from a stream of characters. |
jackalmage@8589 | 1083 | It returns either a 〈string〉 or 〈bad-string〉. |
jackalmage@8589 | 1084 | |
jackalmage@8589 | 1085 | <p> This algorithm must be called with an <var>ending character</var>, |
jackalmage@8572 | 1086 | which denotes the character that ends the string. |
jackalmage@8572 | 1087 | |
jackalmage@8589 | 1088 | <p> Initially create a 〈string〉 with its value set to the empty string. |
jackalmage@8589 | 1089 | |
simon@8739 | 1090 | <p> Repeatedly consume the <a href=#next-input-character>next input character</a> from the stream: |
jackalmage@8589 | 1091 | |
jackalmage@8589 | 1092 | <dl> |
jackalmage@8571 | 1093 | <dt><var>ending character</var> |
jackalmage@8589 | 1094 | <dt>EOF |
jackalmage@8589 | 1095 | <dd> |
jackalmage@8589 | 1096 | Return the 〈string〉. |
jackalmage@8589 | 1097 | |
simon@8739 | 1098 | <dt><a href=#newline>newline</a> |
jackalmage@8589 | 1099 | <dd> |
simon@8739 | 1100 | This is a <a href=#parse-errors>parse error</a>. |
simon@8739 | 1101 | <a href=#reconsume-the-current-input-character>Reconsume the current input character</a>, |
jackalmage@8589 | 1102 | create a 〈bad-string〉, and return it. |
jackalmage@8589 | 1103 | |
jackalmage@8589 | 1104 | <dt>U+005C REVERSE SOLIDUS (\) |
jackalmage@8589 | 1105 | <dd> |
simon@8739 | 1106 | If the <a href=#next-input-character>next input character</a> is EOF, |
jackalmage@8571 | 1107 | do nothing. |
jackalmage@8571 | 1108 | |
jackalmage@8572 | 1109 | <p> Otherwise, |
simon@8739 | 1110 | if the <a href=#next-input-character>next input character</a> is a newline, |
jackalmage@8572 | 1111 | consume it. |
jackalmage@8572 | 1112 | |
jackalmage@8589 | 1113 | <p> Otherwise, |
simon@8739 | 1114 | if the stream <a href=#check-if-two-characters-are-a-valid-escape0>starts with a valid escape</a>, |
simon@8739 | 1115 | <a href=#consume-an-escaped-character0>consume an escaped character</a> |
jackalmage@8589 | 1116 | and append the returned character to the 〈string〉’s value. |
jackalmage@8589 | 1117 | |
jackalmage@8589 | 1118 | <dt>anything else |
jackalmage@8589 | 1119 | <dd> |
simon@8739 | 1120 | Append the <a href=#current-input-character>current input character</a> to the 〈string〉’s value. |
jackalmage@8589 | 1121 | </dl> |
jackalmage@8589 | 1122 | |
jackalmage@8589 | 1123 | |
simon@8739 | 1124 | <h4 data-level=4.3.5 id=consume-a-url-token><span class=secno>4.3.5 </span><span class=content> |
jackalmage@8796 | 1125 | <dfn data-dfn-type=dfn id=consume-a-url-token0>Consume a url token</dfn></span><a class=section-link href=#consume-a-url-token>§</a></h4> |
simon@8739 | 1126 | |
simon@8739 | 1127 | <p> This section describes how to <a href=#consume-a-url-token0>consume a url token</a> from a stream of characters. |
jackalmage@8589 | 1128 | It returns either a 〈url〉 or a 〈bad-url〉. |
jackalmage@8589 | 1129 | |
jackalmage@8589 | 1130 | <p class=note> Note: This algorithm assumes that the initial "url(" has already been consumed. |
jackalmage@8589 | 1131 | |
jackalmage@8589 | 1132 | <p> Execute the following steps in order: |
jackalmage@8589 | 1133 | |
jackalmage@8589 | 1134 | <ol> |
jackalmage@8571 | 1135 | <li> |
jackalmage@8589 | 1136 | Initially create a 〈url〉 with its value set to the empty string. |
jackalmage@8589 | 1137 | |
jackalmage@8589 | 1138 | <li> |
simon@8739 | 1139 | Consume as much <a href=#whitespace>whitespace</a> as possible. |
jackalmage@8589 | 1140 | |
jackalmage@8589 | 1141 | <li> |
simon@8739 | 1142 | If the <a href=#next-input-character>next input character</a> is EOF, |
jackalmage@8589 | 1143 | return the 〈url〉. |
jackalmage@8589 | 1144 | |
jackalmage@8589 | 1145 | <li> |
simon@8739 | 1146 | If the <a href=#next-input-character>next input character</a> is a U+0022 QUOTATION MARK (") or U+0027 APOSTROPHE ('), |
jackalmage@8571 | 1147 | then: |
jackalmage@8571 | 1148 | |
jackalmage@8571 | 1149 | <ol> |
jackalmage@8571 | 1150 | <li> |
simon@8739 | 1151 | <a href=#consume-a-string-token0>Consume a string token</a> with the <a href=#current-input-character>current input character</a> as the ending character. |
jackalmage@8589 | 1152 | |
jackalmage@8589 | 1153 | <li> |
jackalmage@8589 | 1154 | If a 〈bad-string〉 was returned, |
simon@8739 | 1155 | <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a>, |
jackalmage@8589 | 1156 | create a 〈bad-url〉, |
jackalmage@8571 | 1157 | and return it. |
jackalmage@8571 | 1158 | |
jackalmage@8589 | 1159 | <li> |
jackalmage@8589 | 1160 | Set the 〈url〉’s value to the returned 〈string〉’s value. |
jackalmage@8589 | 1161 | |
jackalmage@8589 | 1162 | <li> |
simon@8739 | 1163 | Consume as much <a href=#whitespace>whitespace</a> as possible. |
jackalmage@8589 | 1164 | |
jackalmage@8589 | 1165 | <li> |
simon@8739 | 1166 | If the <a href=#next-input-character>next input character</a> is U+0029 RIGHT PARENTHESIS ()) or EOF, |
jackalmage@8589 | 1167 | consume it and return the 〈url〉; |
jackalmage@8571 | 1168 | otherwise, |
simon@8739 | 1169 | <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a>, |
jackalmage@8589 | 1170 | create a 〈bad-url〉, |
jackalmage@8571 | 1171 | and return it. |
jackalmage@8589 | 1172 | </ol> |
jackalmage@8589 | 1173 | |
jackalmage@8589 | 1174 | <li> |
simon@8739 | 1175 | Repeatedly consume the <a href=#next-input-character>next input character</a> from the stream: |
jackalmage@8571 | 1176 | |
jackalmage@8571 | 1177 | <dl> |
jackalmage@8571 | 1178 | <dt>U+0029 RIGHT PARENTHESIS ()) |
jackalmage@8589 | 1179 | <dt>EOF |
jackalmage@8589 | 1180 | <dd> |
jackalmage@8589 | 1181 | Return the 〈url〉. |
jackalmage@8589 | 1182 | |
simon@8739 | 1183 | <dt><a href=#whitespace>whitespace</a> |
jackalmage@8589 | 1184 | <dd> |
simon@8739 | 1185 | Consume as much <a href=#whitespace>whitespace</a> as possible. |
simon@8739 | 1186 | If the <a href=#next-input-character>next input character</a> is U+0029 RIGHT PARENTHESIS ()) or EOF, |
jackalmage@8589 | 1187 | consume it and return the 〈url〉; |
jackalmage@8571 | 1188 | otherwise, |
simon@8739 | 1189 | <a href=#consume-the-remnants-of-a-bad-url0>consume the remnants of a bad url</a>, |
jackalmage@8589 | 1190 | create a 〈bad-url〉, |
jackalmage@8571 | 1191 | and return it. |
jackalmage@8571 | 1192 | |
jackalmage@8589 | 1193 | <dt>U+0022 QUOTATION MARK (") |
jackalmage@8589 | 1194 | <dt>U+0027 APOSTROPHE (') |
jackalmage@8589 | 1195 | <dt>U+0028 LEFT PARENTHESIS (() |
simon@8739 | 1196 | <dt><a href=#non-printable-character>non-printable character</a> |
jackalmage@8589 | 1197 | <dd> |
simon@8739 | 1198 | This is a <a href=#parse-errors>parse error</a>. |
simon@8739 | 1199 | <a href=#consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url</a>, |
jackalmage@8589 | 1200 | create a 〈bad-url〉, |
jackalmage@8571 | 1201 | and return it. |
jackalmage@8571 | 1202 | |
jackalmage@8589 | 1203 | <dt>U+005C REVERSE SOLIDUS |
jackalmage@8589 | 1204 | <dd> |
simon@8739 | 1205 | If the stream <a href=#check-if-two-characters-are-a-valid-escape0>starts with a valid escape</a>, |
simon@8739 | 1206 | <a href=#consume-an-escaped-character0>consume an escaped character</a> |
jackalmage@8589 | 1207 | and append the returned character to the 〈url〉’s value. |
jackalmage@8571 | 1208 | |
jackalmage@8572 | 1209 | <p> Otherwise, |
simon@8739 | 1210 | this is a <a href=#parse-errors>parse error</a>. |
simon@8739 | 1211 | <a href=#consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url</a>, |
jackalmage@8589 | 1212 | create a 〈bad-url〉, |
jackalmage@8572 | 1213 | and return it. |
jackalmage@8571 | 1214 | |
jackalmage@8589 | 1215 | <dt>anything else |
jackalmage@8589 | 1216 | <dd> |
simon@8739 | 1217 | Append the <a href=#current-input-character>current input character</a> |
jackalmage@8589 | 1218 | to the 〈url〉’s value. |
jackalmage@8589 | 1219 | </dl> |
jackalmage@8589 | 1220 | </ol> |
jackalmage@8589 | 1221 | |
jackalmage@8589 | 1222 | |
simon@8739 | 1223 | <h4 data-level=4.3.6 id=consume-a-unicode-range-token><span class=secno>4.3.6 </span><span class=content> |
jackalmage@8796 | 1224 | <dfn data-dfn-type=dfn id=consume-a-unicode-range-token0>Consume a unicode-range token</dfn></span><a class=section-link href=#consume-a-unicode-range-token>§</a></h4> |
simon@8739 | 1225 | |
simon@8739 | 1226 | <p> This section describes how to <a href=#consume-a-unicode-range-token0>consume a unicode-range token</a>. |
jackalmage@8589 | 1227 | It returns a 〈unicode-range〉 token. |
jackalmage@8589 | 1228 | |
jackalmage@8589 | 1229 | <p class=note> Note: This algorithm assumes that the initial "u+" has been consumed, |
simon@8739 | 1230 | and the next character verified to be a <a href=#hex-digit>hex digit</a> or a "?". |
jackalmage@8589 | 1231 | |
jackalmage@8589 | 1232 | <p> Execute the following steps in order: |
jackalmage@8589 | 1233 | |
jackalmage@8589 | 1234 | <ol> |
jackalmage@8571 | 1235 | <li> |
jackalmage@8589 | 1236 | Create a new 〈unicode-range〉 |
jackalmage@8571 | 1237 | with an empty range. |
jackalmage@8571 | 1238 | |
jackalmage@8589 | 1239 | <li> |
simon@8739 | 1240 | Consume as many <a href=#hex-digit>hex digits</a> as possible, but no more than 6. |
simon@8739 | 1241 | If less than 6 <a href=#hex-digit>hex digits</a> were consumed, |
jackalmage@8571 | 1242 | consume as many U+003F QUESTION MARK (?) characters as possible, |
simon@8739 | 1243 | but no more than enough to make the total of <a href=#hex-digit>hex digits</a> and U+003F QUESTION MARK (?) characters equal to 6. |
jackalmage@8571 | 1244 | |
jackalmage@8572 | 1245 | <p> If any U+003F QUESTION MARK (?) characters were consumed, |
jackalmage@8572 | 1246 | then: |
jackalmage@8571 | 1247 | |
jackalmage@8589 | 1248 | <ol> |
jackalmage@8571 | 1249 | <li> |
jackalmage@8571 | 1250 | Interpret the consumed characters as a hexadecimal number, |
jackalmage@8571 | 1251 | with the U+003F QUESTION MARK (?) characters replaced by U+0030 DIGIT ZERO (0) characters. |
simon@8739 | 1252 | This is the <a href=#start-of-the-range>start of the range</a>. |
jackalmage@8589 | 1253 | |
jackalmage@8589 | 1254 | <li> |
jackalmage@8571 | 1255 | Interpret the consumed characters as a hexadecimal number again, |
jackalmage@8571 | 1256 | with the U+003F QUESTION MARK (?) character replaced by U+0046 LATIN CAPITAL LETTER F (F) characters. |
simon@8739 | 1257 | This is the <a href=#end-of-the-range>end of the range</a>. |
jackalmage@8589 | 1258 | |
jackalmage@8589 | 1259 | <li> |
simon@8739 | 1260 | <a href=#set-the-unicode-ranges-range0>Set the 〈unicode-range〉’s range</a>, then return it. |
jackalmage@8589 | 1261 | </ol> |
jackalmage@8571 | 1262 | |
jackalmage@8572 | 1263 | <p> Otherwise, |
jackalmage@8572 | 1264 | interpret the digits as a hexadecimal number. |
simon@8739 | 1265 | This is the <a href=#start-of-the-range>start of the range</a>. |
jackalmage@8589 | 1266 | |
jackalmage@8589 | 1267 | <li> |
simon@8739 | 1268 | If the <a href=#next-input-character title="next input character">next 2 input character</a> are |
simon@8739 | 1269 | U+002D HYPHEN-MINUS (-) followed by a <a href=#hex-digit>hex digit</a>, |
jackalmage@8571 | 1270 | then: |
jackalmage@8571 | 1271 | |
jackalmage@8571 | 1272 | <ol> |
simon@8739 | 1273 | <li>Consume the <a href=#next-input-character>next input character</a>. |
jackalmage@8589 | 1274 | |
jackalmage@8589 | 1275 | <li> |
simon@8739 | 1276 | Consume as many <a href=#hex-digit>hex digits</a> as possible, but no more than 6. |
jackalmage@8571 | 1277 | Interpret the digits as a hexadecimal number. |
simon@8739 | 1278 | This is the <a href=#end-of-the-range>end of the range</a>. |
simon@8739 | 1279 | <a href=#set-the-unicode-ranges-range0>Set the 〈unicode-range〉’s range</a>, then return it. |
jackalmage@8589 | 1280 | </ol> |
jackalmage@8589 | 1281 | |
jackalmage@8589 | 1282 | <li> |
simon@8739 | 1283 | <a href=#set-the-unicode-ranges-range0>Set the 〈unicode-range〉’s range</a> |
jackalmage@8571 | 1284 | and return it. |
jackalmage@8589 | 1285 | </ol> |
jackalmage@8589 | 1286 | |
jackalmage@8589 | 1287 | |
simon@8739 | 1288 | <h4 data-level=4.3.7 id=consume-an-escaped-character><span class=secno>4.3.7 </span><span class=content> |
jackalmage@8796 | 1289 | <dfn data-dfn-type=dfn id=consume-an-escaped-character0>Consume an escaped character</dfn></span><a class=section-link href=#consume-an-escaped-character>§</a></h4> |
simon@8739 | 1290 | |
simon@8739 | 1291 | <p> This section describes how to <a href=#consume-an-escaped-character0>consume an escaped character</a>. |
jackalmage@8572 | 1292 | It assumes that the U+005C REVERSE SOLIDUS (\) has already been consumed |
jackalmage@8572 | 1293 | and that the next input character has already been verified |
simon@8739 | 1294 | to not be a <a href=#newline>newline</a> or EOF. |
jackalmage@8572 | 1295 | It will return a character. |
jackalmage@8572 | 1296 | |
simon@8739 | 1297 | <p> Consume the <a href=#next-input-character>next input character</a>. |
jackalmage@8589 | 1298 | |
jackalmage@8589 | 1299 | <dl> |
simon@8739 | 1300 | <dt><a href=#hex-digit>hex digit</a> |
jackalmage@8589 | 1301 | <dd> |
simon@8739 | 1302 | Consume as many <a href=#hex-digit>hex digits</a> as possible, but no more than 5. |
jackalmage@8589 | 1303 | <span class=note>Note that this means 1-6 hex digits have been consumed in total.</span> |
simon@8739 | 1304 | If the <a href=#next-input-character>next input character</a> is |
simon@8739 | 1305 | <a href=#whitespace>whitespace</a>, |
jackalmage@8571 | 1306 | consume it as well. |
simon@8739 | 1307 | Interpret the <a href=#hex-digit>hex digits</a> as a hexadecimal number. |
jackalmage@8571 | 1308 | If this number is zero, |
simon@8808 | 1309 | or is between U+D800 and U+DFFF included, |
simon@8739 | 1310 | or is greater than the <a href=#maximum-allowed-codepoint>maximum allowed codepoint</a>, |
jackalmage@8589 | 1311 | return U+FFFD REPLACEMENT CHARACTER (�). |
jackalmage@8571 | 1312 | Otherwise, return the character with that codepoint. |
jackalmage@8571 | 1313 | |
simon@8808 | 1314 | <p class=note> |
simon@8808 | 1315 | U+D800 to U+DFFF are the |
simon@8808 | 1316 | <a href=http://www.unicode.org/glossary/#surrogate_code_point>surrogate code points</a>. |
simon@8808 | 1317 | |
jackalmage@8589 | 1318 | <dt>EOF character |
jackalmage@8589 | 1319 | <dd> |
jackalmage@8589 | 1320 | Return U+FFFD REPLACEMENT CHARACTER (�). |
jackalmage@8589 | 1321 | |
jackalmage@8589 | 1322 | <dt>anything else |
jackalmage@8589 | 1323 | <dd> |
simon@8739 | 1324 | Return the <a href=#current-input-character>current input character</a>. |
jackalmage@8589 | 1325 | </dl> |
jackalmage@8589 | 1326 | |
jackalmage@8589 | 1327 | |
simon@8739 | 1328 | <h4 data-level=4.3.8 id=check-if-two-characters-are-a-valid-escape><span class=secno>4.3.8 </span><span class=content> |
jackalmage@8796 | 1329 | <dfn data-dfn-type=dfn id=check-if-two-characters-are-a-valid-escape0 title="check if two characters are a valid escape|are a valid escape|starts with a valid escape">Check if two characters are a valid escape</dfn></span><a class=section-link href=#check-if-two-characters-are-a-valid-escape>§</a></h4> |
simon@8739 | 1330 | |
simon@8739 | 1331 | <p> This section describes how to <a href=#check-if-two-characters-are-a-valid-escape0>check if two characters are a valid escape</a>. |
jackalmage@8572 | 1332 | The algorithm described here can be called explicitly with two characters, |
jackalmage@8572 | 1333 | or can be called with the input stream itself. |
jackalmage@8598 | 1334 | In the latter case, the two characters in question are |
simon@8739 | 1335 | the <a href=#current-input-character>current input character</a> |
simon@8739 | 1336 | and the <a href=#next-input-character>next input character</a>, |
jackalmage@8572 | 1337 | in that order. |
jackalmage@8572 | 1338 | |
jackalmage@8589 | 1339 | <p class=note> Note: This algorithm will not consume any additional characters. |
jackalmage@8589 | 1340 | |
jackalmage@8589 | 1341 | <p> If the first character is not U+005D REVERSE SOLIDUS (\), |
jackalmage@8572 | 1342 | return false. |
jackalmage@8572 | 1343 | |
jackalmage@8589 | 1344 | <p> Otherwise, |
simon@8739 | 1345 | if the second character is a <a href=#newline>newline</a>, |
jackalmage@8572 | 1346 | return false. |
jackalmage@8572 | 1347 | |
jackalmage@8589 | 1348 | <p> Otherwise, return true. |
jackalmage@8589 | 1349 | |
jackalmage@8589 | 1350 | |
simon@8739 | 1351 | <h4 data-level=4.3.9 id=check-if-three-characters-would-start-an-identifier><span class=secno>4.3.9 </span><span class=content> |
jackalmage@8796 | 1352 | <dfn data-dfn-type=dfn id=check-if-three-characters-would-start-an-identifier0 title="check if three characters would start an identifier|starts with an identifier|start with an identifier|would start an identifier">Check if three characters would start an identifier</dfn></span><a class=section-link href=#check-if-three-characters-would-start-an-identifier>§</a></h4> |
simon@8739 | 1353 | |
simon@8739 | 1354 | <p> This section describes how to <a href=#check-if-three-characters-would-start-an-identifier0>check if three characters would start an identifier</a>. |
jackalmage@8572 | 1355 | The algorithm described here can be called explicitly with three characters, |
jackalmage@8572 | 1356 | or can be called with the input stream itself. |
jackalmage@8572 | 1357 | In the latter case, the three characters in question are |
simon@8739 | 1358 | the <a href=#current-input-character>current input character</a> |
simon@8739 | 1359 | and the <a href=#next-input-character title="next input character">next two input characters</a>, |
jackalmage@8572 | 1360 | in that order. |
jackalmage@8572 | 1361 | |
jackalmage@8589 | 1362 | <p class=note> Note: This algorithm will not consume any additional characters. |
jackalmage@8589 | 1363 | |
jackalmage@8589 | 1364 | <p> Look at the first character: |
jackalmage@8589 | 1365 | |
jackalmage@8589 | 1366 | <dl> |
jackalmage@8571 | 1367 | <dt>U+002D HYPHEN-MINUS |
jackalmage@8589 | 1368 | <dd> |
simon@8739 | 1369 | If the second character is a <a href=#name-start-character>name-start character</a> |
simon@8739 | 1370 | or the second and third characters <a href=#check-if-two-characters-are-a-valid-escape0>are a valid escape</a>, |
jackalmage@8571 | 1371 | return true. |
jackalmage@8571 | 1372 | Otherwise, return false. |
jackalmage@8571 | 1373 | |
simon@8739 | 1374 | <dt><a href=#name-start-character>name-start character</a> |
jackalmage@8589 | 1375 | <dd> |
jackalmage@8571 | 1376 | Return true. |
jackalmage@8571 | 1377 | |
jackalmage@8589 | 1378 | <dt>U+005C REVERSE SOLIDUS (\) |
jackalmage@8589 | 1379 | <dd> |
simon@8739 | 1380 | If the first and second characters <a href=#check-if-two-characters-are-a-valid-escape0>are a valid escape</a>, |
jackalmage@8571 | 1381 | return true. |
jackalmage@8571 | 1382 | Otherwise, return false. |
jackalmage@8589 | 1383 | </dl> |
jackalmage@8589 | 1384 | |
simon@8739 | 1385 | <h4 data-level=4.3.10 id=check-if-three-characters-would-start-a-number><span class=secno>4.3.10 </span><span class=content> |
jackalmage@8796 | 1386 | <dfn data-dfn-type=dfn id=check-if-three-characters-would-start-a-number0 title="check if three characters would start a number|starts with a number|start with a number|would start a number">Check if three characters would start a number</dfn></span><a class=section-link href=#check-if-three-characters-would-start-a-number>§</a></h4> |
simon@8739 | 1387 | |
simon@8739 | 1388 | <p> This section describes how to <a href=#check-if-three-characters-would-start-a-number0>check if three characters would start a number</a>. |
jackalmage@8572 | 1389 | The algorithm described here can be called explicitly with three characters, |
jackalmage@8572 | 1390 | or can be called with the input stream itself. |
jackalmage@8572 | 1391 | In the latter case, the three characters in question are |
simon@8739 | 1392 | the <a href=#current-input-character>current input character</a> |
simon@8739 | 1393 | and the <a href=#next-input-character title="next input character">next two input characters</a>, |
jackalmage@8572 | 1394 | in that order. |
jackalmage@8572 | 1395 | |
jackalmage@8589 | 1396 | <p class=note> Note: This algorithm will not consume any additional characters. |
jackalmage@8589 | 1397 | |
jackalmage@8589 | 1398 | <p> Look at the first character: |
jackalmage@8589 | 1399 | |
jackalmage@8589 | 1400 | <dl> |
jackalmage@8571 | 1401 | <dt>U+002B PLUS SIGN (+) |
jackalmage@8589 | 1402 | <dt>U+002D HYPHEN-MINUS (-) |
jackalmage@8589 | 1403 | <dd> |
jackalmage@8571 | 1404 | If the second character |
simon@8739 | 1405 | is a <a href=#digit>digit</a>, |
jackalmage@8571 | 1406 | return true. |
jackalmage@8571 | 1407 | |
jackalmage@8572 | 1408 | <p> Otherwise, |
jackalmage@8572 | 1409 | if the second character |
jackalmage@8572 | 1410 | is a U+002E FULL STOP (.) |
jackalmage@8572 | 1411 | and the third character |
simon@8739 | 1412 | is a <a href=#digit>digit</a>, |
jackalmage@8572 | 1413 | return true. |
jackalmage@8572 | 1414 | |
jackalmage@8589 | 1415 | <p> Otherwise, return false. |
jackalmage@8589 | 1416 | |
jackalmage@8589 | 1417 | <dt>U+002E FULL STOP (.) |
jackalmage@8589 | 1418 | <dd> |
jackalmage@8571 | 1419 | If the second character |
simon@8739 | 1420 | is a <a href=#digit>digit</a>, |
jackalmage@8571 | 1421 | return true. |
jackalmage@8571 | 1422 | Otherwise, return false. |
jackalmage@8571 | 1423 | |
simon@8739 | 1424 | <dt><a href=#digit>digit</a> |
jackalmage@8589 | 1425 | <dd> |
jackalmage@8571 | 1426 | Return true. |
jackalmage@8571 | 1427 | |
jackalmage@8589 | 1428 | <dt>anything else |
jackalmage@8589 | 1429 | <dd> |
jackalmage@8571 | 1430 | Return false. |
jackalmage@8589 | 1431 | </dl> |
jackalmage@8589 | 1432 | |
jackalmage@8589 | 1433 | |
simon@8739 | 1434 | <h4 data-level=4.3.11 id=consume-a-name><span class=secno>4.3.11 </span><span class=content> |
jackalmage@8796 | 1435 | <dfn data-dfn-type=dfn id=consume-a-name0>Consume a name</dfn></span><a class=section-link href=#consume-a-name>§</a></h4> |
simon@8739 | 1436 | |
simon@8739 | 1437 | <p> This section describes how to <a href=#consume-a-name0>consume a name</a> from a stream of characters. |
jackalmage@8572 | 1438 | It returns a string containing |
jackalmage@8572 | 1439 | the largest name that can be formed from adjacent characters in the stream, starting from the first. |
jackalmage@8572 | 1440 | |
jackalmage@8589 | 1441 | <p class=note> Note: This algorithm does not do the verification of the first few characters |
jackalmage@8589 | 1442 | that are necessary to ensure the returned characters would constitute an 〈ident〉. |
jackalmage@8572 | 1443 | If that is the intended use, |
simon@8739 | 1444 | ensure that the stream <a href=#check-if-three-characters-would-start-an-identifier0>starts with an identifier</a> |
jackalmage@8572 | 1445 | before calling this algorithm. |
jackalmage@8572 | 1446 | |
jackalmage@8589 | 1447 | <p> Let <var>result</var> initially be an empty string. |
jackalmage@8589 | 1448 | |
simon@8739 | 1449 | <p> Repeatedly consume the <a href=#next-input-character>next input character</a> from the stream: |
jackalmage@8589 | 1450 | |
jackalmage@8589 | 1451 | <dl> |
simon@8739 | 1452 | <dt><a href=#name-character>name character</a> |
jackalmage@8589 | 1453 | <dd> |
jackalmage@8571 | 1454 | Append the character to <var>result</var>. |
jackalmage@8571 | 1455 | |
simon@8739 | 1456 | <dt>the stream <a href=#check-if-two-characters-are-a-valid-escape0>starts with a valid escape</a> |
jackalmage@8589 | 1457 | <dd> |
simon@8739 | 1458 | <a href=#consume-an-escaped-character0>Consume an escaped character</a>. |
jackalmage@8571 | 1459 | Append the returned character to <var>result</var>. |
jackalmage@8571 | 1460 | |
jackalmage@8589 | 1461 | <dt>anything else |
jackalmage@8589 | 1462 | <dd> |
jackalmage@8571 | 1463 | Return <var>result</var>. |
jackalmage@8589 | 1464 | </dl> |
jackalmage@8589 | 1465 | |
jackalmage@8589 | 1466 | |
simon@8739 | 1467 | <h4 data-level=4.3.12 id=consume-a-number><span class=secno>4.3.12 </span><span class=content> |
jackalmage@8796 | 1468 | <dfn data-dfn-type=dfn id=consume-a-number0>Consume a number</dfn></span><a class=section-link href=#consume-a-number>§</a></h4> |
simon@8739 | 1469 | |
simon@8739 | 1470 | <p> This section describes how to <a href=#consume-a-number0>consume a number</a> from a stream of characters. |
jackalmage@8572 | 1471 | It returns a 3-tuple of |
jackalmage@8572 | 1472 | a string representation, |
jackalmage@8572 | 1473 | a numeric value, |
jackalmage@8572 | 1474 | and a type flag which is either "integer" or "number". |
jackalmage@8572 | 1475 | |
jackalmage@8589 | 1476 | <p class=note> Note: This algorithm does not do the verification of the first few characters |
jackalmage@8572 | 1477 | that are necessary to ensure a number can be obtained from the stream. |
simon@8739 | 1478 | Ensure that the stream <a href=#check-if-three-characters-would-start-a-number0>starts with a number</a> |
jackalmage@8572 | 1479 | before calling this algorithm. |
jackalmage@8572 | 1480 | |
jackalmage@8589 | 1481 | <p> Execute the following steps in order: |
jackalmage@8589 | 1482 | |
jackalmage@8589 | 1483 | <ol> |
jackalmage@8571 | 1484 | <li> |
jackalmage@8571 | 1485 | Initially set <var>repr</var> to the empty string |
jackalmage@8571 | 1486 | and <var>type</var> to "integer". |
jackalmage@8571 | 1487 | |
jackalmage@8589 | 1488 | <li> |
simon@8739 | 1489 | If the <a href=#next-input-character>next input character</a> is U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-), |
jackalmage@8571 | 1490 | consume it and append it to <var>repr</var>. |
jackalmage@8571 | 1491 | |
jackalmage@8589 | 1492 | <li> |
simon@8739 | 1493 | While the <a href=#next-input-character>next input character</a> is a <a href=#digit>digit</a>, |
jackalmage@8571 | 1494 | consume it and append it to <var>repr</var>. |
jackalmage@8571 | 1495 | |
jackalmage@8589 | 1496 | <li> |
simon@8739 | 1497 | If the <a href=#next-input-character title="next input character">next 2 input characters</a> are |
simon@8739 | 1498 | U+002E FULL STOP (.) followed by a <a href=#digit>digit</a>, |
jackalmage@8571 | 1499 | then: |
jackalmage@8571 | 1500 | |
jackalmage@8571 | 1501 | <ol> |
jackalmage@8571 | 1502 | <li>Consume them. |
jackalmage@8589 | 1503 | <li>Append them to <var>repr</var>. |
jackalmage@8589 | 1504 | <li>Set <var>type</var> to "number". |
simon@8739 | 1505 | <li>While the <a href=#next-input-character>next input character</a> is a <a href=#digit>digit</a>, consume it and append it to <var>repr</var>. |
jackalmage@8589 | 1506 | </ol> |
jackalmage@8589 | 1507 | |
jackalmage@8589 | 1508 | <li> |
simon@8739 | 1509 | If the <a href=#next-input-character title="next input character">next 2 or 3 input characters</a> are |
simon@8602 | 1510 | U+0045 LATIN CAPITAL LETTER E (E) or U+0065 LATIN SMALL LETTER E (e), |
simon@8602 | 1511 | optionally followed by U+002D HYPHEN-MINUS (-) or U+002B PLUS SIGN (+), |
simon@8739 | 1512 | followed by a <a href=#digit>digit</a>, |
jackalmage@8571 | 1513 | then: |
jackalmage@8571 | 1514 | |
jackalmage@8571 | 1515 | <ol> |
jackalmage@8571 | 1516 | <li>Consume them. |
jackalmage@8589 | 1517 | <li>Append them to <var>repr</var>. |
jackalmage@8589 | 1518 | <li>Set <var>type</var> to "number". |
simon@8739 | 1519 | <li>While the <a href=#next-input-character>next input character</a> is a <a href=#digit>digit</a>, consume it and append it to <var>repr</var>. |
jackalmage@8589 | 1520 | </ol> |
jackalmage@8589 | 1521 | |
jackalmage@8589 | 1522 | <li> |
simon@8739 | 1523 | <a href=#convert-a-string-to-a-number0 title="convert a string to a number">Convert <var>repr</var> to a number</a>, |
jackalmage@8571 | 1524 | and set the <var>value</var> to the returned value. |
jackalmage@8571 | 1525 | |
jackalmage@8589 | 1526 | <li> |
jackalmage@8571 | 1527 | Return a 3-tuple of <var>repr</var>, <var>value</var>, and <var>type</var>. |
jackalmage@8589 | 1528 | </ol> |
jackalmage@8589 | 1529 | |
jackalmage@8589 | 1530 | |
simon@8739 | 1531 | <h4 data-level=4.3.13 id=convert-a-string-to-a-number><span class=secno>4.3.13 </span><span class=content> |
jackalmage@8796 | 1532 | <dfn data-dfn-type=dfn id=convert-a-string-to-a-number0>Convert a string to a number</dfn></span><a class=section-link href=#convert-a-string-to-a-number>§</a></h4> |
simon@8739 | 1533 | |
simon@8739 | 1534 | <p> This section describes how to <a href=#convert-a-string-to-a-number0>convert a string to a number</a>. |
jackalmage@8572 | 1535 | It returns a number. |
jackalmage@8572 | 1536 | |
jackalmage@8589 | 1537 | <p class=note> Note: This algorithm does not do any verification to ensure that the string contains only a number. |
jackalmage@8572 | 1538 | Ensure that the string contains only a valid CSS number |
jackalmage@8572 | 1539 | before calling this algorithm. |
jackalmage@8572 | 1540 | |
jackalmage@8589 | 1541 | <p> Divide the string into seven components, |
jackalmage@8572 | 1542 | in order from left to right: |
jackalmage@8571 | 1543 | |
jackalmage@8589 | 1544 | <ol> |
jackalmage@8598 | 1545 | <li>A <b>sign</b>: |
jackalmage@8571 | 1546 | a single U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-), |
jackalmage@8571 | 1547 | or the empty string. |
jackalmage@8571 | 1548 | Let <var>s</var> be the number -1 if the sign is U+002D HYPHEN-MINUS (-); |
jackalmage@8571 | 1549 | otherwise, let <var>s</var> be the number 1. |
jackalmage@8571 | 1550 | |
jackalmage@8589 | 1551 | <li>An <b>integer part</b>: |
simon@8739 | 1552 | zero or more <a href=#digit>digits</a>. |
jackalmage@8571 | 1553 | If there is at least one digit, |
jackalmage@8571 | 1554 | let <var>i</var> be the number formed by interpreting the digits as a base-10 integer; |
jackalmage@8571 | 1555 | otherwise, let <var>i</var> be the number 0. |
jackalmage@8571 | 1556 | |
jackalmage@8589 | 1557 | <li>A <b>decimal point</b>: |
jackalmage@8571 | 1558 | a single U+002E FULL STOP (.), |
jackalmage@8571 | 1559 | or the empty string. |
jackalmage@8571 | 1560 | |
jackalmage@8589 | 1561 | <li>A <b>fractional part</b>: |
simon@8739 | 1562 | zero or more <a href=#digit>digits</a>. |
jackalmage@8571 | 1563 | If there is at least one digit, |
jackalmage@8571 | 1564 | let <var>f</var> be the number formed by interpreting the digits as a base-10 integer |
jackalmage@8571 | 1565 | and <var>d</var> be the number of digits; |
jackalmage@8571 | 1566 | otherwise, let <var>f</var> and <var>d</var> be the number 0. |
jackalmage@8571 | 1567 | |
jackalmage@8589 | 1568 | <li>An <b>exponent indicator</b>: |
jackalmage@8571 | 1569 | a single U+0045 LATIN CAPITAL LETTER E (E) or U+0065 LATIN SMALL LETTER E (e), |
jackalmage@8571 | 1570 | or the empty string. |
jackalmage@8571 | 1571 | |
jackalmage@8589 | 1572 | <li>An <b>exponent sign</b>: |
jackalmage@8571 | 1573 | a single U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-), |
jackalmage@8571 | 1574 | or the empty string. |
jackalmage@8571 | 1575 | Let <var>t</var> be the number -1 if the sign is U+002D HYPHEN-MINUS (-); |
jackalmage@8571 | 1576 | otherwise, let <var>t</var> be the number 1. |
jackalmage@8571 | 1577 | |
jackalmage@8589 | 1578 | <li>An <b>exponent</b>: |
simon@8739 | 1579 | zero or more <a href=#digit>digits</a>. |
jackalmage@8571 | 1580 | If there is at least one digit, |
simon@8603 | 1581 | let <var>e</var> be the number formed by interpreting the digits as a base-10 integer; |
simon@8603 | 1582 | otherwise, let <var>e</var> be the number 0. |
jackalmage@8589 | 1583 | </ol> |
jackalmage@8589 | 1584 | |
jackalmage@8589 | 1585 | <p> Return the number <code>s·(i + f·10<sup>-d</sup>)·10<sup>te</sup></code>. |
jackalmage@8589 | 1586 | |
jackalmage@8589 | 1587 | |
simon@8739 | 1588 | <h4 data-level=4.3.14 id=consume-the-remnants-of-a-bad-url><span class=secno>4.3.14 </span><span class=content> |
jackalmage@8796 | 1589 | <dfn data-dfn-type=dfn id=consume-the-remnants-of-a-bad-url0>Consume the remnants of a bad url</dfn></span><a class=section-link href=#consume-the-remnants-of-a-bad-url>§</a></h4> |
simon@8739 | 1590 | |
simon@8739 | 1591 | <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 characters, |
jackalmage@8589 | 1592 | "cleaning up" after the tokenizer realizes that it's in the middle of a 〈bad-url〉 rather than a 〈url〉. |
jackalmage@8572 | 1593 | It returns nothing; |
jackalmage@8572 | 1594 | its sole use is to consume enough of the input stream to reach a recovery point |
jackalmage@8572 | 1595 | where normal tokenizing can resume. |
jackalmage@8572 | 1596 | |
simon@8739 | 1597 | <p> Repeatedly consume the <a href=#next-input-character>next input character</a> from the stream: |
jackalmage@8589 | 1598 | |
jackalmage@8589 | 1599 | <dl> |
jackalmage@8571 | 1600 | <dt>U+0029 RIGHT PARENTHESIS ()) |
jackalmage@8589 | 1601 | <dt>EOF |
jackalmage@8589 | 1602 | <dd> |
jackalmage@8571 | 1603 | Return. |
jackalmage@8571 | 1604 | |
simon@8739 | 1605 | <dt>the input stream <a href=#check-if-two-characters-are-a-valid-escape0>starts with a valid escape</a> |
jackalmage@8589 | 1606 | <dd> |
simon@8739 | 1607 | <a href=#consume-an-escaped-character0>Consume an escaped character</a>. |
jackalmage@8589 | 1608 | <span class=note>This allows an escaped right parenthesis ("\)") to be encountered without ending the 〈bad-url〉. |
jackalmage@8571 | 1609 | This is otherwise identical to the "anything else" clause.</span> |
jackalmage@8571 | 1610 | |
jackalmage@8589 | 1611 | <dt>anything else |
jackalmage@8589 | 1612 | <dd> |
jackalmage@8571 | 1613 | Do nothing. |
jackalmage@8589 | 1614 | </dl> |
jackalmage@8589 | 1615 | |
simon@8739 | 1616 | <h4 data-level=4.3.15 id=set-the-unicode-ranges-range><span class=secno>4.3.15 </span><span class=content> |
jackalmage@8796 | 1617 | <dfn data-dfn-type=dfn id=set-the-unicode-ranges-range0>Set the 〈unicode-range〉’s range</dfn></span><a class=section-link href=#set-the-unicode-ranges-range>§</a></h4> |
jackalmage@8589 | 1618 | |
jackalmage@8589 | 1619 | <p> This section describes how to set a 〈unicode-range〉’s range |
jackalmage@8572 | 1620 | so that the range it describes |
jackalmage@8572 | 1621 | is within the supported range of unicode characters. |
jackalmage@8572 | 1622 | |
jackalmage@8796 | 1623 | <p> It assumes that the <dfn data-dfn-type=dfn id=start-of-the-range>start of the range</dfn> has been defined, |
jackalmage@8796 | 1624 | the <dfn data-dfn-type=dfn id=end-of-the-range>end of the range</dfn> might be defined, |
jackalmage@8572 | 1625 | and both are non-negative integers. |
jackalmage@8572 | 1626 | |
simon@8739 | 1627 | <p> If the <a href=#start-of-the-range>start of the range</a> is greater than |
simon@8739 | 1628 | the <a href=#maximum-allowed-codepoint>maximum allowed codepoint</a>, |
jackalmage@8589 | 1629 | the 〈unicode-range〉’s range is empty. |
jackalmage@8589 | 1630 | |
simon@8739 | 1631 | <p> If the <a href=#end-of-the-range>end of the range</a> is defined, |
simon@8739 | 1632 | and it is less than the <a href=#start-of-the-range>start of the range</a>, |
jackalmage@8589 | 1633 | the 〈unicode-range〉’s range is empty. |
jackalmage@8589 | 1634 | |
simon@8739 | 1635 | <p> If the <a href=#end-of-the-range>end of the range</a> is not defined, |
jackalmage@8589 | 1636 | the 〈unicode-range〉’s range |
simon@8739 | 1637 | is the single character whose codepoint is the <a href=#start-of-the-range>start of the range</a>. |
jackalmage@8589 | 1638 | |
jackalmage@8589 | 1639 | <p> Otherwise, |
simon@8739 | 1640 | if the <a href=#end-of-the-range>end of the range</a> is greater than |
simon@8739 | 1641 | the <a href=#maximum-allowed-codepoint>maximum allowed codepoint</a>, |
simon@8739 | 1642 | change it to the <a href=#maximum-allowed-codepoint>maximum allowed codepoint</a>. |
jackalmage@8589 | 1643 | The 〈unicode-range〉’s range |
jackalmage@8572 | 1644 | is all characters between |
simon@8739 | 1645 | the character whose codepoint is the <a href=#start-of-the-range>start of the range</a> |
simon@8739 | 1646 | and the character whose codepoint is the <a href=#end-of-the-range>end of the range</a>. |
jackalmage@8571 | 1647 | |
jackalmage@8571 | 1648 | |
jackalmage@8571 | 1649 | <!-- |
jackalmage@7882 | 1650 | PPPPPPPPPPPPPPPPP AAA RRRRRRRRRRRRRRRRR SSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEERRRRRRRRRRRRRRRRR |
jackalmage@7882 | 1651 | P::::::::::::::::P A:::A R::::::::::::::::R SS:::::::::::::::SE::::::::::::::::::::ER::::::::::::::::R |
jackalmage@7882 | 1652 | P::::::PPPPPP:::::P A:::::A R::::::RRRRRR:::::R S:::::SSSSSS::::::SE::::::::::::::::::::ER::::::RRRRRR:::::R |
jackalmage@7882 | 1653 | PP:::::P P:::::P A:::::::A RR:::::R R:::::RS:::::S SSSSSSSEE::::::EEEEEEEEE::::ERR:::::R R:::::R |
jackalmage@8116 | 1654 | P::::P P:::::P A:::::::::A R::::R R:::::RS:::::S E:::::E EEEEEE R::::R R:::::R |
jackalmage@8116 | 1655 | P::::P P:::::PA:::::A:::::A R::::R R:::::RS:::::S E:::::E R::::R R:::::R |
jackalmage@8116 | 1656 | P::::PPPPPP:::::PA:::::A A:::::A R::::RRRRRR:::::R S::::SSSS E::::::EEEEEEEEEE R::::RRRRRR:::::R |
jackalmage@8116 | 1657 | P:::::::::::::PPA:::::A A:::::A R:::::::::::::RR SS::::::SSSSS E:::::::::::::::E R:::::::::::::RR |
jackalmage@8116 | 1658 | P::::PPPPPPPPP A:::::A A:::::A R::::RRRRRR:::::R SSS::::::::SS E:::::::::::::::E R::::RRRRRR:::::R |
jackalmage@8116 | 1659 | P::::P A:::::AAAAAAAAA:::::A R::::R R:::::R SSSSSS::::S E::::::EEEEEEEEEE R::::R R:::::R |
jackalmage@8116 | 1660 | P::::P A:::::::::::::::::::::A R::::R R:::::R S:::::S E:::::E R::::R R:::::R |
jackalmage@8116 | 1661 | P::::P A:::::AAAAAAAAAAAAA:::::A R::::R R:::::R S:::::S E:::::E EEEEEE R::::R R:::::R |
jackalmage@7882 | 1662 | PP::::::PP A:::::A A:::::A RR:::::R R:::::RSSSSSSS S:::::SEE::::::EEEEEEEE:::::ERR:::::R R:::::R |
jackalmage@7882 | 1663 | P::::::::P A:::::A A:::::A R::::::R R:::::RS::::::SSSSSS:::::SE::::::::::::::::::::ER::::::R R:::::R |
jackalmage@7882 | 1664 | P::::::::P A:::::A A:::::A R::::::R R:::::RS:::::::::::::::SS E::::::::::::::::::::ER::::::R R:::::R |
jackalmage@7882 | 1665 | PPPPPPPPPPAAAAAAA AAAAAAARRRRRRRR RRRRRRR SSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEERRRRRRRR RRRRRRR |
jackalmage@7882 | 1666 | --> |
jackalmage@7882 | 1667 | |
simon@8739 | 1668 | <h2 data-level=5 id=parsing><span class=secno>5 </span><span class=content> |
simon@8739 | 1669 | Parsing</span><a class=section-link href=#parsing>§</a></h2> |
jackalmage@8571 | 1670 | |
jackalmage@8572 | 1671 | <p> The input to the parsing stage is a stream or list of tokens from the tokenization stage. |
jackalmage@8572 | 1672 | The output depends on how the parser is invoked, |
jackalmage@8572 | 1673 | as defined by the entry points listed later in this section. |
jackalmage@8572 | 1674 | The parser output can consist of at-rules, |
jackalmage@8572 | 1675 | qualified rules, |
jackalmage@8572 | 1676 | and/or declarations. |
jackalmage@8572 | 1677 | |
jackalmage@8589 | 1678 | <p> The parser's output is constructed according to the fundamental syntax of CSS, |
jackalmage@8572 | 1679 | without regards for the validity of any specific item. |
jackalmage@8572 | 1680 | Implementations may check the validity of items as they are returned by the various parser algorithms |
jackalmage@8572 | 1681 | and treat the algorithm as returning nothing if the item was invalid according to the implementation's own grammar knowledge, |
jackalmage@8572 | 1682 | or may construct a full tree as specified |
jackalmage@8572 | 1683 | and "clean up" afterwards by removing any invalid items. |
jackalmage@8572 | 1684 | |
jackalmage@8589 | 1685 | <p> The items that can appear in the tree are: |
jackalmage@8589 | 1686 | |
jackalmage@8589 | 1687 | <dl> |
jackalmage@8796 | 1688 | <dt><dfn data-dfn-type=dfn id=at-rule>at-rule</dfn> |
jackalmage@8589 | 1689 | <dd> |
jackalmage@8571 | 1690 | An at-rule has a name, |
jackalmage@8571 | 1691 | a prelude consisting of a list of component values, |
jackalmage@8571 | 1692 | and an optional block consisting of a simple {} block. |
jackalmage@8571 | 1693 | |
jackalmage@8589 | 1694 | <p class=note> Note: This specification places no limits on what an at-rule's block may contain. |
jackalmage@8572 | 1695 | Individual at-rules must define whether they accept a block, |
jackalmage@8572 | 1696 | and if so, |
jackalmage@8572 | 1697 | how to parse it |
jackalmage@8572 | 1698 | (preferably using one of the parser algorithms or entry points defined in this specification). |
jackalmage@8571 | 1699 | |
jackalmage@8796 | 1700 | <dt><dfn data-dfn-type=dfn id=qualified-rule>qualified rule</dfn> |
jackalmage@8589 | 1701 | <dd> |
jackalmage@8571 | 1702 | A qualified rule has |
jackalmage@8571 | 1703 | a prelude consisting of a list of component values, |
simon@8584 | 1704 | and a block consisting of a simple {} block. |
jackalmage@8571 | 1705 | |
jackalmage@8589 | 1706 | <p class=note> Note: Most qualified rules will be style rules, |
jackalmage@8796 | 1707 | where the prelude is a selector <a data-biblio-type=informative data-link-type=biblio href=#select title=SELECT>[SELECT]</a> |
simon@8739 | 1708 | and the block a <a href=#parse-a-list-of-declarations0 title="parse a list of declarations">list of declarations</a>. |
simon@8739 | 1709 | |
jackalmage@8796 | 1710 | <dt><dfn data-dfn-type=dfn id=declaration>declaration</dfn> |
jackalmage@8589 | 1711 | <dd> |
jackalmage@8571 | 1712 | A declaration has a name, |
jackalmage@8571 | 1713 | a value consisting of a list of component values, |
jackalmage@8571 | 1714 | and an <var>important</var> flag which is initially unset. |
jackalmage@8571 | 1715 | |
jackalmage@8589 | 1716 | <p class=issue> |
jackalmage@8571 | 1717 | Should we go ahead and generalize the important flag to be a list of bang values? |
jackalmage@8571 | 1718 | Suggested by Zack Weinburg. |
jackalmage@8572 | 1719 | |
jackalmage@8589 | 1720 | <p> Declarations are further categorized as "properties" or "descriptors", |
simon@8739 | 1721 | with the former typically appearing in <a href=#qualified-rule>qualified rules</a> |
simon@8739 | 1722 | and the latter appearing in <a href=#at-rule>at-rules</a>. |
jackalmage@8572 | 1723 | (This categorization does not occur at the Syntax level; |
jackalmage@8572 | 1724 | instead, it is a product of where the declaration appears, |
jackalmage@8572 | 1725 | and is defined by the respective specifications defining the given rule.) |
jackalmage@8571 | 1726 | |
jackalmage@8796 | 1727 | <dt><dfn data-dfn-type=dfn id=component-value>component value</dfn> |
jackalmage@8589 | 1728 | <dd> |
jackalmage@8571 | 1729 | A component value is one of the preserved tokens, |
jackalmage@8571 | 1730 | a function, |
jackalmage@8571 | 1731 | or a simple block. |
jackalmage@8571 | 1732 | |
jackalmage@8796 | 1733 | <dt><dfn data-dfn-type=dfn id=preserved-tokens>preserved tokens</dfn> |
jackalmage@8589 | 1734 | <dd> |
jackalmage@8571 | 1735 | Any token produced by the tokenizer |
jackalmage@8589 | 1736 | except for 〈function〉s, |
jackalmage@8589 | 1737 | 〈{〉s, |
jackalmage@8589 | 1738 | 〈(〉s, |
jackalmage@8589 | 1739 | and 〈[〉s. |
jackalmage@8589 | 1740 | |
jackalmage@8589 | 1741 | <p class=note> Note: The non-preserved tokens listed above are always consumed into higher-level objects, |
jackalmage@8572 | 1742 | either functions or simple blocks, |
jackalmage@8572 | 1743 | and so never appear in any parser output themselves. |
jackalmage@8572 | 1744 | |
jackalmage@8589 | 1745 | <p class=note> Note: The tokens 〈}〉s, 〈)〉s, 〈]〉, 〈bad-string〉, and 〈bad-url〉 are always parse errors, |
jackalmage@8572 | 1746 | but they are preserved in the token stream by this specification to allow other specs, |
jackalmage@8572 | 1747 | such as Media Queries, |
jackalmage@8572 | 1748 | to define more fine-grainted error-handling |
jackalmage@8572 | 1749 | than just dropping an entire declaration or block. |
jackalmage@8571 | 1750 | |
jackalmage@8796 | 1751 | <dt><dfn data-dfn-type=dfn id=function>function</dfn> |
jackalmage@8589 | 1752 | <dd> |
jackalmage@8571 | 1753 | A function has a name |
jackalmage@8571 | 1754 | and a value consisting of a list of component values. |
jackalmage@8571 | 1755 | |
jackalmage@8796 | 1756 | <dt><dfn data-dfn-type=dfn id=simple-block>simple block</dfn> |
jackalmage@8589 | 1757 | <dd> |
jackalmage@8589 | 1758 | A simple block has an associated token (either a 〈[〉, 〈(〉, or 〈{〉) |
jackalmage@8571 | 1759 | and a value consisting of a list of component values. |
jackalmage@8589 | 1760 | </dl> |
jackalmage@8589 | 1761 | |
simon@8739 | 1762 | <h3 data-level=5.1 id=parser-diagrams><span class=secno>5.1 </span><span class=content> |
simon@8739 | 1763 | Parser Railroad Diagrams</span><a class=section-link href=#parser-diagrams>§</a></h3> |
jackalmage@8571 | 1764 | |
jackalmage@8572 | 1765 | <p> <em>This section is non-normative.</em> |
jackalmage@8572 | 1766 | |
jackalmage@8589 | 1767 | <p> This section presents an informative view of the parser, |
jackalmage@8572 | 1768 | in the form of railroad diagrams. |
jackalmage@8572 | 1769 | Railroad diagrams are more compact than a state-machine, |
jackalmage@8572 | 1770 | but often easier to read than a regular expression. |
jackalmage@8572 | 1771 | |
jackalmage@8589 | 1772 | <p> These diagrams are <em>informative</em> and <em>incomplete</em>; |
jackalmage@8572 | 1773 | they describe the grammar of "correct" stylesheets, |
jackalmage@8572 | 1774 | but do not describe error-handling at all. |
jackalmage@8572 | 1775 | They are provided solely to make it easier to get an intuitive grasp of the syntax. |
jackalmage@8571 | 1776 | |
jackalmage@8571 | 1777 | <!-- |
jackalmage@7882 | 1778 | The "source" of these diagrams is in ./Diagrams.src.html |
jackalmage@7882 | 1779 | The generated SVG is copied here so that JavaScript is not required |
jackalmage@7882 | 1780 | to view the spec. |
jackalmage@7882 | 1781 | --> |
jackalmage@7882 | 1782 | |
jackalmage@8589 | 1783 | <dl> |
jackalmage@8589 | 1784 | <dt id=stylesheet-diagram>Stylesheet</dt> |
jackalmage@8600 | 1785 | <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> |
jackalmage@8589 | 1786 | |
jackalmage@8589 | 1787 | <dt id=rule-list-diagram>Rule list</dt> |
jackalmage@8600 | 1788 | <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> |
jackalmage@8589 | 1789 | |
jackalmage@8589 | 1790 | <dt id=at-rule-diagram>At-rule</dt> |
jackalmage@8600 | 1791 | <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> |
jackalmage@8589 | 1792 | |
jackalmage@8589 | 1793 | <dt id=qualified-rule-diagram>Qualified rule</dt> |
simon@8722 | 1794 | <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> |
jackalmage@8589 | 1795 | |
jackalmage@8589 | 1796 | <dt id=declaration-list-diagram>Declaration list</dt> |
jackalmage@8600 | 1797 | <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> |
jackalmage@8589 | 1798 | |
jackalmage@8589 | 1799 | <dt id=declaration-diagram>Declaration</dt> |
jackalmage@8600 | 1800 | <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> |
jackalmage@8589 | 1801 | |
jackalmage@8589 | 1802 | <dt id=important-diagram>!important</dt> |
jackalmage@8600 | 1803 | <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> |
jackalmage@8589 | 1804 | |
jackalmage@8589 | 1805 | <dt id=ws-diagram>ws*</dt> |
jackalmage@8600 | 1806 | <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> |
jackalmage@8589 | 1807 | |
jackalmage@8589 | 1808 | <dt id=component-value-diagram>Component value</dt> |
jackalmage@8600 | 1809 | <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> |
jackalmage@8589 | 1810 | |
jackalmage@8589 | 1811 | <dt id={}-block-diagram>{} block</dt> |
jackalmage@8600 | 1812 | <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> |
jackalmage@8589 | 1813 | |
jackalmage@8589 | 1814 | <dt id=()-block-diagram>() block</dt> |
jackalmage@8600 | 1815 | <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> |
jackalmage@8589 | 1816 | |
jackalmage@8589 | 1817 | <dt id=[]-block-diagram>[] block</dt> |
jackalmage@8600 | 1818 | <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> |
jackalmage@8589 | 1819 | |
jackalmage@8589 | 1820 | <dt id=function-block-diagram>Function block</dt> |
jackalmage@8600 | 1821 | <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> |
jackalmage@8571 | 1822 | |
jackalmage@8571 | 1823 | </dl> |
jackalmage@8571 | 1824 | |
simon@8739 | 1825 | <h3 data-level=5.2 id=definitions><span class=secno>5.2 </span><span class=content> |
simon@8739 | 1826 | Definitions</span><a class=section-link href=#definitions>§</a></h3> |
jackalmage@8571 | 1827 | |
jackalmage@8571 | 1828 | <dl> |
jackalmage@8796 | 1829 | <dt><dfn data-dfn-type=dfn id=current-input-token>current input token</dfn> |
jackalmage@8589 | 1830 | <dd> |
simon@8739 | 1831 | The token or <a href=#component-value>component value</a> currently being operated on, from the list of tokens produced by the tokenizer. |
simon@8739 | 1832 | |
jackalmage@8796 | 1833 | <dt><dfn data-dfn-type=dfn id=next-input-token>next input token</dfn> |
jackalmage@8589 | 1834 | <dd> |
simon@8739 | 1835 | 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. |
simon@8739 | 1836 | If there isn't a token following the <a href=#current-input-token>current input token</a>, |
simon@8739 | 1837 | the <a href=#next-input-token>next input token</a> is an 〈EOF〉. |
simon@8739 | 1838 | |
jackalmage@8796 | 1839 | <dt><dfn data-dfn-type=token id=tokendef-eof>〈EOF〉</dfn> |
jackalmage@8589 | 1840 | <dd> |
jackalmage@8571 | 1841 | A conceptual token representing the end of the list of tokens. |
jackalmage@8571 | 1842 | Whenever the list of tokens is empty, |
simon@8739 | 1843 | the <a href=#next-input-token>next input token</a> is always an 〈EOF〉. |
simon@8739 | 1844 | |
jackalmage@8796 | 1845 | <dt><dfn data-dfn-type=dfn id=consume-the-next-input-token>consume the next input token</dfn> |
jackalmage@8589 | 1846 | <dd> |
simon@8739 | 1847 | Let the <a href=#current-input-token>current input token</a> be the current <a href=#next-input-token>next input token</a>, |
simon@8739 | 1848 | adjusting the <a href=#next-input-token>next input token</a> accordingly. |
simon@8739 | 1849 | |
jackalmage@8796 | 1850 | <dt><dfn data-dfn-type=dfn id=reconsume-the-current-input-token>reconsume the current input token</dfn> |
jackalmage@8589 | 1851 | <dd> |
simon@8739 | 1852 | The next time an algorithm instructs you to <a href=#consume-the-next-input-token>consume the next input token</a>, |
jackalmage@8573 | 1853 | instead do nothing |
simon@8739 | 1854 | (retain the <a href=#current-input-token>current input token</a> unchanged). |
simon@8739 | 1855 | |
jackalmage@8796 | 1856 | <dt><dfn data-dfn-type=dfn id=ascii-case-insensitive>ASCII case-insensitive</dfn> |
jackalmage@8589 | 1857 | <dd> |
jackalmage@8571 | 1858 | When two strings are to be matched ASCII case-insensitively, |
jackalmage@8571 | 1859 | temporarily convert both of them to ASCII lower-case form |
jackalmage@8571 | 1860 | by adding 32 (0x20) to the value of each codepoint between |
jackalmage@8571 | 1861 | U+0041 LATIN CAPITAL LETTER A (A) |
jackalmage@8571 | 1862 | and U+005A LATIN CAPITAL LETTER Z (Z), |
jackalmage@8571 | 1863 | inclusive, |
jackalmage@8571 | 1864 | and then compare them on a codepoint-by-codepoint basis. |
jackalmage@8589 | 1865 | </dl> |
jackalmage@8589 | 1866 | |
jackalmage@8589 | 1867 | |
jackalmage@8589 | 1868 | |
simon@8739 | 1869 | <h3 data-level=5.3 id=parser-entry-points><span class=secno>5.3 </span><span class=content> |
simon@8739 | 1870 | Parser Entry Points</span><a class=section-link href=#parser-entry-points>§</a></h3> |
jackalmage@8571 | 1871 | |
jackalmage@8572 | 1872 | <p> The algorithms defined in this section produce high-level CSS objects |
jackalmage@8572 | 1873 | from lower-level objects. |
jackalmage@8572 | 1874 | They assume that they are invoked on a token stream, |
jackalmage@8572 | 1875 | but they may also be invoked on a string; |
jackalmage@8572 | 1876 | if so, |
jackalmage@8589 | 1877 | first perform <a href=#preprocessing-the-input-stream>input preprocessing</a> |
jackalmage@8572 | 1878 | to produce a character stream, |
jackalmage@8589 | 1879 | then perform <a href=#tokenization>tokenization</a> |
jackalmage@8572 | 1880 | to produce a token stream. |
jackalmage@8572 | 1881 | |
simon@8739 | 1882 | <p> "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" can also be invoked on a byte stream, |
jackalmage@8589 | 1883 | in which case <a href=#the-input-byte-stream>The input byte stream</a> |
jackalmage@8572 | 1884 | defines how to decode it into Unicode. |
jackalmage@8572 | 1885 | |
jackalmage@8589 | 1886 | <p class=note> Note: This specification does not define how a byte stream is decoded for other entry points. |
jackalmage@8589 | 1887 | |
jackalmage@8589 | 1888 | <p class=note> Note: Other specs can define additional entry points for their own purposes. |
jackalmage@8589 | 1889 | |
jackalmage@8589 | 1890 | <div class=issue> |
jackalmage@8572 | 1891 | The following notes should probably be translated into normative text in the relevant specs, |
jackalmage@8572 | 1892 | hooking this spec's terms: |
jackalmage@8572 | 1893 | |
jackalmage@8589 | 1894 | <p> <ul> |
jackalmage@8571 | 1895 | <li> |
simon@8739 | 1896 | "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" is intended to be the normal parser entry point, |
jackalmage@8571 | 1897 | for parsing stylesheets. |
jackalmage@8571 | 1898 | |
jackalmage@8589 | 1899 | <li> |
jackalmage@8796 | 1900 | "<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>. |
simon@8739 | 1901 | It differs from "<a href=#parse-a-stylesheet0>Parse a stylesheet</a>" in the handling of 〈CDO〉 and 〈CDC〉. |
jackalmage@8589 | 1902 | |
jackalmage@8589 | 1903 | <li> |
simon@8739 | 1904 | "<a href=#parse-a-rule0>Parse a rule</a>" is intended for use by the <code>CSSStyleSheet#insertRule</code> method, |
jackalmage@8571 | 1905 | and similar functions which might exist, |
jackalmage@8571 | 1906 | which parse text into a single rule. |
jackalmage@8571 | 1907 | |
jackalmage@8589 | 1908 | <li> |
jackalmage@8796 | 1909 | "<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> |
jackalmage@8589 | 1910 | |
jackalmage@8589 | 1911 | <li> |
simon@8739 | 1912 | "<a href=#parse-a-list-of-declarations0>Parse a list of declarations</a>" is for the contents of a <code>style</code> attribute, |
jackalmage@8571 | 1913 | which parses text into the contents of a single style rule. |
jackalmage@8571 | 1914 | |
jackalmage@8589 | 1915 | <li> |
simon@8739 | 1916 | "<a href=#parse-a-component-value0>Parse a component value</a>" is for things that need to consume a single value, |
jackalmage@8796 | 1917 | like the parsing rules for <span class=css data-link-type=maybe>attr()</span>. |
jackalmage@8589 | 1918 | |
jackalmage@8589 | 1919 | <li> |
simon@8739 | 1920 | "<a href=#parse-a-list-of-component-values0>Parse a list of component values</a>" is for the contents of presentational attributes, |
jackalmage@8571 | 1921 | which parse text into a single declaration's value, |
jackalmage@8796 | 1922 | 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>, |
jackalmage@8589 | 1923 | as in <a href=http://www.w3.org/TR/selectors-api/>Selectors API</a> |
jackalmage@8571 | 1924 | or the <code>media</code> HTML attribute. |
jackalmage@8589 | 1925 | </ul> |
jackalmage@8571 | 1926 | </div> |
jackalmage@8571 | 1927 | |
jackalmage@8572 | 1928 | <p> All of the algorithms defined in this spec may be called with either a list of tokens or of component values. |
jackalmage@8572 | 1929 | Either way produces an identical result. |
jackalmage@8571 | 1930 | |
jackalmage@8571 | 1931 | |
simon@8739 | 1932 | <h4 data-level=5.3.1 id=parse-a-stylesheet><span class=secno>5.3.1 </span><span class=content> |
jackalmage@8796 | 1933 | <dfn data-dfn-type=dfn id=parse-a-stylesheet0>Parse a stylesheet</dfn></span><a class=section-link href=#parse-a-stylesheet>§</a></h4> |
simon@8739 | 1934 | |
simon@8739 | 1935 | <p> To <a href=#parse-a-stylesheet0>parse a stylesheet</a> from a stream of tokens: |
jackalmage@8589 | 1936 | |
jackalmage@8589 | 1937 | <ol> |
jackalmage@8571 | 1938 | <li> |
jackalmage@8571 | 1939 | Create a new stylesheet. |
jackalmage@8571 | 1940 | |
jackalmage@8589 | 1941 | <li> |
simon@8739 | 1942 | <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. |
jackalmage@8589 | 1943 | |
jackalmage@8589 | 1944 | <li> |
jackalmage@8571 | 1945 | Assign the returned value to the stylesheet's value. |
jackalmage@8571 | 1946 | |
jackalmage@8589 | 1947 | <li> |
jackalmage@8571 | 1948 | Return the stylesheet. |
jackalmage@8589 | 1949 | </ol> |
jackalmage@8589 | 1950 | |
simon@8739 | 1951 | <h4 data-level=5.3.2 id=parse-a-list-of-rules><span class=secno>5.3.2 </span><span class=content> |
jackalmage@8796 | 1952 | <dfn data-dfn-type=dfn id=parse-a-list-of-rules0>Parse a list of rules</dfn></span><a class=section-link href=#parse-a-list-of-rules>§</a></h4> |
simon@8739 | 1953 | |
simon@8739 | 1954 | <p> To <a href=#parse-a-list-of-rules0>parse a list of rules</a> from a stream of tokens: |
jackalmage@8589 | 1955 | |
jackalmage@8589 | 1956 | <ol> |
jackalmage@8571 | 1957 | <li> |
simon@8739 | 1958 | <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. |
jackalmage@8589 | 1959 | |
jackalmage@8589 | 1960 | <li> |
jackalmage@8573 | 1961 | Return the returned list. |
jackalmage@8589 | 1962 | </ol> |
jackalmage@8589 | 1963 | |
simon@8739 | 1964 | <h4 data-level=5.3.3 id=parse-a-rule><span class=secno>5.3.3 </span><span class=content> |
jackalmage@8796 | 1965 | <dfn data-dfn-type=dfn id=parse-a-rule0>Parse a rule</dfn></span><a class=section-link href=#parse-a-rule>§</a></h4> |
simon@8739 | 1966 | |
simon@8739 | 1967 | <p> To <a href=#parse-a-rule0>parse a rule</a> from a stream of tokens: |
jackalmage@8589 | 1968 | |
jackalmage@8589 | 1969 | <ol> |
jackalmage@8571 | 1970 | <li> |
simon@8739 | 1971 | <a href=#consume-the-next-input-token>Consume the next input token</a>. |
jackalmage@8589 | 1972 | |
jackalmage@8589 | 1973 | <li> |
simon@8739 | 1974 | While the <a href=#current-input-token>current input token</a> is a 〈whitespace〉, |
simon@8739 | 1975 | <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 1976 | |
jackalmage@8589 | 1977 | <li> |
simon@8739 | 1978 | If the <a href=#current-input-token>current input token</a> is an 〈EOF〉, |
jackalmage@8571 | 1979 | return a syntax error. |
jackalmage@8571 | 1980 | |
jackalmage@8572 | 1981 | <p> Otherwise, |
simon@8739 | 1982 | if the <a href=#current-input-token>current input token</a> is an 〈at-keyword〉, |
simon@8739 | 1983 | <a href=#consume-an-at-rule0>consume an at-rule</a>. |
jackalmage@8589 | 1984 | |
jackalmage@8589 | 1985 | <p> Otherwise, |
simon@8739 | 1986 | <a href=#consume-a-qualified-rule0>consume a qualified rule</a>. |
jackalmage@8572 | 1987 | If nothing was returned, |
jackalmage@8572 | 1988 | return a syntax error. |
jackalmage@8571 | 1989 | |
jackalmage@8589 | 1990 | <li> |
simon@8739 | 1991 | While the <a href=#current-input-token>current input token</a> is a 〈whitespace〉, |
simon@8739 | 1992 | <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 1993 | |
jackalmage@8589 | 1994 | <li> |
simon@8739 | 1995 | If the <a href=#current-input-token>current input token</a> is an 〈EOF〉, |
jackalmage@8571 | 1996 | return the rule obtained in step 2. |
jackalmage@8571 | 1997 | Otherwise, return a syntax error. |
jackalmage@8589 | 1998 | </ol> |
jackalmage@8589 | 1999 | |
simon@8739 | 2000 | <h4 data-level=5.3.4 id=parse-a-declaration><span class=secno>5.3.4 </span><span class=content> |
jackalmage@8796 | 2001 | <dfn data-dfn-type=dfn id=parse-a-declaration0>Parse a declaration</dfn></span><a class=section-link href=#parse-a-declaration>§</a></h4> |
simon@8739 | 2002 | |
simon@8739 | 2003 | <p class=note> Note: Unlike "<a href=#parse-a-list-of-declarations0>Parse a list of declarations</a>", |
jackalmage@8572 | 2004 | this parses only a declaration and not an at-rule. |
jackalmage@8572 | 2005 | |
simon@8739 | 2006 | <p> To <a href=#parse-a-declaration0>parse a declaration</a>: |
jackalmage@8589 | 2007 | |
jackalmage@8589 | 2008 | <ol> |
jackalmage@8571 | 2009 | <li> |
simon@8739 | 2010 | <a href=#consume-the-next-input-token>Consume the next input token</a>. |
jackalmage@8589 | 2011 | |
jackalmage@8589 | 2012 | <li> |
simon@8739 | 2013 | While the <a href=#current-input-token>current input token</a> is a 〈whitespace〉, |
simon@8739 | 2014 | <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 2015 | |
jackalmage@8589 | 2016 | <li> |
simon@8739 | 2017 | <a href=#consume-a-declaration0>Consume a declaration</a>. |
jackalmage@8571 | 2018 | If anything was returned, return it. |
jackalmage@8571 | 2019 | Otherwise, return a syntax error. |
jackalmage@8589 | 2020 | </ol> |
jackalmage@8589 | 2021 | |
simon@8739 | 2022 | <h4 data-level=5.3.5 id=parse-a-list-of-declarations><span class=secno>5.3.5 </span><span class=content> |
jackalmage@8796 | 2023 | <dfn data-dfn-type=dfn id=parse-a-list-of-declarations0>Parse a list of declarations</dfn></span><a class=section-link href=#parse-a-list-of-declarations>§</a></h4> |
jackalmage@8589 | 2024 | |
jackalmage@8589 | 2025 | <p class=note> Note: Despite the name, |
jackalmage@8572 | 2026 | this actually parses a mixed list of declarations and at-rules, |
jackalmage@8796 | 2027 | 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>. |
jackalmage@8572 | 2028 | Unexpected at-rules (which could be all of them, in a given context) |
jackalmage@8572 | 2029 | are invalid and should be ignored by the consumer. |
jackalmage@8572 | 2030 | |
simon@8739 | 2031 | <p> To <a href=#parse-a-list-of-declarations0>parse a list of declarations</a>: |
jackalmage@8589 | 2032 | |
jackalmage@8589 | 2033 | <ol> |
jackalmage@8571 | 2034 | <li> |
simon@8739 | 2035 | <a href=#consume-a-list-of-declarations0>Consume a list of declarations</a>. |
jackalmage@8589 | 2036 | |
jackalmage@8589 | 2037 | <li> |
jackalmage@8573 | 2038 | Return the returned list. |
jackalmage@8589 | 2039 | </ol> |
jackalmage@8589 | 2040 | |
simon@8739 | 2041 | <h4 data-level=5.3.6 id=parse-a-component-value><span class=secno>5.3.6 </span><span class=content> |
jackalmage@8796 | 2042 | <dfn data-dfn-type=dfn id=parse-a-component-value0>Parse a component value</dfn></span><a class=section-link href=#parse-a-component-value>§</a></h4> |
simon@8739 | 2043 | |
simon@8739 | 2044 | <p> To <a href=#parse-a-component-value0>parse a component value</a>: |
jackalmage@8589 | 2045 | |
jackalmage@8589 | 2046 | <ol> |
jackalmage@8571 | 2047 | <li> |
simon@8739 | 2048 | <a href=#consume-the-next-input-token>Consume the next input token</a>. |
jackalmage@8589 | 2049 | |
jackalmage@8589 | 2050 | <li> |
simon@8739 | 2051 | While the <a href=#current-input-token>current input token</a> is a 〈whitespace〉, |
simon@8739 | 2052 | <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 2053 | |
jackalmage@8589 | 2054 | <li> |
simon@8739 | 2055 | If the <a href=#current-input-token>current input token</a> is an 〈EOF〉, |
jackalmage@8571 | 2056 | return a syntax error. |
jackalmage@8571 | 2057 | |
jackalmage@8589 | 2058 | <li> |
simon@8739 | 2059 | <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>. |
simon@8739 | 2060 | <a href=#consume-a-component-value0>Consume a component value</a>. |
jackalmage@8571 | 2061 | If nothing is returned, |
jackalmage@8571 | 2062 | return a syntax error. |
jackalmage@8571 | 2063 | |
jackalmage@8589 | 2064 | <li> |
simon@8739 | 2065 | While the <a href=#current-input-token>current input token</a> is a 〈whitespace〉, |
simon@8739 | 2066 | <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 2067 | |
jackalmage@8589 | 2068 | <li> |
simon@8739 | 2069 | If the <a href=#current-input-token>current input token</a> is an 〈EOF〉, |
simon@8739 | 2070 | return the <a href=#component-value>component value</a> returned in step 3. |
jackalmage@8571 | 2071 | Otherwise, |
jackalmage@8571 | 2072 | return a syntax error. |
jackalmage@8589 | 2073 | </ol> |
jackalmage@8589 | 2074 | |
simon@8739 | 2075 | <h4 data-level=5.3.7 id=parse-a-list-of-component-values><span class=secno>5.3.7 </span><span class=content> |
jackalmage@8796 | 2076 | <dfn data-dfn-type=dfn id=parse-a-list-of-component-values0>Parse a list of component values</dfn></span><a class=section-link href=#parse-a-list-of-component-values>§</a></h4> |
simon@8739 | 2077 | |
simon@8739 | 2078 | <p> To <a href=#parse-a-list-of-component-values0>parse a list of component values</a>: |
jackalmage@8589 | 2079 | |
jackalmage@8589 | 2080 | <ol> |
jackalmage@8571 | 2081 | <li> |
simon@8739 | 2082 | Repeatedly <a href=#consume-a-component-value0>consume a component value</a> until an 〈EOF〉 is returned, |
jackalmage@8589 | 2083 | appending the returned values (except the final 〈EOF〉) into a list. |
jackalmage@8571 | 2084 | Return the list. |
jackalmage@8589 | 2085 | </ol> |
jackalmage@8589 | 2086 | |
simon@8739 | 2087 | <h3 data-level=5.4 id=parser-algorithms><span class=secno>5.4 </span><span class=content> |
simon@8739 | 2088 | Parser Algorithms</span><a class=section-link href=#parser-algorithms>§</a></h3> |
jackalmage@8571 | 2089 | |
jackalmage@8572 | 2090 | <p> The following algorithms comprise the parser. |
jackalmage@8572 | 2091 | They are called by the parser entry points above. |
jackalmage@8572 | 2092 | |
jackalmage@8589 | 2093 | <p> These algorithms may be called with a list of either tokens or of component values. |
simon@8739 | 2094 | (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.) |
jackalmage@8572 | 2095 | Similar to how the input stream returned EOF characters to represent when it was empty during the tokenization stage, |
jackalmage@8589 | 2096 | the lists in this stage must return an 〈EOF〉 when the next token is requested but they are empty. |
jackalmage@8589 | 2097 | |
jackalmage@8589 | 2098 | <p> An algorithm may be invoked with a specific list, |
jackalmage@8572 | 2099 | in which case it consumes only that list |
jackalmage@8572 | 2100 | (and when that list is exhausted, |
jackalmage@8589 | 2101 | it begins returning 〈EOF〉s). |
jackalmage@8572 | 2102 | Otherwise, |
jackalmage@8572 | 2103 | it is implicitly invoked with the same list as the invoking algorithm. |
jackalmage@8571 | 2104 | |
jackalmage@8571 | 2105 | |
simon@8739 | 2106 | <h4 data-level=5.4.1 id=consume-a-list-of-rules><span class=secno>5.4.1 </span><span class=content> |
jackalmage@8796 | 2107 | <dfn data-dfn-type=dfn id=consume-a-list-of-rules0>Consume a list of rules</dfn></span><a class=section-link href=#consume-a-list-of-rules>§</a></h4> |
jackalmage@8571 | 2108 | |
jackalmage@8572 | 2109 | <p> Create an initially empty list of rules. |
jackalmage@8572 | 2110 | |
simon@8739 | 2111 | <p> Repeatedly consume the <a href=#next-input-token>next input token</a>: |
jackalmage@8589 | 2112 | |
jackalmage@8589 | 2113 | <dl> |
jackalmage@8589 | 2114 | <dt>〈whitespace〉 |
jackalmage@8589 | 2115 | <dd> |
jackalmage@8571 | 2116 | Do nothing. |
jackalmage@8571 | 2117 | |
jackalmage@8589 | 2118 | <dt>〈EOF〉 |
jackalmage@8589 | 2119 | <dd> |
jackalmage@8571 | 2120 | Return the list of rules. |
jackalmage@8571 | 2121 | |
jackalmage@8589 | 2122 | <dt>〈CDO〉 |
jackalmage@8589 | 2123 | <dt>〈CDC〉 |
jackalmage@8589 | 2124 | <dd> |
jackalmage@8796 | 2125 | If the <dfn data-dfn-type=dfn id=top-level-flag><var>top-level flag</var></dfn> is set, |
jackalmage@8571 | 2126 | do nothing. |
jackalmage@8571 | 2127 | |
jackalmage@8572 | 2128 | <p> Otherwise, |
simon@8739 | 2129 | <a href=#reconsume-the-current-input-token>reconsume the current input token</a>. |
simon@8739 | 2130 | <a href=#consume-a-qualified-rule0>Consume a qualified rule</a>. |
jackalmage@8572 | 2131 | If anything is returned, |
jackalmage@8572 | 2132 | append it to the list of rules. |
jackalmage@8571 | 2133 | |
jackalmage@8589 | 2134 | <dt>〈at-keyword〉 |
jackalmage@8589 | 2135 | <dd> |
simon@8739 | 2136 | <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>. |
simon@8739 | 2137 | <a href=#consume-an-at-rule0>Consume an at-rule</a>. |
jackalmage@8571 | 2138 | If anything is returned, |
jackalmage@8571 | 2139 | append it to the list of rules. |
jackalmage@8571 | 2140 | |
jackalmage@8589 | 2141 | <dt>anything else |
jackalmage@8589 | 2142 | <dd> |
simon@8739 | 2143 | <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>. |
simon@8739 | 2144 | <a href=#consume-a-qualified-rule0>Consume a qualified rule</a>. |
jackalmage@8571 | 2145 | If anything is returned, |
jackalmage@8571 | 2146 | append it to the list of rules. |
jackalmage@8589 | 2147 | </dl> |
jackalmage@8589 | 2148 | |
jackalmage@8589 | 2149 | |
simon@8739 | 2150 | <h4 data-level=5.4.2 id=consume-an-at-rule><span class=secno>5.4.2 </span><span class=content> |
jackalmage@8796 | 2151 | <dfn data-dfn-type=dfn id=consume-an-at-rule0>Consume an at-rule</dfn></span><a class=section-link href=#consume-an-at-rule>§</a></h4> |
jackalmage@8571 | 2152 | |
jackalmage@8572 | 2153 | <p> Create a new at-rule |
simon@8739 | 2154 | with its name set to the value of the <a href=#current-input-token>current input token</a>, |
jackalmage@8572 | 2155 | its prelude initially set to an empty list, |
jackalmage@8572 | 2156 | and its value initially set to nothing. |
jackalmage@8572 | 2157 | |
simon@8739 | 2158 | <p> Repeatedly consume the <a href=#next-input-token>next input token</a>: |
jackalmage@8589 | 2159 | |
jackalmage@8589 | 2160 | <dl> |
jackalmage@8589 | 2161 | <dt>〈semicolon〉 |
jackalmage@8589 | 2162 | <dt>〈EOF〉 |
jackalmage@8589 | 2163 | <dd> |
jackalmage@8571 | 2164 | Return the at-rule. |
jackalmage@8571 | 2165 | |
jackalmage@8589 | 2166 | <dt>〈{〉 |
jackalmage@8589 | 2167 | <dd> |
simon@8739 | 2168 | <a href=#consume-a-simple-block0>Consume a simple block</a> |
jackalmage@8571 | 2169 | and assign it to the at-rule's block. |
jackalmage@8571 | 2170 | Return the at-rule. |
jackalmage@8571 | 2171 | |
simon@8739 | 2172 | <dt><a href=#simple-block>simple block</a> with an associated token of 〈{〉 |
jackalmage@8589 | 2173 | <dd> |
jackalmage@8571 | 2174 | Assign the block to the at-rule's block. |
jackalmage@8571 | 2175 | Return the at-rule. |
jackalmage@8571 | 2176 | |
jackalmage@8589 | 2177 | <dt>anything else |
jackalmage@8589 | 2178 | <dd> |
simon@8739 | 2179 | <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>. |
simon@8739 | 2180 | <a href=#consume-a-component-value0>Consume a component value</a>. |
jackalmage@8571 | 2181 | Append the returned value to the at-rule's prelude. |
jackalmage@8589 | 2182 | </dl> |
jackalmage@8589 | 2183 | |
jackalmage@8589 | 2184 | |
simon@8739 | 2185 | <h4 data-level=5.4.3 id=consume-a-qualified-rule><span class=secno>5.4.3 </span><span class=content> |
jackalmage@8796 | 2186 | <dfn data-dfn-type=dfn id=consume-a-qualified-rule0>Consume a qualified rule</dfn></span><a class=section-link href=#consume-a-qualified-rule>§</a></h4> |
jackalmage@8571 | 2187 | |
jackalmage@8572 | 2188 | <p> Create a new qualified rule |
jackalmage@8572 | 2189 | with its prelude initially set to an empty list, |
jackalmage@8572 | 2190 | and its value initially set to nothing. |
jackalmage@8572 | 2191 | |
simon@8739 | 2192 | <p> Repeatedly consume the <a href=#next-input-token>next input token</a>: |
jackalmage@8589 | 2193 | |
jackalmage@8589 | 2194 | <dl> |
jackalmage@8589 | 2195 | <dt>〈EOF〉 |
jackalmage@8589 | 2196 | <dd> |
simon@8739 | 2197 | This is a <a href=#parse-errors>parse error</a>. |
jackalmage@8571 | 2198 | Return nothing. |
jackalmage@8571 | 2199 | |
jackalmage@8589 | 2200 | <dt>〈{〉 |
jackalmage@8589 | 2201 | <dd> |
simon@8739 | 2202 | <a href=#consume-a-simple-block0>Consume a simple block</a> |
simon@8584 | 2203 | and assign it to the qualified rule's block. |
jackalmage@8571 | 2204 | Return the qualified rule. |
jackalmage@8571 | 2205 | |
simon@8739 | 2206 | <dt><a href=#simple-block>simple block</a> with an associated token of 〈{〉 |
jackalmage@8589 | 2207 | <dd> |
simon@8584 | 2208 | Assign the block to the qualified rule's block. |
jackalmage@8571 | 2209 | Return the qualified rule. |
jackalmage@8571 | 2210 | |
jackalmage@8589 | 2211 | <dt>anything else |
jackalmage@8589 | 2212 | <dd> |
simon@8739 | 2213 | <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>. |
simon@8739 | 2214 | <a href=#consume-a-component-value0>Consume a component value</a>. |
jackalmage@8571 | 2215 | Append the returned value to the qualified rule's prelude. |
jackalmage@8589 | 2216 | </dl> |
jackalmage@8589 | 2217 | |
jackalmage@8589 | 2218 | |
simon@8739 | 2219 | <h4 data-level=5.4.4 id=consume-a-list-of-declarations><span class=secno>5.4.4 </span><span class=content> |
jackalmage@8796 | 2220 | <dfn data-dfn-type=dfn id=consume-a-list-of-declarations0>Consume a list of declarations</dfn></span><a class=section-link href=#consume-a-list-of-declarations>§</a></h4> |
jackalmage@8571 | 2221 | |
jackalmage@8572 | 2222 | <p> Create an initially empty list of declarations. |
jackalmage@8572 | 2223 | |
simon@8739 | 2224 | <p> Repeatedly consume the <a href=#next-input-token>next input token</a>: |
jackalmage@8589 | 2225 | |
jackalmage@8589 | 2226 | <dl> |
jackalmage@8589 | 2227 | <dt>〈whitespace〉 |
jackalmage@8589 | 2228 | <dt>〈semicolon〉 |
jackalmage@8589 | 2229 | <dd> |
jackalmage@8571 | 2230 | Do nothing. |
jackalmage@8571 | 2231 | |
jackalmage@8589 | 2232 | <dt>〈EOF〉 |
jackalmage@8589 | 2233 | <dd> |
jackalmage@8571 | 2234 | Return the list of declarations. |
jackalmage@8571 | 2235 | |
jackalmage@8589 | 2236 | <dt>〈at-keyword〉 |
jackalmage@8589 | 2237 | <dd> |
simon@8739 | 2238 | <a href=#consume-an-at-rule0>Consume an at-rule</a>. |
jackalmage@8571 | 2239 | Append the returned rule to the list of declarations. |
jackalmage@8571 | 2240 | |
jackalmage@8589 | 2241 | <dt>〈ident〉 |
jackalmage@8589 | 2242 | <dd> |
simon@8739 | 2243 | Initialize a temporary list initially filled with the <a href=#current-input-token>current input token</a>. |
simon@8739 | 2244 | <a href=#consume-the-next-input-token>Consume the next input token</a>. |
simon@8739 | 2245 | While the <a href=#current-input-token>current input token</a> is anything other than a 〈semicolon〉 or 〈EOF〉, |
jackalmage@8574 | 2246 | append it to the temporary list |
simon@8739 | 2247 | and <a href=#consume-the-next-input-token>consume the next input token</a>. |
simon@8739 | 2248 | <a href=#consume-a-declaration0>Consume a declaration</a> from the temporary list. |
jackalmage@8571 | 2249 | If anything was returned, |
jackalmage@8571 | 2250 | append it to the list of declarations. |
jackalmage@8571 | 2251 | |
jackalmage@8589 | 2252 | <dt>anything else |
jackalmage@8589 | 2253 | <dd> |
simon@8739 | 2254 | This is a <a href=#parse-errors>parse error</a>. |
simon@8739 | 2255 | Repeatedly <a href=#consume-a-component-value0>consume a component value</a> |
jackalmage@8589 | 2256 | until it is a 〈semicolon〉 or 〈EOF〉. |
jackalmage@8589 | 2257 | </dl> |
jackalmage@8589 | 2258 | |
jackalmage@8589 | 2259 | |
simon@8739 | 2260 | <h4 data-level=5.4.5 id=consume-a-declaration><span class=secno>5.4.5 </span><span class=content> |
jackalmage@8796 | 2261 | <dfn data-dfn-type=dfn id=consume-a-declaration0>Consume a declaration</dfn></span><a class=section-link href=#consume-a-declaration>§</a></h4> |
jackalmage@8571 | 2262 | |
jackalmage@8572 | 2263 | <p> Create a new declaration |
simon@8739 | 2264 | with its name set to the value of the <a href=#current-input-token>current input token</a> |
jackalmage@8573 | 2265 | and its value initially set to the empty list. |
jackalmage@8573 | 2266 | |
jackalmage@8589 | 2267 | <ol> |
jackalmage@8573 | 2268 | <li> |
simon@8739 | 2269 | <a href=#consume-the-next-input-token>Consume the next input token</a>. |
jackalmage@8589 | 2270 | |
jackalmage@8589 | 2271 | <li> |
simon@8739 | 2272 | While the <a href=#current-input-token>current input token</a> is a 〈whitespace〉, |
simon@8739 | 2273 | <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 2274 | |
jackalmage@8589 | 2275 | <li> |
simon@8739 | 2276 | If the <a href=#current-input-token>current input token</a> is anything other than a 〈colon〉, |
simon@8739 | 2277 | this is a <a href=#parse-errors>parse error</a>. |
jackalmage@8573 | 2278 | Return nothing. |
jackalmage@8573 | 2279 | |
simon@8739 | 2280 | <p> Otherwise, <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 2281 | |
jackalmage@8589 | 2282 | <li> |
simon@8739 | 2283 | While the <a href=#current-input-token>current input token</a> is anything other than an 〈EOF〉, |
jackalmage@8573 | 2284 | append it to the declaration's value |
simon@8739 | 2285 | and <a href=#consume-the-next-input-token>consume the next input token</a>. |
jackalmage@8589 | 2286 | |
jackalmage@8589 | 2287 | <li> |
jackalmage@8589 | 2288 | If the last two non-〈whitespace〉s in the declaration's value are |
jackalmage@8589 | 2289 | a 〈delim〉 with the value "!" |
simon@8739 | 2290 | followed by an 〈ident〉 with a value that is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "important", |
jackalmage@8573 | 2291 | remove them from the declaration's value |
jackalmage@8573 | 2292 | and set the declaration's <var>important</var> flag to true. |
jackalmage@8573 | 2293 | |
jackalmage@8589 | 2294 | <li> |
jackalmage@8573 | 2295 | Return the declaration. |
jackalmage@8589 | 2296 | </ol> |
jackalmage@8589 | 2297 | |
jackalmage@8589 | 2298 | |
simon@8739 | 2299 | <h4 data-level=5.4.6 id=consume-a-component-value><span class=secno>5.4.6 </span><span class=content> |
jackalmage@8796 | 2300 | <dfn data-dfn-type=dfn id=consume-a-component-value0>Consume a component value</dfn></span><a class=section-link href=#consume-a-component-value>§</a></h4> |
simon@8739 | 2301 | |
simon@8739 | 2302 | <p> This section describes how to <a href=#consume-a-component-value0>consume a component value</a>. |
simon@8739 | 2303 | |
simon@8739 | 2304 | <p> <a href=#consume-the-next-input-token>Consume the next input token</a>. |
simon@8739 | 2305 | |
simon@8739 | 2306 | <p> If the <a href=#current-input-token>current input token</a> |
jackalmage@8589 | 2307 | is a 〈{〉, 〈[〉, or 〈(〉, |
simon@8739 | 2308 | <a href=#consume-a-simple-block0>consume a simple block</a> |
jackalmage@8572 | 2309 | and return it. |
jackalmage@8572 | 2310 | |
simon@8739 | 2311 | <p> Otherwise, if the <a href=#current-input-token>current input token</a> |
jackalmage@8589 | 2312 | is a 〈function〉, |
simon@8739 | 2313 | <a href=#consume-a-function0>consume a function</a> |
jackalmage@8572 | 2314 | and return it. |
jackalmage@8572 | 2315 | |
simon@8739 | 2316 | <p> Otherwise, return the <a href=#current-input-token>current input token</a>. |
simon@8739 | 2317 | |
simon@8739 | 2318 | |
simon@8739 | 2319 | <h4 data-level=5.4.7 id=consume-a-simple-block><span class=secno>5.4.7 </span><span class=content> |
jackalmage@8796 | 2320 | <dfn data-dfn-type=dfn id=consume-a-simple-block0>Consume a simple block</dfn></span><a class=section-link href=#consume-a-simple-block>§</a></h4> |
simon@8739 | 2321 | |
simon@8739 | 2322 | <p> This section describes how to <a href=#consume-a-simple-block0>consume a simple block</a>. |
simon@8739 | 2323 | |
jackalmage@8796 | 2324 | <p> The <dfn data-dfn-type=dfn id=ending-token>ending token</dfn> is the mirror variant of the <a href=#current-input-token>current input token</a>. |
simon@8739 | 2325 | (E.g. if it was called with 〈[〉, the <a href=#ending-token>ending token</a> is 〈]〉.) |
simon@8739 | 2326 | |
simon@8739 | 2327 | <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> |
jackalmage@8573 | 2328 | and with a value with is initially an empty list. |
jackalmage@8572 | 2329 | |
simon@8739 | 2330 | <p> Repeatedly consume the <a href=#next-input-token>next input token</a> and process it as follows: |
jackalmage@8589 | 2331 | |
jackalmage@8589 | 2332 | <dl> |
jackalmage@8589 | 2333 | <dt>〈EOF〉 |
simon@8739 | 2334 | <dt><a href=#ending-token>ending token</a> |
jackalmage@8589 | 2335 | <dd> |
jackalmage@8571 | 2336 | Return the block. |
jackalmage@8571 | 2337 | |
jackalmage@8589 | 2338 | <dt>anything else |
jackalmage@8589 | 2339 | <dd> |
simon@8739 | 2340 | <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>. |
simon@8739 | 2341 | <a href=#consume-a-component-value0>Consume a component value</a> |
jackalmage@8571 | 2342 | and append it to the value of the block. |
jackalmage@8589 | 2343 | </dl> |
jackalmage@8589 | 2344 | |
jackalmage@8589 | 2345 | |
simon@8739 | 2346 | <h4 data-level=5.4.8 id=consume-a-function><span class=secno>5.4.8 </span><span class=content> |
jackalmage@8796 | 2347 | <dfn data-dfn-type=dfn id=consume-a-function0>Consume a function</dfn></span><a class=section-link href=#consume-a-function>§</a></h4> |
simon@8739 | 2348 | |
simon@8739 | 2349 | <p> This section describes how to <a href=#consume-a-function0>consume a function</a>. |
simon@8739 | 2350 | |
simon@8739 | 2351 | <p> Create a function with a name equal to the value of the <a href=#current-input-token>current input token</a>, |
jackalmage@8572 | 2352 | and with a value which is initially an empty list. |
jackalmage@8572 | 2353 | |
simon@8739 | 2354 | <p> Repeatedly consume the <a href=#next-input-token>next input token</a> and process it as follows: |
jackalmage@8589 | 2355 | |
jackalmage@8589 | 2356 | <dl> |
jackalmage@8589 | 2357 | <dt>〈EOF〉 |
jackalmage@8589 | 2358 | <dt>〈)〉 |
jackalmage@8589 | 2359 | <dd> |
jackalmage@8571 | 2360 | Return the function. |
jackalmage@8571 | 2361 | |
jackalmage@8589 | 2362 | <dt>anything else |
jackalmage@8589 | 2363 | <dd> |
simon@8739 | 2364 | <a href=#reconsume-the-current-input-token>Reconsume the current input token</a>. |
simon@8739 | 2365 | <a href=#consume-a-component-value0>Consume a component value</a> |
jackalmage@8571 | 2366 | and append the returned value |
jackalmage@8571 | 2367 | to the function's value. |
jackalmage@8589 | 2368 | </dl> |
jackalmage@8589 | 2369 | |
jackalmage@8589 | 2370 | |
jackalmage@8589 | 2371 | |
simon@8739 | 2372 | <h2 data-level=6 id=anb><span class=secno>6 </span><span class=content> |
simon@8739 | 2373 | The <var>An+B</var> microsyntax</span><a class=section-link href=#anb>§</a></h2> |
jackalmage@8571 | 2374 | |
jackalmage@8598 | 2375 | <p> Several things in CSS, |
jackalmage@8796 | 2376 | 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, |
jackalmage@8572 | 2377 | need to indicate indexes in a list. |
jackalmage@8572 | 2378 | The <var>An+B</var> microsyntax is useful for this, |
jackalmage@8572 | 2379 | allowing an author to easily indicate single elements |
jackalmage@8572 | 2380 | or all elements at regularly-spaced intervals in a list. |
jackalmage@8572 | 2381 | |
jackalmage@8796 | 2382 | <p> The <dfn data-dfn-type=dfn id=anb0>An+B</dfn> notation defines an integer step (<dfn data-dfn-type=dfn id=a>A</dfn>) and offset (<dfn data-dfn-type=dfn id=b>B</dfn>), |
jackalmage@8572 | 2383 | and represents the <var>An+B</var>th elements in a list, |
jackalmage@8572 | 2384 | for every positive integer or zero value of <var>n</var>, |
jackalmage@8572 | 2385 | with the first element in the list having index 1 (not 0). |
jackalmage@8572 | 2386 | |
jackalmage@8589 | 2387 | <p> For values of <var>A</var> and <var>B</var> greater than 0, |
jackalmage@8572 | 2388 | this effectively divides the list into groups of <var>A</var> elements |
jackalmage@8572 | 2389 | (the last group taking the remainder), |
jackalmage@8572 | 2390 | and selecting the <var>B</var>th element of each group. |
jackalmage@8572 | 2391 | |
jackalmage@8796 | 2392 | <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, |
jackalmage@8796 | 2393 | 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. |
jackalmage@8589 | 2394 | |
jackalmage@8589 | 2395 | <div class=example> |
jackalmage@8571 | 2396 | <p>Examples: |
jackalmage@8589 | 2397 | <pre><!-- |
jackalmage@8571 | 2398 | -->2n+0 /* represents all of the even elements in the list */ |
simon@8323 | 2399 | <!-- |
jackalmage@8571 | 2400 | -->even /* same */ |
simon@8323 | 2401 | <!-- |
jackalmage@8571 | 2402 | -->4n+1 /* represents the 1st, 5th, 9th, 13th, etc. elements in the list */</pre> </div> |
jackalmage@8571 | 2403 | |
jackalmage@8572 | 2404 | <p> The values of <var>A</var> and <var>B</var> can be negative, |
jackalmage@8572 | 2405 | but only the positive results of <var>An+B</var>, |
jackalmage@8589 | 2406 | for <var>n</var> ≥ 0, |
jackalmage@8572 | 2407 | are used. |
jackalmage@8571 | 2408 | |
jackalmage@8589 | 2409 | <div class=example> |
jackalmage@8571 | 2410 | <p>Example: |
jackalmage@8589 | 2411 | <pre>-n+6 /* represents the first 6 elements of the list */</pre> </div> |
jackalmage@8571 | 2412 | |
jackalmage@8572 | 2413 | <p> If both <var>A</var> and <var>B</var> are 0, |
jackalmage@8572 | 2414 | the pseudo-class represents no element in the list. |
jackalmage@8571 | 2415 | |
simon@8739 | 2416 | <h3 data-level=6.1 id=anb-syntax><span class=secno>6.1 </span><span class=content> |
simon@8739 | 2417 | Informal Syntax Description</span><a class=section-link href=#anb-syntax>§</a></h3> |
jackalmage@8571 | 2418 | |
jackalmage@8572 | 2419 | <p> <em>This section is non-normative.</em> |
jackalmage@8572 | 2420 | |
jackalmage@8589 | 2421 | <p> When <var>A</var> is 0, the <var>An</var> part may be omitted |
jackalmage@8572 | 2422 | (unless the <var>B</var> part is already omitted). |
jackalmage@8572 | 2423 | When <var>An</var> is not included |
jackalmage@8572 | 2424 | and <var>B</var> is non-negative, |
jackalmage@8796 | 2425 | the <span class=css data-link-type=maybe>+</span> sign before <var>B</var> (when allowed) |
jackalmage@8572 | 2426 | may also be omitted. |
jackalmage@8572 | 2427 | In this case the syntax simplifies to just <var>B</var>. |
jackalmage@8571 | 2428 | |
jackalmage@8589 | 2429 | <div class=example> |
jackalmage@8571 | 2430 | <p>Examples: |
jackalmage@8589 | 2431 | <pre><!-- |
jackalmage@8571 | 2432 | -->0n+5 /* represents the 5th element in the list */ |
simon@8323 | 2433 | <!-- |
jackalmage@8571 | 2434 | -->5 /* same */</pre> </div> |
jackalmage@8571 | 2435 | |
jackalmage@8572 | 2436 | <p> When <var>A</var> is 1 or -1, |
jackalmage@8572 | 2437 | the <code>1</code> may be omitted from the rule. |
jackalmage@8571 | 2438 | |
jackalmage@8589 | 2439 | <div class=example> |
jackalmage@8571 | 2440 | <p>Examples: |
jackalmage@8589 | 2441 | <p>The following notations are therefore equivalent: |
jackalmage@8589 | 2442 | <pre><!-- |
jackalmage@8571 | 2443 | -->1n+0 /* represents all elements in the list */ |
simon@8323 | 2444 | <!-- |
jackalmage@8571 | 2445 | -->n+0 /* same */ |
simon@8323 | 2446 | <!-- |
jackalmage@8571 | 2447 | -->n /* same */</pre> </div> |
jackalmage@8571 | 2448 | |
jackalmage@8572 | 2449 | <p> If <var>B</var> is 0, then every <var>A</var>th element is picked. |
jackalmage@8572 | 2450 | In such a case, |
jackalmage@8572 | 2451 | the <var>+B</var> (or <var>-B</var>) part may be omitted |
jackalmage@8572 | 2452 | unless the <var>A</var> part is already omitted. |
jackalmage@8571 | 2453 | |
jackalmage@8589 | 2454 | <div class=example> |
jackalmage@8571 | 2455 | <p>Examples: |
jackalmage@8589 | 2456 | <pre><!-- |
jackalmage@8571 | 2457 | -->2n+0 /* represents every even element in the list */ |
simon@8323 | 2458 | <!-- |
jackalmage@8571 | 2459 | -->2n /* same */</pre> </div> |
jackalmage@8571 | 2460 | |
jackalmage@8796 | 2461 | <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> |
jackalmage@8572 | 2462 | that separates the <var>An</var> and <var>B</var> parts when both are present. |
jackalmage@8571 | 2463 | |
jackalmage@8589 | 2464 | <div class=example> |
jackalmage@8571 | 2465 | <p>Valid Examples with white space: |
jackalmage@8589 | 2466 | <pre><!-- |
jackalmage@8571 | 2467 | -->3n + 1 |
simon@8323 | 2468 | <!-- |
jackalmage@8571 | 2469 | -->+3n - 2 |
simon@8323 | 2470 | <!-- |
jackalmage@8571 | 2471 | -->-n+ 6 |
simon@8323 | 2472 | <!-- |
jackalmage@8571 | 2473 | -->+6</pre> <p>Invalid Examples with white space: |
jackalmage@8589 | 2474 | <pre><!-- |
jackalmage@8571 | 2475 | -->3 n |
simon@8323 | 2476 | <!-- |
jackalmage@8571 | 2477 | -->+ 2n |
simon@8323 | 2478 | <!-- |
jackalmage@8571 | 2479 | -->+ 2</pre> </div> |
jackalmage@8571 | 2480 | |
jackalmage@8571 | 2481 | |
simon@8739 | 2482 | <h3 data-level=6.2 id=the-anb-type><span class=secno>6.2 </span><span class=content> |
simon@8739 | 2483 | The <code><an+b></code> type</span><a class=section-link href=#the-anb-type>§</a></h3> |
jackalmage@8571 | 2484 | |
jackalmage@8572 | 2485 | <p> The <var>An+B</var> notation was originally defined using a slightly different tokenizer than the rest of CSS, |
jackalmage@8572 | 2486 | resulting in a somewhat odd definition when expressed in terms of CSS tokens. |
jackalmage@8572 | 2487 | This section describes how to recognize the <var>An+B</var> notation in terms of CSS tokens |
jackalmage@8572 | 2488 | (thus defining the <var><an+b></var> type for CSS grammar purposes), |
jackalmage@8572 | 2489 | and how to interpret the CSS tokens to obtain values for <var>A</var> and <var>B</var>. |
jackalmage@8572 | 2490 | |
jackalmage@8598 | 2491 | <p> The <var><an+b></var> type is defined |
jackalmage@8598 | 2492 | (using the <a href=http://www.w3.org/TR/css3-values/#value-defs>Value Definition Syntax in the Values & Units spec</a>) |
jackalmage@8572 | 2493 | as: |
jackalmage@8572 | 2494 | |
jackalmage@8796 | 2495 | <pre class=prod> <dfn data-dfn-type=type id=anb-production><an+b></dfn> = |
jackalmage@8572 | 2496 | odd | even | |
jackalmage@8572 | 2497 | <var><integer></var> | |
jackalmage@8572 | 2498 | |
jackalmage@8572 | 2499 | <var><n-dimension></var> | |
jackalmage@8589 | 2500 | '+'?<sup><a href=#anb-plus>†</a></sup> n | |
jackalmage@8572 | 2501 | -n | |
jackalmage@8572 | 2502 | |
jackalmage@8572 | 2503 | <var><ndashdigit-dimension></var> | |
jackalmage@8589 | 2504 | '+'?<sup><a href=#anb-plus>†</a></sup> <var><ndashdigit-ident></var> | |
jackalmage@8572 | 2505 | <var><dashndashdigit-ident></var> | |
jackalmage@8572 | 2506 | |
jackalmage@8572 | 2507 | <var><n-dimension></var> <var><signed-integer></var> | |
jackalmage@8589 | 2508 | '+'?<sup><a href=#anb-plus>†</a></sup> n <var><signed-integer></var> | |
jackalmage@8572 | 2509 | -n <var><signed-integer></var> | |
jackalmage@8572 | 2510 | |
simon@8799 | 2511 | <var><ndash-dimension></var> <var><signless-integer></var> | |
simon@8799 | 2512 | '+'?<sup><a href=#anb-plus>†</a></sup> n- <var><signless-integer></var> | |
simon@8799 | 2513 | -n- <var><signless-integer></var> | |
simon@8799 | 2514 | |
jackalmage@8572 | 2515 | <var><n-dimension></var> ['+' | '-'] <var><signless-integer></var> |
jackalmage@8589 | 2516 | '+'?<sup><a href=#anb-plus>†</a></sup> n ['+' | '-'] <var><signless-integer></var> | |
jackalmage@8572 | 2517 | -n ['+' | '-'] <var><signless-integer></var> |
jackalmage@8572 | 2518 | </pre> |
jackalmage@8572 | 2519 | <p> where: |
jackalmage@8571 | 2520 | |
jackalmage@8589 | 2521 | <p> <ul> |
jackalmage@8796 | 2522 | <li><dfn data-dfn-type=type id=typedef-n-dimension><code><n-dimension></code></dfn> is a 〈dimension〉 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" |
simon@8799 | 2523 | <li><dfn data-dfn-type=type id=typedef-ndash-dimension><code><ndash-dimension></code></dfn> is a 〈dimension〉 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-" |
jackalmage@8796 | 2524 | <li><dfn data-dfn-type=type id=typedef-ndashdigit-dimension><code><ndashdigit-dimension></code></dfn> is a 〈dimension〉 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> |
jackalmage@8796 | 2525 | <li><dfn data-dfn-type=type id=typedef-ndashdigit-ident><code><ndashdigit-ident></code></dfn> is an 〈ident〉 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> |
jackalmage@8796 | 2526 | <li><dfn data-dfn-type=type id=typedef-dashndashdigit-ident><code><dashndashdigit-ident></code></dfn> is an 〈ident〉 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> |
jackalmage@8796 | 2527 | <li><dfn data-dfn-type=type id=typedef-integer><code><integer></code></dfn> is a 〈number〉 with its type flag set to "integer" |
jackalmage@8796 | 2528 | <li><dfn data-dfn-type=type id=typedef-signed-integer><code><signed-integer></code></dfn> is a 〈number〉 with its type flag set to "integer", and whose representation starts with "+" or "-" |
jackalmage@8796 | 2529 | <li><dfn data-dfn-type=type id=typedef-signless-integer><code><signless-integer></code></dfn> is a 〈number〉 with its type flag set to "integer", and whose representation start with a <a href=#digit>digit</a> |
jackalmage@8589 | 2530 | </ul> |
jackalmage@8589 | 2531 | |
jackalmage@8589 | 2532 | <p id=anb-plus> |
jackalmage@8589 | 2533 | <sup>†</sup>: When a plus sign (+) precedes an ident starting with "n", as in the cases marked above, |
jackalmage@8571 | 2534 | there must be no whitespace between the two tokens, |
jackalmage@8571 | 2535 | or else the tokens do not match the above grammar. |
jackalmage@8571 | 2536 | |
jackalmage@8589 | 2537 | <p> The clauses of the production are interpreted as follows: |
jackalmage@8589 | 2538 | |
jackalmage@8589 | 2539 | <dl> |
jackalmage@8796 | 2540 | <dt><span class=css data-link-type=maybe>odd</span> |
jackalmage@8589 | 2541 | <dd> |
jackalmage@8571 | 2542 | <var>A</var> is 2, <var>B</var> is 1. |
jackalmage@8571 | 2543 | |
jackalmage@8796 | 2544 | <dt><span class=css data-link-type=maybe>even</span> |
jackalmage@8589 | 2545 | <dd> |
jackalmage@8571 | 2546 | <var>A</var> is 2, <var>B</var> is 0. |
jackalmage@8571 | 2547 | |
jackalmage@8589 | 2548 | <dt><code><var><integer></var></code> |
jackalmage@8589 | 2549 | <dd> |
jackalmage@8589 | 2550 | <var>A</var> is 0, <var>B</var> is the integer’s value. |
jackalmage@8589 | 2551 | |
jackalmage@8589 | 2552 | <dt><code><var><n-dimension></var></code> |
jackalmage@8589 | 2553 | <dt><code>'+'? n</code> |
jackalmage@8589 | 2554 | <dt><code>-n</code> |
jackalmage@8589 | 2555 | <dd> |
jackalmage@8571 | 2556 | <var>A</var> is the dimension's value, 1, or -1, respectively. |
jackalmage@8571 | 2557 | <var>B</var> is 0. |
jackalmage@8571 | 2558 | |
jackalmage@8589 | 2559 | <dt><code><var><ndashdigit-dimension></var></code> |
jackalmage@8589 | 2560 | <dt><code>'+'? <var><ndashdigit-ident></var></code> |
jackalmage@8589 | 2561 | <dd> |
jackalmage@8571 | 2562 | <var>A</var> is the dimension's value or 1, respectively. |
jackalmage@8571 | 2563 | <var>B</var> is the dimension's unit or ident's value, respectively, |
jackalmage@8571 | 2564 | with the first character removed and the remainder interpreted as a base-10 number. |
jackalmage@8589 | 2565 | <span class=note>B is negative.</span> |
jackalmage@8589 | 2566 | |
jackalmage@8589 | 2567 | <dt><code><var><dashndashdigit-ident></var></code> |
jackalmage@8589 | 2568 | <dd> |
jackalmage@8571 | 2569 | <var>A</var> is -1. |
jackalmage@8571 | 2570 | <var>B</var> is the ident's value, with the first two characters removed and the remainder interpreted as a base-10 number. |
jackalmage@8589 | 2571 | <span class=note>B is negative.</span> |
jackalmage@8589 | 2572 | |
jackalmage@8589 | 2573 | <dt><code><var><n-dimension></var> <var><signed-integer></var></code> |
jackalmage@8589 | 2574 | <dt><code>'+'? n <var><signed-integer></var></code> |
jackalmage@8589 | 2575 | <dt><code>-n <var><signed-integer></var></code> |
jackalmage@8589 | 2576 | <dd> |
jackalmage@8571 | 2577 | <var>A</var> is the dimension's value, 1, or -1, respectively. |
jackalmage@8589 | 2578 | <var>B</var> is the integer’s value. |
jackalmage@8589 | 2579 | |
simon@8799 | 2580 | <dt><code><var><ndash-dimension></var> <var><signless-integer></var></code> |
simon@8799 | 2581 | <dt><code>'+'? n- <var><signless-integer></var></code> |
simon@8799 | 2582 | <dt><code>-n- <var><signless-integer></var></code> |
simon@8799 | 2583 | <dd> |
simon@8799 | 2584 | <var>A</var> is the dimension's value, 1, or -1, respectively. |
simon@8799 | 2585 | <var>B</var> is the negation of the integer’s value. |
simon@8799 | 2586 | |
jackalmage@8589 | 2587 | <dt><code><var><n-dimension></var> ['+' | '-'] <var><signless-integer></var></code> |
jackalmage@8589 | 2588 | <dt><code>'+'? n ['+' | '-'] <var><signless-integer></var></code> |
jackalmage@8589 | 2589 | <dt><code>-n ['+' | '-'] <var><signless-integer></var></code> |
jackalmage@8589 | 2590 | <dd> |
jackalmage@8571 | 2591 | <var>A</var> is the dimension's value, 1, or -1, respectively. |
jackalmage@8589 | 2592 | <var>B</var> is the integer’s value. |
jackalmage@8589 | 2593 | If a '-' was provided between the two, <var>B</var> is instead the negation of the integer’s value. |
jackalmage@8589 | 2594 | </dl> |
jackalmage@8589 | 2595 | |
jackalmage@8589 | 2596 | |
jackalmage@8589 | 2597 | |
simon@8739 | 2598 | <h2 data-level=7 id=rule-defs><span class=secno>7 </span><span class=content> |
simon@8739 | 2599 | Defining Grammars for Rules and Other Values</span><a class=section-link href=#rule-defs>§</a></h2> |
jackalmage@8571 | 2600 | |
jackalmage@8589 | 2601 | <p> The <a href=http://www.w3.org/TR/css3-values/>Values</a> spec defines how to specify a grammar for properties. |
jackalmage@8572 | 2602 | This section does the same, but for rules. |
jackalmage@8572 | 2603 | |
jackalmage@8589 | 2604 | <p> Just like in property grammars, |
jackalmage@8572 | 2605 | the notation <code><foo></code> refers to the "foo" grammar term, |
jackalmage@8572 | 2606 | assumed to be defined elsewhere. |
jackalmage@8572 | 2607 | Substituting the <code><foo></code> for its definition results in a semantically identical grammar. |
jackalmage@8572 | 2608 | |
jackalmage@8589 | 2609 | <p> Several types of tokens are written literally, without quotes: |
jackalmage@8589 | 2610 | |
jackalmage@8589 | 2611 | <p> <ul> |
jackalmage@8796 | 2612 | <li>〈ident〉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. |
simon@8752 | 2613 | <li>〈at-keyword〉s, which are written as an @ character followed by the token's value, like "@media". |
jackalmage@8589 | 2614 | <li>〈function〉s, which are written as the function name followed by a ( character, like "translate(". |
jackalmage@8589 | 2615 | <li>The 〈colon〉 (written as <code>:</code>), 〈comma〉 (written as <code>,</code>), 〈semicolon〉 (written as <code>;</code>), 〈(〉, 〈)〉, 〈{〉, and 〈}〉s. |
jackalmage@8589 | 2616 | </ul> |
jackalmage@8589 | 2617 | |
simon@8752 | 2618 | <p> Tokens match if their value is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match |
simon@8752 | 2619 | for the value defined in the grammar. |
simon@8752 | 2620 | |
simon@8752 | 2621 | <p class=note> |
simon@8752 | 2622 | Although it is possible, with <a href=#escaping0>escaping</a>, |
simon@8752 | 2623 | to construct an 〈ident〉 whose value starts with <code>@</code> or ends with <code>(</code>, |
simon@8752 | 2624 | such a tokens is not an 〈at-keyword〉 or a 〈function〉 |
simon@8752 | 2625 | and does not match corresponding grammar definitions. |
simon@8752 | 2626 | |
jackalmage@8589 | 2627 | <p> 〈delim〉s are written with their value enclosed in single quotes. |
jackalmage@8589 | 2628 | For example, a 〈delim〉 containing the "+" character is written as <code>'+'</code>. |
jackalmage@8589 | 2629 | Similarly, the 〈[〉 and 〈]〉s must be written in single quotes, |
jackalmage@8572 | 2630 | as they're used by the syntax of the grammar itself to group clauses. |
jackalmage@8589 | 2631 | 〈whitespace〉 is never indicated in the grammar; |
jackalmage@8589 | 2632 | 〈whitespace〉s are allowed before, after, and between any two tokens, |
jackalmage@8572 | 2633 | unless explicitly specified otherwise in prose definitions. |
jackalmage@8572 | 2634 | (For example, if the prelude of a rule is a selector, |
jackalmage@8572 | 2635 | whitespace is significant.) |
jackalmage@8572 | 2636 | |
jackalmage@8589 | 2637 | <p> When defining a function or a block, |
jackalmage@8572 | 2638 | the ending token must be specified in the grammar, |
jackalmage@8572 | 2639 | but if it's not present in the eventual token stream, |
jackalmage@8572 | 2640 | it still matches. |
jackalmage@8571 | 2641 | |
jackalmage@8589 | 2642 | <div class=example> |
jackalmage@8796 | 2643 | For example, the syntax of the <span class=css data-link-type=maybe>translateX()</span> function is: |
jackalmage@8796 | 2644 | |
jackalmage@8796 | 2645 | <pre>translateX( <a class=production data-link-type=type><var><translation-value></var></a> )</pre> |
jackalmage@8572 | 2646 | <p> However, the stylesheet may end with the function unclosed, like: |
jackalmage@8571 | 2647 | |
jackalmage@8589 | 2648 | <pre>.foo { transform: translate(50px</pre> |
jackalmage@8572 | 2649 | <p> The CSS parser parses this as a style rule containing one declaration, |
jackalmage@8572 | 2650 | whose value is a function named "translate". |
jackalmage@8572 | 2651 | This matches the above grammar, |
jackalmage@8572 | 2652 | even though the ending token didn't appear in the token stream, |
jackalmage@8572 | 2653 | because by the time the parser is finished, |
jackalmage@8572 | 2654 | the presence of the ending token is no longer possible to determine; |
jackalmage@8572 | 2655 | all you have is the fact that there's a block and a function. |
jackalmage@8589 | 2656 | </div> |
jackalmage@8589 | 2657 | |
simon@8739 | 2658 | <h3 data-level=7.1 id=declaration-rule-list><span class=secno>7.1 </span><span class=content> |
jackalmage@8796 | 2659 | Defining Block Contents: the <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a>, and <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a> productions</span><a class=section-link href=#declaration-rule-list>§</a></h3> |
jackalmage@8571 | 2660 | |
jackalmage@8572 | 2661 | <p> The CSS parser is agnostic as to the contents of blocks, |
jackalmage@8572 | 2662 | such as those that come at the end of some at-rules. |
jackalmage@8572 | 2663 | Defining the generic grammar of the blocks in terms of tokens is non-trivial, |
jackalmage@8572 | 2664 | but there are dedicated and unambiguous algorithms defined for parsing this. |
jackalmage@8572 | 2665 | |
jackalmage@8796 | 2666 | <p> The <dfn data-dfn-type=type id=typedef-declaration-list><declaration-list></dfn> production represents a list of declarations. |
jackalmage@8572 | 2667 | It may only be used in grammars as the sole value in a block, |
simon@8739 | 2668 | 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. |
simon@8739 | 2669 | |
jackalmage@8796 | 2670 | <p> Similarly, the <dfn data-dfn-type=type id=typedef-rule-list><rule-list></dfn> production represents a list of rules, |
jackalmage@8572 | 2671 | and may only be used in grammars as the sole value in a block. |
simon@8739 | 2672 | 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. |
simon@8739 | 2673 | |
jackalmage@8796 | 2674 | <p> Finally, the <dfn data-dfn-type=type id=typedef-stylesheet><stylesheet></dfn> production represents a list of rules. |
jackalmage@8796 | 2675 | It is identical to <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a>, |
jackalmage@8572 | 2676 | except that blocks using it default to accepting all rules |
jackalmage@8572 | 2677 | that aren't otherwise limited to a particular context. |
jackalmage@8571 | 2678 | |
jackalmage@8589 | 2679 | <div class=example> |
jackalmage@8796 | 2680 | 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, |
jackalmage@8571 | 2681 | and to contain a list of declarations. |
jackalmage@8571 | 2682 | This is expressed with the following grammar: |
jackalmage@8571 | 2683 | |
jackalmage@8796 | 2684 | <pre>@font-face { <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a> }</pre> |
jackalmage@8572 | 2685 | <p> This is a complete and sufficient definition of the rule's grammar. |
jackalmage@8572 | 2686 | |
jackalmage@8589 | 2687 | <p> For another example, |
jackalmage@8796 | 2688 | <span class=css data-link-type=maybe>@keyframes</span> rules are more complex, |
jackalmage@8572 | 2689 | interpreting their prelude as a name and containing keyframes rules in their block |
jackalmage@8572 | 2690 | Their grammar is: |
jackalmage@8571 | 2691 | |
jackalmage@8796 | 2692 | <pre>@keyframes <a class=production data-link-type=type><var><keyframes-name></var></a> { <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a> }</pre> </div> |
jackalmage@8796 | 2693 | |
jackalmage@8796 | 2694 | <p> For rules that use <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, |
jackalmage@8572 | 2695 | the spec for the rule must define which properties, descriptors, and/or at-rules are valid inside the rule; |
jackalmage@8572 | 2696 | this may be as simple as saying "The @foo rule accepts the properties/descriptors defined in this specification/section.", |
jackalmage@8572 | 2697 | and extension specs may simply say "The @foo rule additionally accepts the following properties/descriptors.". |
jackalmage@8572 | 2698 | Any declarations or at-rules found inside the block that are not defined as valid |
jackalmage@8572 | 2699 | must be removed from the rule's value. |
jackalmage@8572 | 2700 | |
jackalmage@8796 | 2701 | <p> Within a <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, |
jackalmage@8572 | 2702 | <code>!important</code> is automatically invalid on any descriptors. |
jackalmage@8572 | 2703 | If the rule accepts properties, |
jackalmage@8572 | 2704 | the spec for the rule must define whether the properties interact with the cascade, |
jackalmage@8572 | 2705 | and with what specificity. |
jackalmage@8598 | 2706 | If they don't interact with the cascade, |
jackalmage@8572 | 2707 | properties containing <code>!important</code> are automatically invalid; |
jackalmage@8572 | 2708 | otherwise using <code>!important</code> is valid and has its usual effect on the cascade origin of the property. |
jackalmage@8571 | 2709 | |
jackalmage@8589 | 2710 | <div class=example> |
jackalmage@8796 | 2711 | 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, |
jackalmage@8571 | 2712 | in addition to what is written there, |
jackalmage@8571 | 2713 | define that the allowed declarations are the descriptors defined in the Fonts spec. |
jackalmage@8571 | 2714 | </div> |
jackalmage@8571 | 2715 | |
jackalmage@8796 | 2716 | <p> For rules that use <a class=production data-link-type=type href=#typedef-rule-list><var><rule-list></var></a>, |
jackalmage@8572 | 2717 | the spec for the rule must define what types of rules are valid inside the rule, |
jackalmage@8796 | 2718 | same as <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a>, |
jackalmage@8572 | 2719 | and unrecognized rules must similarly be removed from the rule's value. |
jackalmage@8571 | 2720 | |
jackalmage@8589 | 2721 | <div class=example> |
jackalmage@8796 | 2722 | For example, the grammar for <span class=css data-link-type=maybe>@keyframes</span> in the previous example must, |
jackalmage@8571 | 2723 | in addition to what is written there, |
jackalmage@8796 | 2724 | define that the only allowed rules are <a class=production data-link-type=type><var><keyframe-rule></var></a>s, |
jackalmage@8571 | 2725 | which are defined as: |
jackalmage@8571 | 2726 | |
jackalmage@8796 | 2727 | <pre><a class=production data-link-type=type><var><keyframe-rule></var></a> = <a class=production data-link-type=type><var><keyframe-selector></var></a> { <a class=production data-link-type=type href=#typedef-declaration-list><var><declaration-list></var></a> }</pre> |
jackalmage@8572 | 2728 | <p> Keyframe rules, then, |
jackalmage@8572 | 2729 | must further define that they accept as declarations all animatable CSS properties, |
jackalmage@8796 | 2730 | 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, |
jackalmage@8572 | 2731 | but that they do not interact with the cascade. |
jackalmage@8589 | 2732 | </div> |
jackalmage@8571 | 2733 | |
jackalmage@8796 | 2734 | <p> For rules that use <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a>, |
jackalmage@8572 | 2735 | all rules are allowed by default, |
jackalmage@8572 | 2736 | but the spec for the rule may define what types of rules are <em>invalid</em> inside the rule. |
jackalmage@8571 | 2737 | |
jackalmage@8589 | 2738 | <div class=example> |
jackalmage@8796 | 2739 | For example, the <span class=css data-link-type=maybe>@media</span> rule accepts anything that can be placed in a stylesheet, |
jackalmage@8796 | 2740 | except more <span class=css data-link-type=maybe>@media</span> rules. |
jackalmage@8571 | 2741 | As such, its grammar is: |
jackalmage@8571 | 2742 | |
jackalmage@8796 | 2743 | <pre>@media <a class=production data-link-type=type><var><media-query-list></var></a> { <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a> }</pre> |
jackalmage@8796 | 2744 | <p> It additionally defines a restriction that the <a class=production data-link-type=type href=#typedef-stylesheet><var><stylesheet></var></a> can not contain <span class=css data-link-type=maybe>@media</span> rules, |
jackalmage@8572 | 2745 | which causes them to be dropped from the outer rule's value if they appear. |
jackalmage@8589 | 2746 | </div> |
jackalmage@8589 | 2747 | |
jackalmage@8589 | 2748 | |
jackalmage@8743 | 2749 | <h2 data-level=8 id=css-stylesheets><span class=secno>8 </span><span class=content> |
jackalmage@8743 | 2750 | CSS stylesheets</span><a class=section-link href=#css-stylesheets>§</a></h2> |
simon@8741 | 2751 | |
jackalmage@8744 | 2752 | <p> To parse a CSS stylesheet, |
jackalmage@8744 | 2753 | first <a href=#parse-a-stylesheet0>parse a stylesheet</a>. |
jackalmage@8744 | 2754 | Interpret all of the resulting top-level <a href=#qualified-rule>qualified rules</a> as <a href=#style-rule>style rules</a>, defined below. |
jackalmage@8744 | 2755 | |
jackalmage@8744 | 2756 | <p> If any style rule is invalid, |
jackalmage@8744 | 2757 | or any at-rule is not recognized or is invalid according to its grammar or context, |
jackalmage@8744 | 2758 | it's a <a href=#parse-errors>parse error</a>. |
jackalmage@8744 | 2759 | Discard that rule. |
simon@8741 | 2760 | |
jackalmage@8743 | 2761 | <h3 data-level=8.1 id=style-rules><span class=secno>8.1 </span><span class=content> |
jackalmage@8743 | 2762 | Style rules</span><a class=section-link href=#style-rules>§</a></h3> |
simon@8741 | 2763 | |
jackalmage@8796 | 2764 | <p> A <dfn data-dfn-type=dfn id=style-rule>style rule</dfn> is a <a href=#qualified-rule>qualified rule</a> |
jackalmage@8796 | 2765 | 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> |
jackalmage@8744 | 2766 | with a list of property declarations. |
jackalmage@8744 | 2767 | They are also called |
jackalmage@8796 | 2768 | <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>. |
jackalmage@8796 | 2769 | 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. |
jackalmage@8744 | 2770 | |
jackalmage@8744 | 2771 | <p> The prelude of the qualified rule is parsed as a |
jackalmage@8744 | 2772 | <a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a>. |
simon@8750 | 2773 | If this results in an <a href=http://dev.w3.org/csswg/selectors4/#invalid>invalid selector list</a>, |
jackalmage@8744 | 2774 | the entire style rule is invalid. |
jackalmage@8744 | 2775 | |
jackalmage@8744 | 2776 | <p> The content of the qualified rule’s block is parsed as a |
jackalmage@8744 | 2777 | <a href=#parse-a-list-of-declarations0 title="parse a list of declarations">list of declarations</a>. |
jackalmage@8744 | 2778 | Unless defined otherwise by another specification or a future level of this specification, |
jackalmage@8744 | 2779 | at-rules in that list are invalid |
jackalmage@8744 | 2780 | and must be ignored. |
jackalmage@8744 | 2781 | Declaration for an unknown CSS property |
jackalmage@8744 | 2782 | or whose value does not match the syntax defined by the property are invalid |
jackalmage@8744 | 2783 | and must be ignored. |
jackalmage@8744 | 2784 | The validity of the style rule’s contents have no effect on the validity of the style rule itself. |
jackalmage@8744 | 2785 | Unless otherwise specified, property names are <a href=#ascii-case-insensitive>ASCII case-insensitive</a>. |
jackalmage@8744 | 2786 | |
jackalmage@8797 | 2787 | <p> If a <a href=#style-rule>style rule</a> contains multiple declarations with the same name, |
jackalmage@8797 | 2788 | all but the last such declaration are discarded. |
jackalmage@8797 | 2789 | |
jackalmage@8796 | 2790 | <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. |
jackalmage@8744 | 2791 | |
jackalmage@8744 | 2792 | <p> <a href=#qualified-rule>Qualified rules</a> at the top-level of a CSS stylesheet are style rules. |
jackalmage@8744 | 2793 | Qualified rules in other contexts may or may not be style rules, |
jackalmage@8744 | 2794 | as defined by the context. |
simon@8741 | 2795 | |
simon@8741 | 2796 | <p class=example> |
jackalmage@8796 | 2797 | 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, |
jackalmage@8796 | 2798 | 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>. |
jackalmage@8744 | 2799 | |
jackalmage@8744 | 2800 | <h3 data-level=8.2 id=the-charset-rule><span class=secno>8.2 </span><span class=content> |
jackalmage@8796 | 2801 | The <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> Rule</span><a class=section-link href=#the-charset-rule>§</a></h3> |
jackalmage@8796 | 2802 | |
jackalmage@8796 | 2803 | <p> The <dfn data-dfn-type=at-rule id=at-ruledef-charset><a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a></dfn> rule is a very special <a href=#at-rule>at-rule</a> associated with determining the character encoding of the stylesheet. |
jackalmage@8744 | 2804 | In general, its grammar is: |
jackalmage@8744 | 2805 | |
jackalmage@8796 | 2806 | <pre class=prod><dfn data-dfn-type=type id=typedef-at-charset-rule><at-charset-rule></dfn> = @charset <a class=production data-link-type=type><var><string></var></a>;</pre> |
jackalmage@8796 | 2807 | <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, |
simon@8750 | 2808 | or if it is not the very first rule of a stylesheet. |
jackalmage@8744 | 2809 | |
jackalmage@8796 | 2810 | <p> <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules have an <dfn data-dfn-type=dfn id=encoding>encoding</dfn>, |
jackalmage@8796 | 2811 | given by the value of the <a class=production data-link-type=type><var><string></var></a>. |
jackalmage@8796 | 2812 | |
jackalmage@8796 | 2813 | <p> The <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule has <strong>no effect on a stylesheet</strong>. |
jackalmage@8744 | 2814 | |
jackalmage@8744 | 2815 | <p class=note> Note: However, the algorithm to <a href=#determine-the-fallback-encoding>determine the fallback encoding</a> |
jackalmage@8744 | 2816 | looks at the first several bytes of the stylesheet |
jackalmage@8744 | 2817 | to see if they're a match for the ASCII characters <code>@charset "XXX";</code>, |
jackalmage@8744 | 2818 | where XXX is a sequence of bytes other than 22 (ASCII for <code>"</code>). |
jackalmage@8796 | 2819 | While this resembles an <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rule, |
jackalmage@8744 | 2820 | it's not actually the same thing. |
jackalmage@8744 | 2821 | For example, the necessary sequence of bytes will spell out something entirely different |
jackalmage@8744 | 2822 | if the stylesheet is in an encoding that's not ASCII-compatible, |
jackalmage@8744 | 2823 | such as UTF-16. |
jackalmage@8744 | 2824 | |
simon@8741 | 2825 | |
simon@8741 | 2826 | |
jackalmage@8743 | 2827 | <h2 data-level=9 id=serialization><span class=secno>9 </span><span class=content> |
jackalmage@8743 | 2828 | Serialization</span><a class=section-link href=#serialization>§</a></h2> |
jackalmage@8571 | 2829 | |
jackalmage@8572 | 2830 | <p> This specification does not define how to serialize CSS in general, |
jackalmage@8572 | 2831 | leaving that task to the CSSOM and individual feature specifications. |
jackalmage@8572 | 2832 | However, there is one important facet that must be specified here regarding comments, |
jackalmage@8572 | 2833 | to ensure accurate "round-tripping" of data from text to CSS objects and back. |
jackalmage@8572 | 2834 | |
jackalmage@8589 | 2835 | <p> The tokenizer described in this specification does not produce tokens for comments, |
jackalmage@8572 | 2836 | or otherwise preserve them in any way. |
jackalmage@8572 | 2837 | Implementations may preserve the contents of comments and their location in the token stream. |
jackalmage@8572 | 2838 | If they do, this preserved information must have no effect on the parsing step, |
jackalmage@8572 | 2839 | but must be serialized in its position as |
jackalmage@8572 | 2840 | "/*" |
jackalmage@8572 | 2841 | followed by its contents |
jackalmage@8572 | 2842 | followed by "*/". |
jackalmage@8572 | 2843 | |
jackalmage@8589 | 2844 | <p> If the implementation does not preserve comments, |
jackalmage@8572 | 2845 | it must insert the text "/**/" between the serialization of adjacent tokens |
jackalmage@8572 | 2846 | when the two tokens are of the following pairs: |
jackalmage@8571 | 2847 | |
jackalmage@8589 | 2848 | <p> <ul> |
jackalmage@8571 | 2849 | <li> |
jackalmage@8589 | 2850 | a 〈hash〉 or 〈at-keyword〉 followed by a 〈number〉, 〈percentage〉, 〈ident〉, 〈dimension〉, 〈unicode-range〉, 〈url〉, or a 〈function〉 token; |
jackalmage@8589 | 2851 | |
jackalmage@8589 | 2852 | <li> |
jackalmage@8589 | 2853 | 〈number〉s, 〈ident〉s, and 〈dimension〉s in any combination; |
jackalmage@8589 | 2854 | |
jackalmage@8589 | 2855 | <li> |
jackalmage@8589 | 2856 | a 〈number〉, 〈ident〉, or 〈dimension〉 followed by a 〈percentage〉, 〈unicode-range〉, 〈url〉, or 〈function〉; |
jackalmage@8589 | 2857 | |
jackalmage@8589 | 2858 | <li> |
jackalmage@8589 | 2859 | an 〈ident〉 followed by a 〈(〉; |
jackalmage@8589 | 2860 | |
jackalmage@8589 | 2861 | <li> |
jackalmage@8589 | 2862 | a 〈delim〉 containing "#" or "@" followed by any token except 〈whitespace〉; |
jackalmage@8589 | 2863 | |
jackalmage@8589 | 2864 | <li> |
jackalmage@8589 | 2865 | a 〈delim〉 containing "-", "+", ".", "<", ">", or "!" following or followed by any token except 〈whitespace〉; |
jackalmage@8589 | 2866 | |
jackalmage@8589 | 2867 | <li> |
jackalmage@8589 | 2868 | a 〈delim〉 containing "/" following or followed by a 〈delim〉 containing "*". |
jackalmage@8589 | 2869 | </ul> |
jackalmage@8589 | 2870 | |
jackalmage@8589 | 2871 | <p class=note> Note: The preceding pairs of tokens can only be adjacent due to comments in the original text, |
jackalmage@8572 | 2872 | so the above rule reinserts the minimum number of comments into the serialized text to ensure an accurate round-trip. |
jackalmage@8589 | 2873 | (Roughly. The 〈delim〉 rules are slightly too powerful, for simplicity.) |
jackalmage@8589 | 2874 | |
simon@8741 | 2875 | <h3 data-level=9.1 id=serializing-anb><span class=secno>9.1 </span><span class=content> |
simon@8739 | 2876 | Serializing <var><an+b></var></span><a class=section-link href=#serializing-anb>§</a></h3> |
jackalmage@8572 | 2877 | |
jackalmage@8572 | 2878 | <p> To serialize an <var><an+b></var> value, |
jackalmage@8572 | 2879 | let <var>s</var> initially be the empty string: |
jackalmage@8571 | 2880 | |
jackalmage@8589 | 2881 | <dl> |
jackalmage@8571 | 2882 | <dt><var>A</var> and <var>B</var> are both zero |
jackalmage@8589 | 2883 | <dd> |
jackalmage@8571 | 2884 | Append "0" to <var>s</var>. |
jackalmage@8571 | 2885 | |
jackalmage@8589 | 2886 | <dt><var>A</var> is zero, <var>B</var> is non-zero |
jackalmage@8589 | 2887 | <dd> |
jackalmage@8571 | 2888 | Serialize <var>B</var> and append it to <var>s</var>. |
jackalmage@8571 | 2889 | |
jackalmage@8589 | 2890 | <dt><var>A</var> is non-zero, <var>B</var> is zero |
jackalmage@8589 | 2891 | <dd> |
jackalmage@8571 | 2892 | Serialize <var>A</var> and append it to <var>s</var>. |
jackalmage@8571 | 2893 | Append "n" to <var>s</var>. |
jackalmage@8571 | 2894 | |
jackalmage@8589 | 2895 | <dt><var>A</var> and <var>B</var> are both non-zero |
jackalmage@8589 | 2896 | <dd> |
jackalmage@8571 | 2897 | Serialize <var>A</var> and append it to <var>s</var>. |
jackalmage@8571 | 2898 | Append "n" to <var>s</var>. |
jackalmage@8571 | 2899 | If <var>B</var> is positive, |
jackalmage@8571 | 2900 | append "+" to <var>s</var> |
jackalmage@8571 | 2901 | Serialize <var>B</var> and append it to <var>s</var>. |
jackalmage@8589 | 2902 | </dl> |
jackalmage@8571 | 2903 | |
jackalmage@8572 | 2904 | <p> Return <var>s</var>. |
jackalmage@8571 | 2905 | |
simon@8741 | 2906 | <h2 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=section-link href=#changes>§</a></h2> |
jackalmage@8571 | 2907 | |
jackalmage@8572 | 2908 | <p> <em>This section is non-normative.</em> |
jackalmage@8572 | 2909 | |
jackalmage@8589 | 2910 | <p class=note> Note: The point of this spec is to match reality; |
jackalmage@8572 | 2911 | changes from CSS2.1 are nearly always because CSS 2.1 specified something that doesn't match actual browser behavior, |
jackalmage@8572 | 2912 | or left something unspecified. |
jackalmage@8572 | 2913 | If some detail doesn't match browsers, |
jackalmage@8572 | 2914 | please let me know |
jackalmage@8572 | 2915 | as it's almost certainly unintentional. |
jackalmage@8572 | 2916 | |
jackalmage@8589 | 2917 | <p> Changes in decoding from a byte stream: |
jackalmage@8589 | 2918 | |
jackalmage@8589 | 2919 | <p> <ul> |
jackalmage@8571 | 2920 | <li> |
jackalmage@8796 | 2921 | Only detect <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules in ASCII-compatible byte patterns. |
jackalmage@8589 | 2922 | |
jackalmage@8589 | 2923 | <li> |
jackalmage@8796 | 2924 | Ignore <a class=css data-link-type=maybe href=#at-ruledef-charset>@charset</a> rules that specify an ASCII-incompatible encoding, |
jackalmage@8571 | 2925 | as that would cause the rule itself to not decode properly. |
jackalmage@8571 | 2926 | |
jackalmage@8589 | 2927 | <li> |
jackalmage@8589 | 2928 | Refer to the the <a href=http://encoding.spec.whatwg.org/>Encoding Standard</a> |
jackalmage@8571 | 2929 | rather than the IANA registery for character encodings. |
jackalmage@8571 | 2930 | |
jackalmage@8589 | 2931 | </ul> |
jackalmage@8571 | 2932 | |
jackalmage@8572 | 2933 | <p> Tokenization changes: |
jackalmage@8571 | 2934 | |
jackalmage@8589 | 2935 | <p> <ul> |
jackalmage@8571 | 2936 | <li> |
jackalmage@8571 | 2937 | Any U+0000 NULL character in the CSS source is replaced with U+FFFD REPLACEMENT CHARACTER. |
jackalmage@8571 | 2938 | |
jackalmage@8589 | 2939 | <li> |
jackalmage@8796 | 2940 | Any hexadecimal escape sequence such as <span class=css data-link-type=maybe>\0</span> that evaluate to zero |
jackalmage@8571 | 2941 | produce U+FFFD REPLACEMENT CHARACTER rather than U+0000 NULL. |
jackalmage@8571 | 2942 | <!-- |
simon@8323 | 2943 | This covers a security issue: |
simon@8323 | 2944 | https://bugzilla.mozilla.org/show_bug.cgi?id=228856 |
simon@8323 | 2945 | --> |
jackalmage@8572 | 2946 | |
jackalmage@8589 | 2947 | <li> |
simon@8739 | 2948 | The definition of <a href=#non-ascii-character>non-ASCII character</a> was changed |
jackalmage@8571 | 2949 | to be consistent with every definition of ASCII. |
jackalmage@8598 | 2950 | This affects characters U+0080 to U+009F, |
simon@8739 | 2951 | which are now <a href=#name-character>name characters</a> rather than 〈delim〉s, |
simon@8739 | 2952 | like the rest of <a href=#non-ascii-character>non-ASCII characters</a>. |
jackalmage@8589 | 2953 | |
jackalmage@8589 | 2954 | <li> |
jackalmage@8571 | 2955 | Tokenization does not emit COMMENT or BAD_COMMENT tokens anymore. |
jackalmage@8571 | 2956 | BAD_COMMENT is now considered the same as normal token (not an error.) |
jackalmage@8598 | 2957 | <a href=#serialization>Serialization</a> is responsible |
jackalmage@8571 | 2958 | for inserting comments as necessary between tokens that need to be separated, |
jackalmage@8589 | 2959 | e.g. two consecutive 〈ident〉s. |
jackalmage@8589 | 2960 | |
jackalmage@8589 | 2961 | <li> |
jackalmage@8589 | 2962 | The 〈unicode-range〉 token is now more restrictive. |
jackalmage@8589 | 2963 | <span class=issue>Should it? I can’t find a case where this change is even testable.</span> |
jackalmage@8589 | 2964 | <span class=issue>Align the definition with the Fonts spec.</span> |
jackalmage@8589 | 2965 | |
jackalmage@8589 | 2966 | <li> |
jackalmage@8589 | 2967 | Apply the <a href=http://www.w3.org/TR/CSS21/syndata.html#unexpected-eof>EOF error handling rule</a> in the tokenizer |
jackalmage@8589 | 2968 | and emit normal 〈string〉 and 〈url〉 tokens rather than BAD_STRING or BAD_URI |
jackalmage@8571 | 2969 | on EOF. |
jackalmage@8571 | 2970 | |
jackalmage@8589 | 2971 | <li> |
jackalmage@8589 | 2972 | The 〈prefix-match〉, 〈suffix-match〉, and 〈substring-match〉 tokens have been imported from Selectors 3. |
jackalmage@8589 | 2973 | |
jackalmage@8589 | 2974 | <li> |
jackalmage@8589 | 2975 | The BAD_URI token (now 〈bad-url〉) is "self-contained". |
jackalmage@8589 | 2976 | In other words, once the tokenizer realizes it's in a 〈bad-url〉 rather than a 〈url〉, |
jackalmage@8571 | 2977 | it just seeks forward to look for the closing ), |
jackalmage@8571 | 2978 | ignoring everything else. |
jackalmage@8589 | 2979 | This behavior is simpler than treating it like a 〈function〉 |
jackalmage@8571 | 2980 | and paying attention to opened blocks and such. |
jackalmage@8571 | 2981 | Only WebKit exhibits this behavior, |
jackalmage@8571 | 2982 | but it doesn't appear that we've gotten any compat bugs from it. |
jackalmage@8571 | 2983 | |
jackalmage@8589 | 2984 | <li> |
jackalmage@8589 | 2985 | The 〈comma〉 has been added. |
jackalmage@8589 | 2986 | |
jackalmage@8589 | 2987 | <li> |
jackalmage@8589 | 2988 | The 〈number〉, 〈number〉, and 〈dimension〉 tokens have been changed |
jackalmage@8571 | 2989 | to include the preceding +/- sign as part of their value |
jackalmage@8589 | 2990 | (rather than as a separate 〈delim〉 that needs to be manually handled every time the token is mentioned in other specs). |
jackalmage@8571 | 2991 | The only consequence of this is that comments can no longer be inserted between the sign and the number. |
jackalmage@8571 | 2992 | |
jackalmage@8589 | 2993 | <li> |
jackalmage@8571 | 2994 | Scientific notation is supported for numbers/percentages/dimensions to match SVG, |
jackalmage@8571 | 2995 | per WG resolution. |
jackalmage@8571 | 2996 | |
jackalmage@8589 | 2997 | <li> |
jackalmage@8589 | 2998 | 〈column〉 has been added, |
jackalmage@8571 | 2999 | to keep Selectors parsing in single-token lookahead. |
jackalmage@8571 | 3000 | |
jackalmage@8589 | 3001 | </ul> |
jackalmage@8571 | 3002 | |
jackalmage@8572 | 3003 | <p> Parsing changes: |
jackalmage@8571 | 3004 | |
jackalmage@8589 | 3005 | <p> <ul> |
jackalmage@8571 | 3006 | <li> |
jackalmage@8796 | 3007 | Any list of declaration now also accepts at-rules, like <span class=css data-link-type=maybe>@page</span>, |
jackalmage@8571 | 3008 | per WG resolution. |
jackalmage@8598 | 3009 | This makes a difference in error handling |
jackalmage@8571 | 3010 | even if no such at-rules are defined yet: |
jackalmage@8571 | 3011 | an at-rule, valid or not, ends and lets the next declaration being |
jackalmage@8589 | 3012 | at a {} block without a 〈semicolon〉. |
jackalmage@8589 | 3013 | |
jackalmage@8589 | 3014 | <li> |
jackalmage@8571 | 3015 | The handling of some miscellanous "special" tokens |
jackalmage@8589 | 3016 | (like an unmatched 〈}〉) |
jackalmage@8571 | 3017 | showing up in various places in the grammar |
jackalmage@8571 | 3018 | has been specified with some reasonable behavior shown by at least one browser. |
jackalmage@8571 | 3019 | Previously, stylesheets with those tokens in those places just didn't match the stylesheet grammar at all, |
jackalmage@8571 | 3020 | so their handling was totally undefined. |
jackalmage@8571 | 3021 | Specifically: |
jackalmage@8571 | 3022 | |
jackalmage@8589 | 3023 | <p> <ul> |
jackalmage@8571 | 3024 | <li> |
jackalmage@8589 | 3025 | [] blocks, () blocks and functions can now contain {} blocks, 〈at-keyword〉s or 〈semicolon〉s |
jackalmage@8589 | 3026 | |
jackalmage@8589 | 3027 | <li> |
jackalmage@8571 | 3028 | Qualified rule preludes can now contain semicolons |
jackalmage@8571 | 3029 | |
jackalmage@8589 | 3030 | <li> |
jackalmage@8589 | 3031 | Qualified rule and at-rule preludes can now contain 〈at-keyword〉s |
jackalmage@8589 | 3032 | </ul> |
jackalmage@8589 | 3033 | |
jackalmage@8589 | 3034 | </ul> |
jackalmage@8589 | 3035 | |
jackalmage@8796 | 3036 | <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>: |
jackalmage@8589 | 3037 | |
jackalmage@8589 | 3038 | <p> <ul> |
jackalmage@8571 | 3039 | <li> |
jackalmage@8571 | 3040 | The <var>An+B</var> microsyntax has now been formally defined in terms of CSS tokens, |
jackalmage@8571 | 3041 | rather than with a separate tokenizer. |
jackalmage@8571 | 3042 | This has resulted in minor differences: |
jackalmage@8571 | 3043 | |
jackalmage@8589 | 3044 | <p> <ul> |
jackalmage@8571 | 3045 | <li> |
jackalmage@8571 | 3046 | In some cases, "-" characters or digits can be escaped |
jackalmage@8589 | 3047 | (when they appear as part of the unit of a 〈dimension〉 or 〈ident〉). |
jackalmage@8589 | 3048 | </ul> |
jackalmage@8589 | 3049 | </ul> |
jackalmage@8589 | 3050 | |
simon@8739 | 3051 | <h2 class=no-num id=acknowledgments><span class=content> |
simon@8739 | 3052 | Acknowledgments</span><a class=section-link href=#acknowledgments>§</a></h2> |
simon@8597 | 3053 | |
simon@8597 | 3054 | <p> |
simon@8597 | 3055 | Thanks for feedback and contributions from |
simon@8597 | 3056 | David Baron, |
simon@8604 | 3057 | 呂康豪 (Kang-Hao Lu), |
simon@8604 | 3058 | and Marc O'Morain. |
simon@8597 | 3059 | |
simon@8739 | 3060 | <h2 class="no-ref no-num" id=conformance><span class=content> |
simon@8739 | 3061 | Conformance</span><a class=section-link href=#conformance>§</a></h2> |
simon@8739 | 3062 | |
simon@8739 | 3063 | <h3 class=no-ref id=conventions><span class=content> |
simon@8739 | 3064 | Document conventions</span><a class=section-link href=#conventions>§</a></h3> |
jackalmage@8571 | 3065 | |
jackalmage@8571 | 3066 | <p>Conformance requirements are expressed with a combination of |
jackalmage@8571 | 3067 | descriptive assertions and RFC 2119 terminology. The key words "MUST", |
jackalmage@8571 | 3068 | "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", |
jackalmage@8571 | 3069 | "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this |
jackalmage@8571 | 3070 | document are to be interpreted as described in RFC 2119. |
jackalmage@8571 | 3071 | However, for readability, these words do not appear in all uppercase |
jackalmage@8571 | 3072 | letters in this specification. |
jackalmage@8571 | 3073 | |
jackalmage@8589 | 3074 | <p>All of the text of this specification is normative except sections |
jackalmage@8796 | 3075 | explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=RFC2119>[RFC2119]</a></p> |
jackalmage@8571 | 3076 | |
jackalmage@8571 | 3077 | <p>Examples in this specification are introduced with the words "for example" |
jackalmage@8571 | 3078 | or are set apart from the normative text with <code>class="example"</code>, |
jackalmage@8571 | 3079 | like this: |
jackalmage@8571 | 3080 | |
jackalmage@8589 | 3081 | <div class=example> |
jackalmage@8571 | 3082 | <p>This is an example of an informative example.</p> |
jackalmage@8571 | 3083 | </div> |
jackalmage@8571 | 3084 | |
jackalmage@8571 | 3085 | <p>Informative notes begin with the word "Note" and are set apart from the |
jackalmage@8571 | 3086 | normative text with <code>class="note"</code>, like this: |
jackalmage@8571 | 3087 | |
jackalmage@8589 | 3088 | <p class=note>Note, this is an informative note.</p> |
jackalmage@8589 | 3089 | |
simon@8739 | 3090 | <h3 class=no-ref id=conformance-classes><span class=content> |
simon@8739 | 3091 | Conformance classes</span><a class=section-link href=#conformance-classes>§</a></h3> |
jackalmage@8571 | 3092 | |
jackalmage@8571 | 3093 | <p>Conformance to this specification |
jackalmage@8571 | 3094 | is defined for three conformance classes: |
jackalmage@8589 | 3095 | <dl> |
jackalmage@8571 | 3096 | <dt>style sheet |
jackalmage@8589 | 3097 | <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS |
jackalmage@8571 | 3098 | style sheet</a>. |
jackalmage@8589 | 3099 | <dt>renderer |
jackalmage@8589 | 3100 | <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> |
jackalmage@8571 | 3101 | that interprets the semantics of a style sheet and renders |
jackalmage@8571 | 3102 | documents that use them. |
jackalmage@8589 | 3103 | <dt>authoring tool |
jackalmage@8589 | 3104 | <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> |
jackalmage@8571 | 3105 | that writes a style sheet. |
jackalmage@8589 | 3106 | </dl> |
jackalmage@8571 | 3107 | |
jackalmage@8571 | 3108 | <p>A style sheet is conformant to this specification |
jackalmage@8571 | 3109 | if all of its statements that use syntax defined in this module are valid |
jackalmage@8571 | 3110 | according to the generic CSS grammar and the individual grammars of each |
jackalmage@8571 | 3111 | feature defined in this module. |
jackalmage@8571 | 3112 | |
jackalmage@8589 | 3113 | <p>A renderer is conformant to this specification |
jackalmage@8571 | 3114 | if, in addition to interpreting the style sheet as defined by the |
jackalmage@8571 | 3115 | appropriate specifications, it supports all the features defined |
jackalmage@8571 | 3116 | by this specification by parsing them correctly |
jackalmage@8571 | 3117 | and rendering the document accordingly. However, the inability of a |
jackalmage@8571 | 3118 | UA to correctly render a document due to limitations of the device |
jackalmage@8571 | 3119 | does not make the UA non-conformant. (For example, a UA is not |
jackalmage@8571 | 3120 | required to render color on a monochrome monitor.) |
jackalmage@8571 | 3121 | |
jackalmage@8589 | 3122 | <p>An authoring tool is conformant to this specification |
jackalmage@8571 | 3123 | if it writes style sheets that are syntactically correct according to the |
jackalmage@8571 | 3124 | generic CSS grammar and the individual grammars of each feature in |
jackalmage@8571 | 3125 | this module, and meet all other conformance requirements of style sheets |
jackalmage@8571 | 3126 | as described in this module. |
jackalmage@8571 | 3127 | |
simon@8739 | 3128 | <h3 class=no-ref id=partial><span class=content> |
simon@8739 | 3129 | Partial implementations</span><a class=section-link href=#partial>§</a></h3> |
jackalmage@8571 | 3130 | |
jackalmage@8571 | 3131 | <p>So that authors can exploit the forward-compatible parsing rules to |
jackalmage@8571 | 3132 | assign fallback values, CSS renderers <strong>must</strong> |
jackalmage@8589 | 3133 | treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore |
jackalmage@8571 | 3134 | as appropriate</a>) any at-rules, properties, property values, keywords, |
jackalmage@8571 | 3135 | and other syntactic constructs for which they have no usable level of |
jackalmage@8571 | 3136 | support. In particular, user agents <strong>must not</strong> selectively |
jackalmage@8571 | 3137 | ignore unsupported component values and honor supported values in a single |
jackalmage@8571 | 3138 | multi-value property declaration: if any value is considered invalid |
jackalmage@8571 | 3139 | (as unsupported values must be), CSS requires that the entire declaration |
jackalmage@8571 | 3140 | be ignored.</p> |
jackalmage@8571 | 3141 | |
simon@8739 | 3142 | <h3 class=no-ref id=experimental><span class=content> |
simon@8739 | 3143 | Experimental implementations</span><a class=section-link href=#experimental>§</a></h3> |
jackalmage@8571 | 3144 | |
jackalmage@8571 | 3145 | <p>To avoid clashes with future CSS features, the CSS2.1 specification |
jackalmage@8589 | 3146 | reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed |
jackalmage@8571 | 3147 | syntax</a> for proprietary and experimental extensions to CSS. |
jackalmage@8571 | 3148 | |
jackalmage@8589 | 3149 | <p>Prior to a specification reaching the Candidate Recommendation stage |
jackalmage@8571 | 3150 | in the W3C process, all implementations of a CSS feature are considered |
jackalmage@8571 | 3151 | experimental. The CSS Working Group recommends that implementations |
jackalmage@8571 | 3152 | use a vendor-prefixed syntax for such features, including those in |
jackalmage@8571 | 3153 | W3C Working Drafts. This avoids incompatibilities with future changes |
jackalmage@8571 | 3154 | in the draft. |
jackalmage@8571 | 3155 | </p> |
jackalmage@8571 | 3156 | |
simon@8739 | 3157 | <h3 class=no-ref id=testing><span class=content> |
simon@8739 | 3158 | Non-experimental implementations</span><a class=section-link href=#testing>§</a></h3> |
jackalmage@8571 | 3159 | |
jackalmage@8571 | 3160 | <p>Once a specification reaches the Candidate Recommendation stage, |
jackalmage@8571 | 3161 | non-experimental implementations are possible, and implementors should |
jackalmage@8571 | 3162 | release an unprefixed implementation of any CR-level feature they |
jackalmage@8571 | 3163 | can demonstrate to be correctly implemented according to spec. |
jackalmage@8571 | 3164 | |
jackalmage@8589 | 3165 | <p>To establish and maintain the interoperability of CSS across |
jackalmage@8571 | 3166 | implementations, the CSS Working Group requests that non-experimental |
jackalmage@8571 | 3167 | CSS renderers submit an implementation report (and, if necessary, the |
jackalmage@8571 | 3168 | testcases used for that implementation report) to the W3C before |
jackalmage@8571 | 3169 | releasing an unprefixed implementation of any CSS features. Testcases |
jackalmage@8571 | 3170 | submitted to W3C are subject to review and correction by the CSS |
jackalmage@8571 | 3171 | Working Group. |
jackalmage@8571 | 3172 | |
jackalmage@8589 | 3173 | <p>Further information on submitting testcases and implementation reports |
jackalmage@8571 | 3174 | can be found from on the CSS Working Group's website at |
jackalmage@8589 | 3175 | <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>. |
jackalmage@8571 | 3176 | Questions should be directed to the |
jackalmage@8589 | 3177 | <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a> |
jackalmage@8571 | 3178 | mailing list. |
jackalmage@8571 | 3179 | |
simon@8739 | 3180 | <h2 class="no-num no-ref" id=references><span class=content> |
simon@8739 | 3181 | References</span><a class=section-link href=#references>§</a></h2> |
simon@8739 | 3182 | |
simon@8739 | 3183 | <h3 class="no-num no-ref" id=normative><span class=content> |
simon@8739 | 3184 | Normative References</span><a class=section-link href=#normative>§</a></h3> |
simon@8741 | 3185 | <div data-fill-with=normative-references><dl><dt id=css21 title=CSS21>[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>[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>[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>[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> |
jackalmage@8600 | 3186 | |
simon@8739 | 3187 | <h3 class="no-num no-ref" id=informative><span class=content> |
simon@8739 | 3188 | Informative References</span><a class=section-link href=#informative>§</a></h3> |
jackalmage@8744 | 3189 | <div data-fill-with=informative-references><dl><dt id=css-variables title=CSS-VARIABLES>[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>[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>[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=mediaq title=MEDIAQ>[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> |
jackalmage@8600 | 3190 | |
simon@8739 | 3191 | <h2 class="no-num no-ref" id=index><span class=content> |
simon@8739 | 3192 | Index</span><a class=section-link href=#index>§</a></h2> |
simon@8739 | 3193 | <div data-fill-with=index><ul class=indexlist> |
simon@8739 | 3194 | <li>A, <a href=#a title="section 6">6</a> |
simon@8739 | 3195 | <li>An+B, <a href=#anb0 title="section 6">6</a> |
simon@8739 | 3196 | <li><an+b>, <a href=#anb-production title="section 6.2">6.2</a> |
simon@8739 | 3197 | <li>are a valid escape, <a href=#check-if-two-characters-are-a-valid-escape0 title="section 4.3.8">4.3.8</a> |
simon@8739 | 3198 | <li>ASCII case-insensitive, <a href=#ascii-case-insensitive title="section 5.2">5.2</a> |
jackalmage@8796 | 3199 | <li><at-charset-rule>, <a href=#typedef-at-charset-rule title="section 8.2">8.2</a> |
simon@8739 | 3200 | <li>at-rule, <a href=#at-rule title="section 5">5</a> |
simon@8739 | 3201 | <li>B, <a href=#b title="section 6">6</a> |
jackalmage@8796 | 3202 | <li>@charset, <a href=#at-ruledef-charset title="section 8.2">8.2</a> |
simon@8739 | 3203 | <li>check if three characters would start an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a> |
simon@8739 | 3204 | <li>check if three characters would start a number, <a href=#check-if-three-characters-would-start-a-number0 title="section 4.3.10">4.3.10</a> |
simon@8739 | 3205 | <li>check if two characters are a valid escape, <a href=#check-if-two-characters-are-a-valid-escape0 title="section 4.3.8">4.3.8</a> |
simon@8739 | 3206 | <li>component value, <a href=#component-value title="section 5">5</a> |
simon@8739 | 3207 | <li>Consume a component value, <a href=#consume-a-component-value0 title="section 5.4.6">5.4.6</a> |
simon@8739 | 3208 | <li>Consume a declaration, <a href=#consume-a-declaration0 title="section 5.4.5">5.4.5</a> |
simon@8739 | 3209 | <li>Consume a function, <a href=#consume-a-function0 title="section 5.4.8">5.4.8</a> |
simon@8739 | 3210 | <li>Consume a list of declarations, <a href=#consume-a-list-of-declarations0 title="section 5.4.4">5.4.4</a> |
simon@8739 | 3211 | <li>Consume a list of rules, <a href=#consume-a-list-of-rules0 title="section 5.4.1">5.4.1</a> |
simon@8739 | 3212 | <li>Consume a name, <a href=#consume-a-name0 title="section 4.3.11">4.3.11</a> |
simon@8739 | 3213 | <li>Consume an at-rule, <a href=#consume-an-at-rule0 title="section 5.4.2">5.4.2</a> |
simon@8739 | 3214 | <li>Consume an escaped character, <a href=#consume-an-escaped-character0 title="section 4.3.7">4.3.7</a> |
simon@8739 | 3215 | <li>Consume an ident-like token, <a href=#consume-an-ident-like-token0 title="section 4.3.3">4.3.3</a> |
simon@8739 | 3216 | <li>Consume a number, <a href=#consume-a-number0 title="section 4.3.12">4.3.12</a> |
simon@8739 | 3217 | <li>Consume a numeric token, <a href=#consume-a-numeric-token0 title="section 4.3.2">4.3.2</a> |
simon@8739 | 3218 | <li>Consume a qualified rule, <a href=#consume-a-qualified-rule0 title="section 5.4.3">5.4.3</a> |
simon@8739 | 3219 | <li>Consume a simple block, <a href=#consume-a-simple-block0 title="section 5.4.7">5.4.7</a> |
simon@8739 | 3220 | <li>Consume a string token, <a href=#consume-a-string-token0 title="section 4.3.4">4.3.4</a> |
simon@8739 | 3221 | <li>Consume a token, <a href=#consume-a-token0 title="section 4.3.1">4.3.1</a> |
simon@8739 | 3222 | <li>Consume a unicode-range token, <a href=#consume-a-unicode-range-token0 title="section 4.3.6">4.3.6</a> |
simon@8739 | 3223 | <li>Consume a url token, <a href=#consume-a-url-token0 title="section 4.3.5">4.3.5</a> |
simon@8739 | 3224 | <li>consume the next input token, <a href=#consume-the-next-input-token title="section 5.2">5.2</a> |
simon@8739 | 3225 | <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> |
simon@8739 | 3226 | <li>Convert a string to a number, <a href=#convert-a-string-to-a-number0 title="section 4.3.13">4.3.13</a> |
simon@8739 | 3227 | <li>current input character, <a href=#current-input-character title="section 4.2">4.2</a> |
simon@8739 | 3228 | <li>current input token, <a href=#current-input-token title="section 5.2">5.2</a> |
jackalmage@8796 | 3229 | <li><dashndashdigit-ident>, <a href=#typedef-dashndashdigit-ident title="section 6.2">6.2</a> |
simon@8739 | 3230 | <li>declaration, <a href=#declaration title="section 5">5</a> |
jackalmage@8796 | 3231 | <li><declaration-list>, <a href=#typedef-declaration-list title="section 7.1">7.1</a> |
simon@8739 | 3232 | <li>decode, <a href=#decode title="section 3.2">3.2</a> |
jackalmage@8744 | 3233 | <li>determine the fallback encoding, <a href=#determine-the-fallback-encoding title="section 3.2">3.2</a> |
simon@8739 | 3234 | <li>digit, <a href=#digit title="section 4.2">4.2</a> |
jackalmage@8744 | 3235 | <li>encoding, <a href=#encoding title="section 8.2">8.2</a> |
simon@8739 | 3236 | <li>ending token, <a href=#ending-token title="section 5.4.7">5.4.7</a> |
simon@8739 | 3237 | <li>end of the range, <a href=#end-of-the-range title="section 4.3.15">4.3.15</a> |
jackalmage@8796 | 3238 | <li>〈EOF〉, <a href=#tokendef-eof title="section 5.2">5.2</a> |
simon@8739 | 3239 | <li>EOF character, <a href=#eof-character title="section 4.2">4.2</a> |
simon@8752 | 3240 | <li>escaping, <a href=#escaping0 title="section 2.1">2.1</a> |
simon@8739 | 3241 | <li>function, <a href=#function title="section 5">5</a> |
simon@8739 | 3242 | <li>get an encoding, <a href=#get-an-encoding title="section 3.2">3.2</a> |
simon@8739 | 3243 | <li>hex digit, <a href=#hex-digit title="section 4.2">4.2</a> |
jackalmage@8796 | 3244 | <li><integer>, <a href=#typedef-integer title="section 6.2">6.2</a> |
simon@8739 | 3245 | <li>letter, <a href=#letter title="section 4.2">4.2</a> |
simon@8739 | 3246 | <li>lowercase letter, <a href=#lowercase-letter title="section 4.2">4.2</a> |
simon@8739 | 3247 | <li>maximum allowed codepoint, <a href=#maximum-allowed-codepoint title="section 4.2">4.2</a> |
simon@8739 | 3248 | <li>name character, <a href=#name-character title="section 4.2">4.2</a> |
simon@8739 | 3249 | <li>name-start character, <a href=#name-start-character title="section 4.2">4.2</a> |
jackalmage@8796 | 3250 | <li><ndashdigit-dimension>, <a href=#typedef-ndashdigit-dimension title="section 6.2">6.2</a> |
jackalmage@8796 | 3251 | <li><ndashdigit-ident>, <a href=#typedef-ndashdigit-ident title="section 6.2">6.2</a> |
simon@8799 | 3252 | <li><ndash-dimension>, <a href=#typedef-ndash-dimension title="section 6.2">6.2</a> |
jackalmage@8796 | 3253 | <li><n-dimension>, <a href=#typedef-n-dimension title="section 6.2">6.2</a> |
simon@8739 | 3254 | <li>newline, <a href=#newline title="section 4.2">4.2</a> |
simon@8739 | 3255 | <li>next input character, <a href=#next-input-character title="section 4.2">4.2</a> |
simon@8739 | 3256 | <li>next input token, <a href=#next-input-token title="section 5.2">5.2</a> |
simon@8739 | 3257 | <li>non-ASCII character, <a href=#non-ascii-character title="section 4.2">4.2</a> |
simon@8739 | 3258 | <li>non-printable character, <a href=#non-printable-character title="section 4.2">4.2</a> |
simon@8739 | 3259 | <li>Parse a component value, <a href=#parse-a-component-value0 title="section 5.3.6">5.3.6</a> |
simon@8739 | 3260 | <li>Parse a declaration, <a href=#parse-a-declaration0 title="section 5.3.4">5.3.4</a> |
simon@8739 | 3261 | <li>Parse a list of component values, <a href=#parse-a-list-of-component-values0 title="section 5.3.7">5.3.7</a> |
simon@8739 | 3262 | <li>Parse a list of declarations, <a href=#parse-a-list-of-declarations0 title="section 5.3.5">5.3.5</a> |
simon@8739 | 3263 | <li>Parse a list of rules, <a href=#parse-a-list-of-rules0 title="section 5.3.2">5.3.2</a> |
simon@8739 | 3264 | <li>Parse a rule, <a href=#parse-a-rule0 title="section 5.3.3">5.3.3</a> |
simon@8739 | 3265 | <li>Parse a stylesheet, <a href=#parse-a-stylesheet0 title="section 5.3.1">5.3.1</a> |
simon@8739 | 3266 | <li>parse error, <a href=#parse-errors title="section 3">3</a> |
simon@8739 | 3267 | <li>preserved tokens, <a href=#preserved-tokens title="section 5">5</a> |
simon@8739 | 3268 | <li>qualified rule, <a href=#qualified-rule title="section 5">5</a> |
simon@8739 | 3269 | <li>reconsume the current input character, <a href=#reconsume-the-current-input-character title="section 4.2">4.2</a> |
simon@8739 | 3270 | <li>reconsume the current input token, <a href=#reconsume-the-current-input-token title="section 5.2">5.2</a> |
jackalmage@8796 | 3271 | <li><rule-list>, <a href=#typedef-rule-list title="section 7.1">7.1</a> |
simon@8739 | 3272 | <li>Set the 〈unicode-range〉’s range, <a href=#set-the-unicode-ranges-range0 title="section 4.3.15">4.3.15</a> |
jackalmage@8796 | 3273 | <li><signed-integer>, <a href=#typedef-signed-integer title="section 6.2">6.2</a> |
jackalmage@8796 | 3274 | <li><signless-integer>, <a href=#typedef-signless-integer title="section 6.2">6.2</a> |
simon@8739 | 3275 | <li>simple block, <a href=#simple-block title="section 5">5</a> |
simon@8739 | 3276 | <li>start of the range, <a href=#start-of-the-range title="section 4.3.15">4.3.15</a> |
simon@8739 | 3277 | <li>starts with an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a> |
simon@8739 | 3278 | <li>starts with a number, <a href=#check-if-three-characters-would-start-a-number0 title="section 4.3.10">4.3.10</a> |
simon@8739 | 3279 | <li>starts with a valid escape, <a href=#check-if-two-characters-are-a-valid-escape0 title="section 4.3.8">4.3.8</a> |
simon@8739 | 3280 | <li>start with an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a> |
simon@8739 | 3281 | <li>start with a number, <a href=#check-if-three-characters-would-start-a-number0 title="section 4.3.10">4.3.10</a> |
jackalmage@8744 | 3282 | <li>style rule, <a href=#style-rule title="section 8.1">8.1</a> |
jackalmage@8796 | 3283 | <li><stylesheet>, <a href=#typedef-stylesheet title="section 7.1">7.1</a> |
simon@8739 | 3284 | <li>top-level flag, <a href=#top-level-flag title="section 5.4.1">5.4.1</a> |
simon@8739 | 3285 | <li>uppercase letter, <a href=#uppercase-letter title="section 4.2">4.2</a> |
simon@8739 | 3286 | <li>whitespace, <a href=#whitespace title="section 4.2">4.2</a> |
simon@8739 | 3287 | <li>would start an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a> |
simon@8739 | 3288 | <li>would start a number, <a href=#check-if-three-characters-would-start-a-number0 title="section 4.3.10">4.3.10</a> |
simon@8739 | 3289 | </ul></div> |
simon@8739 | 3290 | |
simon@8739 | 3291 | <h2 class="no-num no-ref" id=property-index><span class=content> |
simon@8739 | 3292 | Property index</span><a class=section-link href=#property-index>§</a></h2> |
simon@8739 | 3293 | <div data-fill-with=property-index><p>No properties defined.</div> |
simon@8739 | 3294 | |
simon@8739 | 3295 |