Skip to content

Commit e1de88c

Browse files
committed
[css-syntax] Initial draft of the CSS Stylesheets section.
1 parent 3e01032 commit e1de88c

2 files changed

Lines changed: 210 additions & 7 deletions

File tree

css-syntax/Overview.html

Lines changed: 110 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ <h2 class="no-num no-toc no-ref" id=contents><span class=content>Table of conten
115115
Informal Syntax Description</a><li><a href=#the-anb-type><span class=secno>6.2</span>
116116
The <code>&lt;an+b&gt;</code> type</a></ul><li><a href=#rule-defs><span class=secno>7</span>
117117
Defining Grammars for Rules and Other Values</a><ul class=toc><li><a href=#declaration-rule-list><span class=secno>7.1</span>
118-
Defining Block Contents: the <var>&lt;declaration-list&gt;</var>, <var>&lt;rule-list&gt;</var>, and <var>&lt;stylesheet&gt;</var> productions</a></ul><li><a href=#serialization><span class=secno>8</span>Serialization</a><ul class=toc><li><a href=#serializing-anb><span class=secno>8.1</span>
119-
Serializing <var>&lt;an+b&gt;</var></a></ul><li><a href=#changes><span class=secno>9</span>Changes from CSS 2.1 and Selectors Level 3</a><li><a href=#acknowledgments><span class=secno></span>
118+
Defining Block Contents: the <var>&lt;declaration-list&gt;</var>, <var>&lt;rule-list&gt;</var>, and <var>&lt;stylesheet&gt;</var> productions</a></ul><li><a href=#css-stylesheets><span class=secno>8</span>CSS stylesheets</a><ul class=toc><li><a href=#style-rules><span class=secno>8.1</span>Style rules</a><li><a href=#charset-rules><span class=secno>8.2</span><span class=css data-autolink=maybe>@charset</span> rules</a><li><a href=#other-at-rules-rules><span class=secno>8.3</span>Other at-rules rules</a></ul><li><a href=#serialization><span class=secno>9</span>Serialization</a><ul class=toc><li><a href=#serializing-anb><span class=secno>9.1</span>
119+
Serializing <var>&lt;an+b&gt;</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>
120120
Acknowledgments</a><li><a href=#conformance><span class=secno></span>
121121
Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span>
122122
Document conventions</a><li><a href=#conformance-classes><span class=secno></span>
@@ -2688,9 +2688,108 @@ <h3 data-level=7.1 id=declaration-rule-list><span class=secno>7.1 </span><span c
26882688
</div>
26892689

26902690

2691+
<h2 data-level=8 id=css-stylesheets><span class=secno>8 </span><span class=content>CSS stylesheets</span><a class=section-link href=#css-stylesheets>§</a></h2>
26912692

2693+
<p> A CSS stylesheet is parsed with <a href=#parse-a-stylesheet0>Parse a stylesheet</a>,
2694+
interpreting the resulting <a href=#qualified-rule>qualified rules</a> and <a href=#at-rule>at-rules</a> as follows.
2695+
Each of these is either transformed into a <a href=#style-rules0>style rule</a> or another type of rule,
2696+
or is found invalid. Invalid rules are ignored with a <a href=#parse-errors>parse errors</a>.
26922697

2693-
<h2 data-level=8 id=serialization><span class=secno>8 </span><span class=content>Serialization</span><a class=section-link href=#serialization>§</a></h2>
2698+
2699+
<h3 data-level=8.1 id=style-rules><span class=secno>8.1 </span><span class=content>Style rules</span><a class=section-link href=#style-rules>§</a></h3>
2700+
2701+
<p>
2702+
<dfn data-dfn-type=link id=style-rules0 title="style rule|style rules">Style rules</dfn> are <a href=#qualified-rule>qualified rules</a>
2703+
that associate a <a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a> <a data-autolink=biblio data-biblio-type=normative href=#select title=SELECT>[SELECT]</a>
2704+
with a list of property declarations.
2705+
They are also called
2706+
<a href=http://www.w3.org/TR/CSS21/syndata.html#rule-sets>rule sets</a> in <a data-autolink=biblio data-biblio-type=normative href=#css21 title=CSS21>[CSS21]</a>.
2707+
CSS Cascading and Inheritance <a data-autolink=biblio data-biblio-type=normative href=#css3cascade title=CSS3CASCADE>[CSS3CASCADE]</a> defines how style rules participate in the cascade.
2708+
2709+
<p>
2710+
The prelude of the qualified rule is parsed as a
2711+
<a href=http://dev.w3.org/csswg/selectors4/#selector-list>selector list</a>.
2712+
A style rule with an invalid selector is invalid: the whole rule is ignored.
2713+
2714+
<p>
2715+
The content of the qualified rule’s block is parsed as a
2716+
<a href=#parse-a-list-of-declarations0 title="parse a list of declarations">list of declarations</a>.
2717+
Unless defined otherwise by another specification or a future level of this specification,
2718+
at-rules in that list are invalid.
2719+
Declaration for an unknown CSS property
2720+
or whose value does not match the syntax defined by the property are invalid.
2721+
Invalid declarations or at-rules are ignored with a <a href=#parse-errors>parse error</a>,
2722+
they do not make the rule invalid.
2723+
Unless otherwise specified, property names are <a href=#ascii-case-insensitive>ASCII case-insensitive</a>.
2724+
2725+
<p class=note>
2726+
The name of Custom Properties <a data-autolink=biblio data-biblio-type=informative href=#css-variables title=CSS-VARIABLES>[CSS-VARIABLES]</a> is case-sensitive.
2727+
2728+
<p>
2729+
<a href=#qualified-rule>Qualified rules</a> at the top-level of a CSS stylesheet are style rules.
2730+
Qualified rules in other contexts may or may not be style rules,
2731+
as defined by the context.
2732+
2733+
<p class=note>
2734+
For example qualified rules inside <span class=css data-autolink=maybe>@media</span> rules <a data-autolink=biblio data-biblio-type=informative href=#css3-conditional title=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]</a> are style rules,
2735+
but not they’re not inside <span class=css data-autolink=maybe>@keyframes</span> rules <a data-autolink=biblio data-biblio-type=informative href=#css3-animations title=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]</a>.
2736+
2737+
2738+
<h3 data-level=8.2 id=charset-rules><span class=secno>8.2 </span><span class=content><span class=css data-autolink=maybe>@charset</span> rules</span><a class=section-link href=#charset-rules>§</a></h3>
2739+
2740+
<p>
2741+
<dfn data-dfn-type=at-rule id=charset-rules0><span class=css data-autolink=maybe>@charset</span> rules</dfn> are <a href=#at-rule>at-rules</a> whose name is an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for "charset".
2742+
2743+
<p>
2744+
An <span class=css data-autolink=maybe>@charset</span> rule is invalid if it is not at the top-level of a stylesheet,
2745+
if it is not the very first rule of a stylesheet,
2746+
or if does not match the following <a href=#rule-defs>grammar</a>:
2747+
2748+
<pre>&lt;at-charset-rule&gt; = @charset 〈string〉;</pre>
2749+
<p>
2750+
<span class=css data-autolink=maybe>@charset</span> rules have an <dfn data-dfn-type=link id=at-charset-encoding>encoding</dfn>,
2751+
given by the value of the 〈string〉 token.
2752+
2753+
<div class=issue>
2754+
<p>
2755+
Although I don’t think it make sense,
2756+
current implementations seem to consider "valid" (and reflect in <a data-autolink=biblio data-biblio-type=informative href=#cssom title=CSSOM>[CSSOM]</a>)
2757+
<span class=css data-autolink=maybe>@charset</span> rules that:
2758+
2759+
<p> <ul>
2760+
<li>
2761+
Don’t match the byte pattern that
2762+
<a href=#the-input-byte-stream>The input byte stream</a> looks for,
2763+
<li>
2764+
or contain an invalid encoding name,
2765+
<li>
2766+
or are in a stylesheet that was not decoded from bytes.
2767+
(e.g. HTML <code>style</code> element.)
2768+
</ul>
2769+
</div>
2770+
2771+
<p class=note>
2772+
<span class=css data-autolink=maybe>@charset</span> rules may help
2773+
<a href=#the-input-byte-stream>determine the character encoding</a>
2774+
of a stylesheet parse from bytes,
2775+
but they don’t have any other effect.
2776+
2777+
<h3 data-level=8.3 id=other-at-rules-rules><span class=secno>8.3 </span><span class=content>Other at-rules rules</span><a class=section-link href=#other-at-rules-rules>§</a></h3>
2778+
2779+
<p>
2780+
Other specifications may define specific types of at-rules based on their name.
2781+
Such definitions must include what contexts a given type of at-rule is valid in.
2782+
At-rules of unknown type are invalid.
2783+
2784+
<p class=example>
2785+
<span class=css data-autolink=maybe>@import</span> rules <a data-autolink=biblio data-biblio-type=informative href=#css3cascade title=CSS3CASCADE>[CSS3CASCADE]</a> must be at the top-level of a stylesheet,
2786+
after <span class=css data-autolink=maybe>@charset</span> rules, and before any other rules.
2787+
2788+
<p class=example>
2789+
Margin rules <a data-autolink=biblio data-biblio-type=informative href=#css3page title=CSS3PAGE>[CSS3PAGE]</a> must be directly inside a <span class=css data-autolink=maybe>@page</span> rule.
2790+
2791+
2792+
<h2 data-level=9 id=serialization><span class=secno>9 </span><span class=content>Serialization</span><a class=section-link href=#serialization>§</a></h2>
26942793

26952794
<p> This specification does not define how to serialize CSS in general,
26962795
leaving that task to the CSSOM and individual feature specifications.
@@ -2737,7 +2836,7 @@ <h2 data-level=8 id=serialization><span class=secno>8 </span><span class=content
27372836
so the above rule reinserts the minimum number of comments into the serialized text to ensure an accurate round-trip.
27382837
(Roughly. The 〈delim〉 rules are slightly too powerful, for simplicity.)
27392838

2740-
<h3 data-level=8.1 id=serializing-anb><span class=secno>8.1 </span><span class=content>
2839+
<h3 data-level=9.1 id=serializing-anb><span class=secno>9.1 </span><span class=content>
27412840
Serializing <var>&lt;an+b&gt;</var></span><a class=section-link href=#serializing-anb>§</a></h3>
27422841

27432842
<p> To serialize an <var>&lt;an+b&gt;</var> value,
@@ -2768,7 +2867,7 @@ <h3 data-level=8.1 id=serializing-anb><span class=secno>8.1 </span><span class=c
27682867

27692868
<p> Return <var>s</var>.
27702869

2771-
<h2 data-level=9 id=changes><span class=secno>9 </span><span class=content>Changes from CSS 2.1 and Selectors Level 3</span><a class=section-link href=#changes>§</a></h2>
2870+
<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>
27722871

27732872
<p> <em>This section is non-normative.</em>
27742873

@@ -3047,11 +3146,11 @@ <h2 class="no-num no-ref" id=references><span class=content>
30473146

30483147
<h3 class="no-num no-ref" id=normative><span class=content>
30493148
Normative References</span><a class=section-link href=#normative>§</a></h3>
3050-
<div data-fill-with=normative-references><dl><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></dl></div>
3149+
<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>
30513150

30523151
<h3 class="no-num no-ref" id=informative><span class=content>
30533152
Informative References</span><a class=section-link href=#informative>§</a></h3>
3054-
<div data-fill-with=informative-references><dl><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><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>
3153+
<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=css3page title=CSS3PAGE>[CSS3PAGE]<dd>Håkon Wium Lie; Melinda Grant. <a href=http://www.w3.org/TR/2006/WD-css3-page-20061010>CSS3 Module: Paged Media</a>. 10 October 2006. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2006/WD-css3-page-20061010>http://www.w3.org/TR/2006/WD-css3-page-20061010</a><dt id=cssom title=CSSOM>[CSSOM]<dd>Anne van Kesteren. <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>CSSOM</a>. 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>http://www.w3.org/TR/2011/WD-cssom-20110712/</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>
30553154

30563155
<h2 class="no-num no-ref" id=index><span class=content>
30573156
Index</span><a class=section-link href=#index>§</a></h2>
@@ -3063,6 +3162,7 @@ <h2 class="no-num no-ref" id=index><span class=content>
30633162
<li>ASCII case-insensitive, <a href=#ascii-case-insensitive title="section 5.2">5.2</a>
30643163
<li>at-rule, <a href=#at-rule title="section 5">5</a>
30653164
<li>B, <a href=#b title="section 6">6</a>
3165+
<li>@charset rules, <a href=#charset-rules0 title="section 8.2">8.2</a>
30663166
<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>
30673167
<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>
30683168
<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>
@@ -3094,6 +3194,7 @@ <h2 class="no-num no-ref" id=index><span class=content>
30943194
<li>&lt;declaration-list&gt;, <a href=#declaration-list title="section 7.1">7.1</a>
30953195
<li>decode, <a href=#decode title="section 3.2">3.2</a>
30963196
<li>digit, <a href=#digit title="section 4.2">4.2</a>
3197+
<li>encoding, <a href=#at-charset-encoding title="section 8.2">8.2</a>
30973198
<li>ending token, <a href=#ending-token title="section 5.4.7">5.4.7</a>
30983199
<li>end of the range, <a href=#end-of-the-range title="section 4.3.15">4.3.15</a>
30993200
<li>〈EOF〉, <a href=#eof title="section 5.2">5.2</a>
@@ -3138,6 +3239,8 @@ <h2 class="no-num no-ref" id=index><span class=content>
31383239
<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>
31393240
<li>start with an identifier, <a href=#check-if-three-characters-would-start-an-identifier0 title="section 4.3.9">4.3.9</a>
31403241
<li>start with a number, <a href=#check-if-three-characters-would-start-a-number0 title="section 4.3.10">4.3.10</a>
3242+
<li>style rule, <a href=#style-rules0 title="section 8.1">8.1</a>
3243+
<li>style rules, <a href=#style-rules0 title="section 8.1">8.1</a>
31413244
<li>&lt;stylesheet&gt;, <a href=#stylesheet title="section 7.1">7.1</a>
31423245
<li>top-level flag, <a href=#top-level-flag title="section 5.4.1">5.4.1</a>
31433246
<li>uppercase letter, <a href=#uppercase-letter title="section 4.2">4.2</a>

0 commit comments

Comments
 (0)