<pre class='metadata'>

Title: CSS Syntax Module Level 3

Shortname: css-syntax

Level: 3

Status: ED

Work Status: Testing

Group: csswg

ED: https://drafts.csswg.org/css-syntax/

TR: https://www.w3.org/TR/css-syntax-3/

Previous Version: https://www.w3.org/TR/2019/CR-css-syntax-3-20190716/

Previous Version: https://www.w3.org/TR/2014/CR-css-syntax-3-20140220/

Previous Version: https://www.w3.org/TR/2013/WD-css-syntax-3-20131105/

Previous Version: https://www.w3.org/TR/2013/WD-css-syntax-3-20130919/

Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199

Editor: Simon Sapin, Mozilla, http://exyr.org/about/, w3cid 58001

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.

Ignored Terms: <keyframes-name>, <keyframe-rule>, <keyframe-selector>, <translation-value>, <media-query-list>

Ignored Vars: +b, -b, foo

</pre>

<pre class=link-defaults>

spec:css-cascade-5; type:dfn; text:property

spec:css-color-4; type:property; text:color

spec:css-text-decor-3; type:property; text:text-decoration

spec:css-transforms-1; type:function; text:translatex()

spec:html; type:element;

text:a

text:style

text:script

spec:infra; type:dfn;

text:string

text:list

</pre>

<h2 id="intro">

Introduction</h2>

<em>This section is not normative.</em>

This module defines the abstract syntax and parsing of CSS stylesheets

and other things which use CSS syntax

(such as the HTML <code>style</code> attribute).

It defines algorithms for converting a stream of Unicode <a>code points</a>

(in other words, text)

into a stream of CSS tokens,

and then further into CSS objects

such as stylesheets, rules, and declarations.

<h3 id="placement">

Module interactions</h3>

This module defines the syntax and parsing of CSS stylesheets.

It supersedes the lexical scanner and grammar defined in CSS 2.1.

<h2 id='syntax-description'>

Description of CSS's Syntax</h2>

<em>This section is not normative.</em>

A CSS document is a series of <a>style rules</a>--

which are <a>qualified rules</a> that apply styles to elements in a document--

and <a>at-rules</a>--

which define special processing rules or values for the CSS document.

A <a>qualified rule</a> starts with a prelude

then has a {}-wrapped block containing a sequence of declarations.

The meaning of the prelude varies based on the context that the rule appears in--

for <a>style rules</a>, it's a selector which specifies what elements the declarations will apply to.

Each declaration has a name,

followed by a colon and the declaration value.

Declarations are separated by semicolons.

<div class='example'>

A typical rule might look something like this:

<pre>

p > a {

color: blue;

text-decoration: underline;

}

</pre>

In the above rule, "<code>p > a</code>" is the selector,

which, if the source document is HTML,

selects any <{a}> elements that are children of a <{p}> element.

"<code>color: blue</code>" is a declaration specifying that,

for the elements that match the selector,

their 'color' property should have the value ''blue''.

Similarly, their 'text-decoration' property should have the value ''underline''.

</div>

<a>At-rules</a> are all different, but they have a basic structure in common.

They start with an "@" <a>code point</a> followed by their name as a CSS keyword.

Some <a>at-rules</a> are simple statements,

with their name followed by more CSS values to specify their behavior,

and finally ended by a semicolon.

Others are blocks;

they can have CSS values following their name,

but they end with a {}-wrapped block,

similar to a <a>qualified rule</a>.

Even the contents of these blocks are specific to the given <a>at-rule</a>:

sometimes they contain a sequence of declarations, like a <a>qualified rule</a>;

other times, they may contain additional blocks, or at-rules, or other structures altogether.

<div class='example'>

Here are several examples of <a>at-rules</a> that illustrate the varied syntax they may contain.

<pre>@import "my-styles.css";</pre>

The ''@import'' <a>at-rule</a> is a simple statement.

After its name, it takes a single string or ''url()'' function to indicate the stylesheet that it should import.

<pre>

@page :left {

margin-left: 4cm;

margin-right: 3cm;

}

</pre>

The ''@page'' <a>at-rule</a> consists of an optional page selector (the '':left'' pseudoclass),

followed by a block of properties that apply to the page when printed.

In this way, it's very similar to a normal style rule,

except that its properties don't apply to any "element",

but rather the page itself.

<pre>

@media print {

body { font-size: 10pt }

}

</pre>

The ''@media'' <a>at-rule</a> begins with a [=media type=]

and a list of optional media queries.

Its block contains entire rules,

which are only applied when the ''@media''s conditions are fulfilled.

</div>

Property names and <a>at-rule</a> names are always <a>ident sequences</a>,

which have to start with an <a>ident-start code point</a>, two hyphens,

or a hyphen followed by an ident-start code point,

and then can contain zero or more <a>ident code points</a>.

You can include any <a>code point</a> at all,

even ones that CSS uses in its syntax,

by <a>escaping</a> it.

The syntax of selectors is defined in the <a href="https://www.w3.org/TR/selectors/">Selectors spec</a>.

Similarly, the syntax of the wide variety of CSS values is defined in the <a href="https://www.w3.org/TR/css3-values/">Values &amp; Units spec</a>.

The special syntaxes of individual <a>at-rules</a> can be found in the specs that define them.

<h3 id="escaping">

Escaping</h3>

<em>This section is not normative.</em>

Any Unicode <a>code point</a> can be included in an [=ident sequence=] or quoted string

by <dfn id="escape-codepoint">escaping</dfn> it.

CSS escape sequences start with a backslash (\), and continue with:

<ul>

<li>

Any Unicode <a>code point</a> that is not a <a>hex digits</a> or a <a>newline</a>.

The escape sequence is replaced by that <a>code point</a>.

<li>

Or one to six <a>hex digits</a>, followed by an optional <a>whitespace</a>.

The escape sequence is replaced by the Unicode <a>code point</a>

whose value is given by the hexadecimal digits.

This optional whitespace allow hexadecimal escape sequences

to be followed by "real" hex digits.

<p class=example>

An [=ident sequence=] with the value "&amp;B"

could be written as ''\26 B'' or ''\000026B''.

<p class=note>

A "real" space after the escape sequence must be doubled.

</ul>

<h3 id="error-handling">

Error Handling</h3>

<em>This section is not normative.</em>

When errors occur in CSS,

the parser attempts to recover gracefully,

throwing away only the minimum amount of content

before returning to parsing as normal.

This is because errors aren't always mistakes--

new syntax looks like an error to an old parser,

and it's useful to be able to add new syntax to the language

without worrying about stylesheets that include it being completely broken in older UAs.

The precise error-recovery behavior is detailed in the parser itself,

but it's simple enough that a short description is fairly accurate.

<ul>

<li>

At the "top level" of a stylesheet,

an <<at-keyword-token>> starts an at-rule.

Anything else starts a qualified rule,

and is included in the rule's prelude.

This may produce an invalid selector,

but that's not the concern of the CSS parser--

at worst, it means the selector will match nothing.

<li>

Once an at-rule starts,

nothing is invalid from the parser's standpoint;

it's all part of the at-rule's prelude.

Encountering a <<semicolon-token>> ends the at-rule immediately,

while encountering an opening curly-brace <a href="#tokendef-open-curly">&lt;{-token></a> starts the at-rule's body.

The at-rule seeks forward, matching blocks (content surrounded by (), {}, or [])

until it finds a closing curly-brace <a href="#tokendef-close-curly">&lt;}-token></a> that isn't matched by anything else

or inside of another block.

The contents of the at-rule are then interpreted according to the at-rule's own grammar.

<li>

Qualified rules work similarly,

except that semicolons don't end them;

instead, they are just taken in as part of the rule's prelude.

When the first {} block is found,

the contents are always interpreted as a list of declarations.

<li>

When interpreting a list of declarations,

unknown syntax at any point causes the parser to throw away whatever declaration it's currently building,

and seek forward until it finds a semicolon (or the end of the block).

It then starts fresh, trying to parse a declaration again.

<li id=autoclosing>

If the stylesheet ends while any rule, declaration, function, string, etc. are still open,

everything is automatically closed.

This doesn't make them invalid,

though they may be incomplete

and thus thrown away when they are verified against their grammar.

<div class='example'>

For example, the syntax of the ''translateX()'' function is:

<pre>translateX( <<translation-value>> )</pre>

However, the stylesheet may end with the function unclosed, like:

<pre>.foo { transform: translate(50px</pre>

The CSS parser parses this as a style rule containing one declaration,

whose value is a function named "translate".

This matches the above grammar,

even though the ending token didn't appear in the token stream,

because by the time the parser is finished,

the presence of the ending token is no longer possible to determine;

all you have is the fact that there's a block and a function.

</div>

</ul>

After each construct (declaration, style rule, at-rule) is parsed,

the user agent checks it against its expected grammar.

If it does not match the grammar,

it's <dfn export for=css>invalid</dfn>,

and gets <dfn export for=css>ignored</dfn> by the UA,

which treats it as if it wasn't there at all.

<!--

████████ ███████ ██ ██ ████████ ██ ██ ████ ████████ ████ ██ ██ ██████

██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ███ ██ ██ ██

██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ████ ██ ██

██ ██ ██ █████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████

██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ████ ██ ██

██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ███ ██ ██

██ ███████ ██ ██ ████████ ██ ██ ████ ████████ ████ ██ ██ ██████

-->

<h2 id="tokenizing-and-parsing">

Tokenizing and Parsing CSS</h2>

User agents must use the parsing rules described in this specification

to generate the [[CSSOM]] trees from text/css resources.

Together, these rules define what is referred to as the CSS parser.

This specification defines the parsing rules for CSS documents,

whether they are syntactically correct or not.

Certain points in the parsing algorithm are said to be <dfn lt="parse error">parse errors</dfn>.

The error handling for parse errors is well-defined:

user agents must either act as described below when encountering such problems,

or must abort processing at the first error that they encounter for which they do not wish to apply the rules described below.

Conformance checkers must report at least one parse error condition to the user

if one or more parse error conditions exist in the document

and must not report parse error conditions

if none exist in the document.

Conformance checkers may report more than one parse error condition if more than one parse error condition exists in the document.

Conformance checkers are not required to recover from parse errors,

but if they do,

they must recover in the same way as user agents.

<h3 id="parsing-overview">

Overview of the Parsing Model</h3>

The input to the CSS parsing process consists of a stream of Unicode <a>code points</a>,

which is passed through a tokenization stage followed by a tree construction stage.

The output is a CSSStyleSheet object.

Note: Implementations that do not support scripting do not have to actually create a CSSOM CSSStyleSheet object,

but the CSSOM tree in such cases is still used as the model for the rest of the specification.

<h3 id="input-byte-stream">

The input byte stream</h3>

When parsing a stylesheet,

the stream of Unicode <a>code points</a> that comprises the input to the tokenization stage

might be initially seen by the user agent as a stream of bytes

(typically coming over the network or from the local file system).

If so, the user agent must decode these bytes into <a>code points</a> according to a particular character encoding.

<div algorithm>

To <dfn for=CSS lt="decode bytes">decode</dfn> a |stylesheet|’s stream of bytes into a stream of <a>code points</a>:

1. [=Determine the fallback encoding=] of |stylesheet|,

and let |fallback| be the result.

2. [=Decode=] |stylesheet|’s stream of bytes

with fallback encoding |fallback|,

and return the result.

Note: The <a>decode</a> algorithm

gives precedence to a byte order mark (BOM),

and only uses the fallback when none is found.

</div>

<div algorithm>

To <dfn>determine the fallback encoding</dfn> of a |stylesheet|:

<ol>

<li>

If HTTP or equivalent protocol provides an |encoding label| (e.g. via the charset parameter of the Content-Type header) for the |stylesheet|,

[=get an encoding=] from |encoding label|.

If that does not return failure,

return it.

<li>

Otherwise, check |stylesheet|’s byte stream.

If the first 1024 bytes of the stream begin with the hex sequence

<pre>40 63 68 61 72 73 65 74 20 22 XX* 22 3B</pre>

where each <code>XX</code> byte is a value between 0₁₆ and 21₁₆ inclusive

or a value between 23₁₆ and 7F₁₆ inclusive,

then [=get an encoding=]

from a string formed out of

the sequence of <code>XX</code> bytes,

interpreted as <code>ASCII</code>.

<details class='note'>

<summary>What does that byte sequence mean?</summary>

The byte sequence above,

when decoded as ASCII,

is the string "<code>@charset "…";</code>",

where the "…" is the sequence of bytes corresponding to the encoding's label.

</details>

If the return value was <code>utf-16be</code> or <code>utf-16le</code>,

return <code>utf-8</code>;

if it was anything else except failure,

return it.

<details class='note'>

<summary>Why use utf-8 when the declaration says utf-16?</summary>

The bytes of the encoding declaration spell out “<code>@charset "…";</code>” in ASCII,

but UTF-16 is not ASCII-compatible.

Either you've typed in complete gibberish (like <code>䁣桡牳整•utf-16be∻</code>) to get the right bytes in the document,

which we don't want to encourage,

or your document is actually in an ASCII-compatible encoding

and your encoding declaration is lying.

Either way, defaulting to UTF-8 is a decent answer.

As well, this mimics the behavior of HTML's <code>&lt;meta charset></code> attribute.

</details>

Note: Note that the syntax of an encoding declaration <em>looks like</em> the syntax of an <a>at-rule</a> named ''@charset'',

but no such rule actually exists,

and the rules for how you can write it are much more restrictive than they would normally be for recognizing such a rule.

A number of things you can do in CSS that would produce a valid ''@charset'' rule (if one existed),

such as using multiple spaces, comments, or single quotes,

will cause the encoding declaration to not be recognized.

This behavior keeps the encoding declaration as simple as possible,

and thus maximizes the likelihood of it being implemented correctly.

<li>

Otherwise, if an <a>environment encoding</a> is provided by the referring document,

return it.

<li>

Otherwise, return <code>utf-8</code>.

</ol>

<div class='note'>

Though UTF-8 is the default encoding for the web,

and many newer web-based file formats assume or require UTF-8 encoding,

CSS was created before it was clear which encoding would win,

and thus can't automatically assume the stylesheet is UTF-8.

Stylesheet authors <em>should</em> author their stylesheets in UTF-8,

and ensure that either an HTTP header (or equivalent method) declares the encoding of the stylesheet to be UTF-8,

or that the referring document declares its encoding to be UTF-8.

(In HTML, this is done by adding a <code>&lt;meta charset=utf-8></code> element to the head of the document.)

If neither of these options are available,

authors should begin the stylesheet with a UTF-8 BOM

or the exact characters

<pre>@charset "utf-8";</pre>

</div>

</div>

Document languages that refer to CSS stylesheets that are decoded from bytes

may define an <dfn export>environment encoding</dfn> for each such stylesheet,

which is used as a fallback when other encoding hints are not available or can not be used.

The concept of <a>environment encoding</a> only exists for compatibility with legacy content.

New formats and new linking mechanisms <b>should not</b> provide an <a>environment encoding</a>,

so the stylesheet defaults to UTF-8 instead in the absence of more explicit information.

Note: [[HTML]] defines <a href="https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet">the environment encoding for <code>&lt;link rel=stylesheet></code></a>.

Note: [[CSSOM]] defines <a href="https://drafts.csswg.org/cssom/#requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction">the environment encoding for <code>&lt;xml-stylesheet?></code></a>.

Note: [[CSS-CASCADE-3]] defines <a at-rule lt=@import>the environment encoding for <code>@import</code></a>.

<h3 id="input-preprocessing">

Preprocessing the input stream</h3>

The <dfn>input stream</dfn> consists of the [=filtered code points=]

pushed into it as the input byte stream is decoded.

<div algorithm>

To <dfn for=CSS lt="filter code points|filtered code points">filter code points</dfn>

from a stream of (unfiltered) [=code points=] |input|:

<ul>

<li>

Replace any U+000D CARRIAGE RETURN (CR) <a>code points</a>,

U+000C FORM FEED (FF) <a>code points</a>,

or pairs of U+000D CARRIAGE RETURN (CR) followed by U+000A LINE FEED (LF) in |input|

by a single U+000A LINE FEED (LF) <a>code point</a>.

<li>

Replace any U+0000 NULL or <a>surrogate</a> <a>code points</a> in |input|

with U+FFFD REPLACEMENT CHARACTER (�).

Note: The only way to produce a <a>surrogate</a> <a>code point</a> in CSS content is by directly assigning a <code>DOMString</code> with one in it via an OM operation.

</ul>

</div>

<h2 id="tokenization">

Tokenization</h2>

To <dfn for=CSS lt="tokenize|tokenization">tokenize</dfn> a stream of <a>code points</a>

into a stream of CSS tokens |input|,

repeatedly [=tokenizer/consume a token=] from |input|

until an <<EOF-token>> is reached,

pushing each of the returned tokens into a stream.

Note: Each call to the [=tokenizer/consume a token=] algorithm

returns a single token,

so it can also be used "on-demand" to tokenize a stream of <a>code points</a> <em>during</em> parsing,

if so desired.

The output of tokenization step is a stream of zero or more of the following tokens:

<dfn>&lt;ident-token></dfn>,

<dfn>&lt;function-token></dfn>,

<dfn>&lt;at-keyword-token></dfn>,

<dfn>&lt;hash-token></dfn>,

<dfn>&lt;string-token></dfn>,

<dfn>&lt;bad-string-token></dfn>,

<dfn>&lt;url-token></dfn>,

<dfn>&lt;bad-url-token></dfn>,

<dfn>&lt;delim-token></dfn>,

<dfn>&lt;number-token></dfn>,

<dfn>&lt;percentage-token></dfn>,

<dfn>&lt;dimension-token></dfn>,

<dfn export>&lt;unicode-range-token></dfn>,

<dfn>&lt;whitespace-token></dfn>,

<dfn>&lt;CDO-token></dfn>,

<dfn>&lt;CDC-token></dfn>,

<dfn>&lt;colon-token></dfn>,

<dfn>&lt;semicolon-token></dfn>,

<dfn>&lt;comma-token></dfn>,

<dfn id="tokendef-open-square">&lt;[-token></dfn>,

<dfn id="tokendef-close-square">&lt;]-token></dfn>,

<dfn id="tokendef-open-paren">&lt;(-token></dfn>,

<dfn id="tokendef-close-paren">&lt;)-token></dfn>,

<dfn id="tokendef-open-curly">&lt;{-token></dfn>,

and <dfn id="tokendef-close-curly">&lt;}-token></dfn>.

<ul>

<li>

<<ident-token>>, <<function-token>>, <<at-keyword-token>>, <<hash-token>>, <<string-token>>, and <<url-token>> have a value composed of zero or more <a>code points</a>.

Additionally, hash tokens have a type flag set to either "id" or "unrestricted". The type flag defaults to "unrestricted" if not otherwise set.

<li>

<<delim-token>> has a value composed of a single <a>code point</a>.

<li>

<<number-token>>, <<percentage-token>>, and <<dimension-token>> have a numeric value,

and an optional sign character

set to either "+" or "-" (or nothing).

<<number-token>> and <<dimension-token>> additionally have a type flag set to either "integer" or "number". The type flag defaults to "integer" if not otherwise set.

<<dimension-token>> additionally have a unit composed of one or more <a>code points</a>.

<li>

<<unicode-range-token>> has a starting and ending code point.

It represents an inclusive range of codepoints

(including both the start and end).

If the ending code point is before the starting code point,

it represents an empty range.

</ul>

Note: The type flag of hash tokens is used in the Selectors syntax [[SELECT]].

Only hash tokens with the "id" type are valid <a href="https://www.w3.org/TR/selectors/#id-selectors">ID selectors</a>.

<!--

████████ ███ ████ ██ ████████ ███████ ███ ████████

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

████████ ██ ██ ██ ██ ████████ ██ ██ ██ ██ ██ ██

██ ██ █████████ ██ ██ ██ ██ ██ ██ █████████ ██ ██

██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ████ ████████ ██ ██ ███████ ██ ██ ████████

-->

<h3 id='token-diagrams'>

Token Railroad Diagrams</h3>

<em>This section is non-normative.</em>

This section presents an informative view of the tokenizer,

in the form of railroad diagrams.

Railroad diagrams are more compact than an explicit parser,

but often easier to read than an regular expression.

These diagrams are <em>informative</em> and <em>incomplete</em>;

they describe the grammar of "correct" tokens,

but do not describe error-handling at all.

They are provided solely to make it easier to get an intuitive grasp of the syntax of each token.

Diagrams with names such as <em>&lt;foo-token></em> represent tokens.

The rest are productions referred to by other diagrams.

<dl>

<dt id="comment-diagram">comment

<dd>

<pre class='railroad'>

T: /*

Star:

N: anything but * followed by /

T: */

</pre>

<dt id="newline-diagram">newline

<dd>

<pre class='railroad'>

Choice:

T: \n

T: \r\n

T: \r

T: \f

</pre>

<dt id="whitespace-diagram">whitespace

<dd>

<pre class='railroad'>

Choice:

T: space

T: \t

N: newline

</pre>

<dt id="hex-digit-diagram">hex digit

<dd>

<pre class='railroad'>

N: 0-9 a-f or A-F

</pre>

<dt id="escape-diagram">escape

<dd>

<pre class='railroad'>

T: \

Choice:

N: not newline or hex digit

Seq:

Plus:

N: hex digit

C: 1-6 times

Opt: skip

N: whitespace

</pre>

<dt id="whitespace-token-diagram"><<whitespace-token>>

<dd>

<pre class='railroad'>

Plus:

N: whitespace

</pre>

<dt id="ws*-diagram">ws*

<dd>

<pre class='railroad'>

Star:

N: <whitespace-token>

</pre>

<dt id="ident-token-diagram"><<ident-token>>

<dd>

<pre class='railroad'>

Or: 1

T: --

Seq:

Opt: skip

T: -

Or:

N: a-z A-Z _ or non-ASCII

N: escape

Star:

Or:

N: a-z A-Z 0-9 _ - or non-ASCII

N: escape

</pre>

<dt id="function-token-diagram"><<function-token>>

<dd>

<pre class='railroad'>

N: <ident-token>

T: (

</pre>

<dt id="at-keyword-token-diagram"><<at-keyword-token>>

<dd>

<pre class='railroad'>

T: @

N: <ident-token>

</pre>

<dt id="hash-token-diagram"><<hash-token>>

<dd>

<pre class='railroad'>

T: #

Plus:

Choice:

N:a-z A-Z 0-9 _ - or non-ASCII

N: escape

</pre>

<dt id="string-token-diagram"><<string-token>>

<dd>

<pre class='railroad'>

Choice:

Seq:

T: "

Star:

Choice:

N: not " \ or newline

N: escape

Seq:

T: \

N: newline

T: "

Seq:

T: '

Star:

Choice:

N: not ' \ or newline

N: escape

Seq:

T: \

N: newline

T: '

</pre>

<dt id="url-token-diagram"><<url-token>>

<dd>

<pre class='railroad'>

N: <ident-token "url">

T: (

N: ws*

Star:

Choice:

N: not " ' ( ) \ ws or non-printable

N: escape

N: ws*

T: )

</pre>

<dt id="number-token-diagram"><<number-token>>

<dd>

<pre class='railroad'>

Choice: 1

T: +

Skip:

T: -

Choice:

Seq:

Plus:

N: digit

T: .

Plus:

N: digit

Plus:

N: digit

Seq:

T: .

Plus:

N: digit

Opt: skip

Seq:

Choice:

T: e

T: E

Choice: 1

T: +

S:

T: -

Plus:

N: digit

</pre>

<dt id="dimension-token-diagram"><<dimension-token>>

<dd>

<pre class='railroad'>

N: <number-token>

N: <ident-token>

</pre>

<dt id="percentage-token-diagram"><<percentage-token>>

<dd>

<pre class='railroad'>

N: <number-token>

T: %

</pre>

<dt id="CDO-token-diagram"><<CDO-token>>

<dd>

<pre class='railroad'>

T: <!--

</pre>

<dt id="CDC-token-diagram"><<CDC-token>>

<dd>

<pre class='railroad'>

T: -->

</pre>

<dt id="unicode-range-token-diagram"><<unicode-range-token>>

<dd>

<pre class=railroad>

Choice:

T: U

T: u

T: +

Choice:

OneOrMore:

N: hex digit

C: 1-6 times

Seq:

ZeroOrMore:

N: hex digit

C: 1-5 times

OneOrMore:

T: ?

C: 1 to (6-digits) times

Seq:

OneOrMore:

N: hex digit

C: 1-6 times

T: -

OneOrMore:

N: hex digit

C: 1-6 times

</pre>

</dl>

<!--

████████ ████████ ██ ██ ██████

██ ██ ██ ███ ██ ██ ██

██ ██ ██ ████ ██ ██

██ ██ ██████ ██ ██ ██ ██████

██ ██ ██ ██ ████ ██

██ ██ ██ ██ ███ ██ ██

████████ ██ ██ ██ ██████

-->

<h3 id="tokenizer-definitions">

Definitions</h3>

This section defines several terms used during the tokenization phase.

<dl export>

<dt><dfn>next input code point</dfn>

<dd>

The first <a>code point</a> in the <a>input stream</a> that has not yet been consumed.

<dt><dfn>current input code point</dfn>

<dd>

The last <a>code point</a> to have been consumed.

<dt><dfn>reconsume the current input code point</dfn>

<dd>

Push the <a>current input code point</a> back onto the front of the <a>input stream</a>,

so that the next time you are instructed to consume the <a>next input code point</a>,

it will instead reconsume the <a>current input code point</a>.

<dt><dfn>EOF code point</dfn>

<dd>

A conceptual <a>code point</a> representing the end of the <a>input stream</a>.

Whenever the <a>input stream</a> is empty,

the <a>next input code point</a> is always an EOF code point.

<dt><dfn export>digit</dfn>

<dd>

A <a>code point</a> between U+0030 DIGIT ZERO (0) and U+0039 DIGIT NINE (9) inclusive.

<dt><dfn export>hex digit</dfn>

<dd>

A <a>digit</a>,

or a <a>code point</a> between U+0041 LATIN CAPITAL LETTER A (A) and U+0046 LATIN CAPITAL LETTER F (F) inclusive,

or a <a>code point</a> between U+0061 LATIN SMALL LETTER A (a) and U+0066 LATIN SMALL LETTER F (f) inclusive.

<dt><dfn export>uppercase letter</dfn>

<dd>

A <a>code point</a> between U+0041 LATIN CAPITAL LETTER A (A) and U+005A LATIN CAPITAL LETTER Z (Z) inclusive.

<dt><dfn export>lowercase letter</dfn>

<dd>

A <a>code point</a> between U+0061 LATIN SMALL LETTER A (a) and U+007A LATIN SMALL LETTER Z (z) inclusive.

<dt><dfn export>letter</dfn>

<dd>

An <a>uppercase letter</a>

or a <a>lowercase letter</a>.

<dt><dfn export>non-ASCII ident code point</dfn>

<dd>

A <a>code point</a> whose value is any of:

* U+00B7

* between U+00C0 and U+00D6

* between U+00D8 and U+00F6

* between U+00F8 and U+037D

* between U+037F and U+1FFF

* U+200C

* U+200D

* U+203F

* U+2040

* between U+2070 and U+218F

* between U+2C00 and U+2FEF

* between U+3001 and U+D7FF

* between U+F900 and U+FDCF

* between U+FDF0 and U+FFFD

* greater than or equal to U+10000

All of these ranges are inclusive.

<details class=note>

<summary>Why these character, specifically?</summary>

This matches the list of non-ASCII codepoints

allowed to be used in HTML [=valid custom element names=].

It excludes a number of characters that appear as whitespace,

or that can cause rendering or parsing issues in some tools,

such as the direction override codepoints.

Note that this is a weaker set of restrictions

than <a href="https://unicode.org/reports/tr31/#Figure_Code_Point_Categories_for_Identifier_Parsing">UAX 31</a>

recommends for identifiers

(used by languages such as JavaScript to restrict their identifier syntax),

allowing things such as

starting an identifier with a combining character.

Consistency with HTML custom element names

(and thus, the ability to write selectors for all custom elements

without having to use escapes)

was considered valuable,

and the set of characters restricted by HTML

covers the "high value" restrictions well.

These restrictions do not avoid all possible confusing renderings;

mixing characters from LTR and RTL scripts

can still result in unexpected visual transposition

in most text editors,

for example.

Source text can contain the restricted characters in non-ident contexts, as well:

most of them are completely valid in strings, for example.

Even when used in a way that creates invalid CSS,

the parsing errors they cause might be limited to something unimportant,

while their effect on rendering the source text in code review tools

might be significant and/or malicious.

For more details on these sorts of "source text attacks",

see <a href="https://blog.rust-lang.org/2021/11/01/cve-2021-42574.html">this Rust-lang blog post</a>

<small><a href="https://web.archive.org/web/20220323175009/https://blog.rust-lang.org/2021/11/01/cve-2021-42574.html">(archived)</a></small>.

</details>

<dt><dfn export lt="ident-start code point | name-start code point" oldids="name-start-code-point, identifier-start-code-point">ident-start code point</dfn>

<dd>

A <a>letter</a>,

a <a>non-ASCII ident code point</a>,

or U+005F LOW LINE (_).

<dt><dfn export lt="ident code point" oldids="name-code-point, identifier-code-point">ident code point</dfn>

<dd>

An <a>ident-start code point</a>,

a <a>digit</a>,

or U+002D HYPHEN-MINUS (-).

<dt><dfn export>non-printable code point</dfn>

<dd>

A <a>code point</a> between U+0000 NULL and U+0008 BACKSPACE inclusive,

or U+000B LINE TABULATION,

or a <a>code point</a> between U+000E SHIFT OUT and U+001F INFORMATION SEPARATOR ONE inclusive,

or U+007F DELETE.

<dt><dfn export>newline</dfn>

<dd>

U+000A LINE FEED.

<span class='note'>

Note that U+000D CARRIAGE RETURN and U+000C FORM FEED are not included in this definition,

as they are converted to U+000A LINE FEED during <a href="#input-preprocessing">preprocessing</a>.

</span>

<dt><dfn export>whitespace</dfn>

<dd>A <a>newline</a>, U+0009 CHARACTER TABULATION, or U+0020 SPACE.

<dt><dfn export>maximum allowed code point</dfn>

<dd>The greatest <a>code point</a> defined by Unicode: U+10FFFF.

<dt><dfn export lt="ident sequence | CSS ident sequence" oldids="css-identifier, identifier">ident sequence</dfn>

<dd>

A sequence of [=code points=] that has the same syntax as an <<ident-token>>.

Note: The part of an <<at-keyword-token>> after the "@",

the part of a <<hash-token>> (with the "id" type flag) after the "#",

the part of a <<function-token>> before the "(",

and the unit of a <<dimension-token>>

are all [=ident sequences=].

</dl>

<!--

████████ ███████ ██ ██ ████████ ██ ██ ████ ████████ ████████ ████████

██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ██ ██

██ ██ ██ █████ ██████ ██ ██ ██ ██ ██ ██████ ████████

██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ██

██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██

██ ███████ ██ ██ ████████ ██ ██ ████ ████████ ████████ ██ ██

-->

<h3 id="tokenizer-algorithms">

Tokenizer Algorithms</h3>

The algorithms defined in this section transform a stream of <a>code points</a> into a stream of tokens.

<h4 id="consume-token">

Consume a token</h4>

This section describes how to <dfn for=tokenizer>consume a token</dfn> from a stream of <a>code points</a>.

It additionally takes an optional boolean |unicode ranges allowed|,

defaulting to false.

It will return a single token of any type.

<a>Consume comments</a>.

Consume the <a>next input code point</a>.

<dl>

<dt><a>whitespace</a>

<dd>

Consume as much <a>whitespace</a> as possible.

Return a <<whitespace-token>>.

<dt>U+0022 QUOTATION MARK (")

<dd>

<a>Consume a string token</a>

and return it.

<dt>U+0023 NUMBER SIGN (#)

<dd>

If the <a>next input code point</a> is an <a>ident code point</a>

or the <a lt="next input code point">next two input code points</a>

<a>are a valid escape</a>,

then: