You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3232 lines
110 KiB
3232 lines
110 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<!-- vim:expandtab:tabstop=2:shiftwidth=2:textwidth=72:
|
|
-->
|
|
|
|
<html><!-- the command line to process is this is:
|
|
|
|
num -l 2 template.html | toc -l 2 | incl | xref | index |\
|
|
perl -I../bin ../bin/propindex | cite-mkbib ../biblio.ref \
|
|
>template-processed.html
|
|
|
|
|
|
To do: add longdesc
|
|
|
|
-->
|
|
|
|
<head>
|
|
<title>CSS3 module: Syntax</title>
|
|
|
|
<link href="default.css" rel="stylesheet" type="text/css">
|
|
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet"
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class="head">
|
|
<p><a class="logo" href="http://www.w3.org/" rel="home"><img alt="W3C"
|
|
height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a>
|
|
|
|
<h1 id="css3-module">CSS3 module: Syntax</h1>
|
|
|
|
<h2 class="no-num no-toc" id="w3c-working">W3C Working Draft 13 August 2003</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-syntax">http://www.w3.org/TR/css3-syntax</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd>none
|
|
|
|
<dt>Editor:
|
|
|
|
<dd><a href="http://dbaron.org/">L. David Baron</a>, <<a
|
|
href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>>
|
|
|
|
<dt>Additional Contributors:
|
|
|
|
<dd>Original CSS2 Authors
|
|
|
|
<dd>Bert Bos (W3C), <<a href="mailto:bert@w3.org">bert@w3.org</a>>
|
|
|
|
<dd>Peter Linss (Netscape)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> Copyright</a>
|
|
© 2003 <a href="http://www.w3.org/"><abbr title="World Wide Web
|
|
Consortium">W3C</abbr></a><sup>®</sup> (<a
|
|
href="http://www.lcs.mit.edu/"><abbr title="Massachusetts Institute of
|
|
Technology">MIT</abbr></a>, <a href="http://www.ercim.org/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</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>,
|
|
<a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-software">software
|
|
licensing</a> rules apply.
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
|
|
|
|
<p>This CSS3 module describes the basic structure of CSS style sheets, some
|
|
of the details of the syntax, and the rules for parsing CSS style sheets. It
|
|
also describes (in some cases, informatively) how stylesheets can be linked
|
|
to documents and how those links can be media-dependent. Additional details
|
|
of the syntax of some parts of CSS described in other modules will be
|
|
described in those modules. The selectors module has a grammar for selectors.
|
|
Modules that define properties give the grammar for the values of those
|
|
properties, in a format described in this document.
|
|
|
|
<h2 class="no-num no-toc" id="status">Status of this document</h2>
|
|
|
|
<p><em>This section describes the status of this document at the time of its
|
|
publication. Other documents may supersede this document. A list of current
|
|
W3C publications and the latest revision of this technical report can be
|
|
found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a>
|
|
at http://www.w3.org/TR/. The latest revision can also be found by following
|
|
the "Latest Version" link above.</em>
|
|
|
|
<p> This document is a draft of one of the modules of CSS Level 3 (CSS3).
|
|
Some parts of the document are derived from the CSS Level 1 and CSS Level 2
|
|
recommendations, and those parts are thus relatively stable. However, it is
|
|
otherwise an early draft, and considerable revision is expected in later
|
|
drafts, especially in formalization of error handling behavior, the
|
|
conformance requirements for partial implementations (given the
|
|
modularization of CSS3), and integration with other CSS3 modules.
|
|
|
|
<p>This document is a working draft of the CSS working group which is part of
|
|
the <a href="http://www.w3.org/Style/">style activity</a> (see <a
|
|
href="http://www.w3.org/Style/Activity">summary</a>).
|
|
|
|
<p>The working group would like to receive feedback: discussion takes place
|
|
on the (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a
|
|
href="http://www.w3.org/Mail/Lists.html#www-style">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>). W3C Members can
|
|
also send comments directly to the CSS working group.
|
|
|
|
<p>This is a draft document and may be updated, replaced or obsoleted by
|
|
other documents at any time. It is inappropriate to cite this document as
|
|
other than work in progress. Its publication does not imply endorsement by
|
|
the W3C membership or the <a href="http://www.w3.org/Style/Group/">CSS &
|
|
FP Working Group</a> (<a
|
|
href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).
|
|
|
|
<p>Patent disclosures relevant to CSS may be found on the Working Group's
|
|
public <a href="http://www.w3.org/Style/CSS/Disclosures"
|
|
rel="disclosure">patent disclosure page.</a>
|
|
|
|
<p>This document may be available in translations in the future. The English
|
|
version of this specification is the only normative version.
|
|
|
|
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class="toc">
|
|
<li><a href="#dependencies"><span class="secno">1. </span>Dependencies on
|
|
other modules</a>
|
|
|
|
<li><a href="#introduction"><span class="secno">2. </span>Introduction</a>
|
|
|
|
<li><a href="#css-style"><span class="secno">3. </span>CSS style sheet
|
|
representation</a>
|
|
<ul class="toc">
|
|
<li><a href="#referring"><span class="secno">3.1. </span>Referring to
|
|
characters not represented in a character encoding</a>
|
|
|
|
<li><a href="#the-textcss"><span class="secno">3.2. </span>The <dfn
|
|
id="textcss">text/css</dfn> content type</a>
|
|
</ul>
|
|
|
|
<li><a href="#syntax"><span class="secno">4. </span>General syntax of CSS</a>
|
|
|
|
<ul class="toc">
|
|
<li><a href="#characters"><span class="secno">4.1. </span>Characters and
|
|
case</a>
|
|
|
|
<li><a href="#tokenization"><span class="secno">4.2. </span>Tokenization</a>
|
|
|
|
<li><a href="#grammar"><span class="secno">4.3. </span>Grammar</a>
|
|
<ul class="toc">
|
|
<li><a href="#principles"><span class="secno">4.3.1. </span>Principles of CSS
|
|
error handling</a>
|
|
|
|
<li><a href="#style"><span class="secno">4.3.2. </span>Style sheets</a>
|
|
</ul>
|
|
|
|
<li><a href="#keywords"><span class="secno">4.4. </span>Keywords</a>
|
|
|
|
<li><a href="#statements"><span class="secno">4.5. </span>Statements</a>
|
|
|
|
<li><a href="#at-rules"><span class="secno">4.6. </span><dfn
|
|
id="at-rules0">At-rules</dfn></a>
|
|
|
|
<li><a href="#blocks"><span class="secno">4.7. </span><dfn
|
|
id="blocks0">Blocks</dfn></a>
|
|
|
|
<li><a href="#rule-sets"><span class="secno">4.8. </span>Rule sets,
|
|
declaration blocks, and selectors</a>
|
|
|
|
<li><a href="#declarations"><span class="secno">4.9. </span>Declarations and
|
|
properties</a>
|
|
|
|
<li><a href="#comments"><span class="secno">4.10. </span><dfn
|
|
id="comments0">Comments</dfn></a>
|
|
</ul>
|
|
|
|
<li><a href="#error-handling"><span class="secno">5. </span>Rules for
|
|
handling parsing errors or unsupported features</a>
|
|
<ul class="toc">
|
|
<li><a href="#partial"><span class="secno">5.1. </span>Partial
|
|
implementations</a>
|
|
</ul>
|
|
|
|
<li><a href="#vendor-specific"><span class="secno">6. </span>Vendor-specific
|
|
extensions</a>
|
|
<ul class="toc">
|
|
<li><a href="#historical"><span class="secno">6.1. </span>Historical
|
|
notes</a>
|
|
</ul>
|
|
|
|
<li><a href="#associating"><span class="secno">7. </span>Associating style
|
|
sheets with documents</a>
|
|
<ul class="toc">
|
|
<li><a href="#media"><span class="secno">7.1. </span>Media types</a>
|
|
<ul class="toc">
|
|
<li><a href="#introduction0"><span class="secno">7.1.1. </span>Introduction
|
|
to media types</a>
|
|
|
|
<li><a href="#specifying"><span class="secno">7.1.2. </span>Specifying
|
|
media-dependent style sheets</a>
|
|
|
|
<li><a href="#at-media-rule"><span class="secno">7.1.3. </span>The
|
|
<code>@media</code> rule</a>
|
|
|
|
<li><a href="#media-types"><span class="secno">7.1.4. </span>Recognized media
|
|
types</a>
|
|
|
|
<li><a href="#extensions"><span class="secno">7.1.5. </span>Extensions to
|
|
media types</a>
|
|
</ul>
|
|
|
|
<li><a href="#associating-UA"><span class="secno">7.2. </span>User-agent
|
|
style sheets</a>
|
|
|
|
<li><a href="#associating-user"><span class="secno">7.3. </span>User style
|
|
sheets</a>
|
|
|
|
<li><a href="#associating-author"><span class="secno">7.4. </span>Author
|
|
style sheets</a>
|
|
|
|
<li><a href="#at-import"><span class="secno">7.5. </span>Style sheets
|
|
including other style sheets: the <code>@import</code> rule</a>
|
|
</ul>
|
|
|
|
<li><a href="#defining"><span class="secno">8. </span>Defining namespaces:
|
|
the <code>@namespace</code> rule</a>
|
|
|
|
<li><a href="#conf"><span class="secno">9. </span>Conformance</a>
|
|
<ul class="toc">
|
|
<li><a href="#definitions"><span class="secno">9.1. </span>Definitions</a>
|
|
|
|
<li><a href="#conf-UA"><span class="secno">9.2. </span>User agent
|
|
conformance</a>
|
|
<ul class="toc">
|
|
<li><a href="#error"><span class="secno">9.2.1. </span>Error conditions</a>
|
|
</ul>
|
|
|
|
<li><a href="#conf-SS"><span class="secno">9.3. </span>Style sheet
|
|
conformance</a>
|
|
|
|
<li><a href="#conf-AT"><span class="secno">9.4. </span>Authoring tool
|
|
conformance</a>
|
|
</ul>
|
|
|
|
<li><a href="#property-defs"><span class="secno">10. </span>Format of
|
|
property definitions in other modules</a>
|
|
<ul class="toc">
|
|
<li><a href="#property-def-value"><span class="secno">10.1. </span>Value</a>
|
|
<ul class="toc">
|
|
<li><a href="#initial"><span class="secno">10.1.1.
|
|
</span><code>initial</code> and <code>inherit</code> values</a>
|
|
</ul>
|
|
|
|
<li><a href="#property-def-initial"><span class="secno">10.2.
|
|
</span>Initial</a>
|
|
|
|
<li><a href="#property-def-applies"><span class="secno">10.3. </span>Applies
|
|
to</a>
|
|
|
|
<li><a href="#property-def-inherited"><span class="secno">10.4.
|
|
</span>Inherited</a>
|
|
|
|
<li><a href="#property-def-computed"><span class="secno">10.5.
|
|
</span>Computed value</a>
|
|
|
|
<li><a href="#property-def-percent"><span class="secno">10.6.
|
|
</span>Percentage values</a>
|
|
|
|
<li><a href="#media-groups"><span class="secno">10.7. </span>Media groups</a>
|
|
|
|
<li><a href="#shorthand"><span class="secno">10.8. </span>Shorthand
|
|
properties</a>
|
|
</ul>
|
|
|
|
<li><a href="#detailed-grammar"><span class="secno">11. </span>Appendix:
|
|
Second grammar</a>
|
|
<ul class="toc">
|
|
<li><a href="#grammar0"><span class="secno">11.1. </span>Grammar</a>
|
|
|
|
<li><a href="#lexical"><span class="secno">11.2. </span>Lexical scanner</a>
|
|
</ul>
|
|
|
|
<li><a href="#changes">Changes from CSS2</a>
|
|
|
|
<li><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li><a href="#references">References</a>
|
|
<ul class="toc">
|
|
<li><a href="#normative">Normative references</a>
|
|
|
|
<li><a href="#other">Other references</a>
|
|
</ul>
|
|
|
|
<li><a href="#index">Index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<hr>
|
|
|
|
<h2 id="dependencies"><span class="secno">1. </span>Dependencies on other
|
|
modules</h2>
|
|
|
|
<p>This CSS3 module depends on the following other CSS3 modules:
|
|
|
|
<ul>
|
|
<li>Selectors <a href="#SELECT" rel="biblioentry">[SELECT]</a>
|
|
|
|
<li>CSS3 module: Values & Units <a href="#CSS3VAL"
|
|
rel="biblioentry">[CSS3VAL]</a>
|
|
|
|
<li>CSS3 module: Cascading & Inheritance <a href="#CSS3CASCADE"
|
|
rel="biblioentry">[CSS3CASCADE]</a>
|
|
</ul>
|
|
|
|
<p>It has non-normative (informative) references to the following other CSS3
|
|
modules:
|
|
|
|
<ul>
|
|
<li>Media queries <a href="#MEDIAQ" rel="biblioentry">[MEDIAQ]</a>
|
|
|
|
<li>Generated Content <a href="#CSS3GENCON"
|
|
rel="biblioentry">[CSS3GENCON]</a>
|
|
</ul>
|
|
|
|
<h2 id="introduction"><span class="secno">2. </span>Introduction</h2>
|
|
|
|
<p>This specification describes the basic syntax of CSS3 and the syntax
|
|
conventions used in the property definitions spread through the CSS3 modules.
|
|
The syntax of CSS3 has some error-handling requirements for
|
|
forward-compatibility, but much of the error-handling behavior depends on the
|
|
user agent.
|
|
|
|
<h2 id="css-style"><span class="secno">3. </span>CSS style sheet
|
|
representation</h2>
|
|
|
|
<p>A CSS style sheet is a sequence of characters from the Universal Character
|
|
Set (see <a href="#ISO10646" rel="biblioentry">[ISO10646]</a>). For
|
|
transmission and storage, these characters must be <dfn id="encoded"
|
|
title="character encoding">encoded</dfn> by a character encoding that
|
|
supports the set of characters available in US-ASCII (e.g., ISO-8859-x,
|
|
Shift_JIS, etc.). A <span class="index" id="BOM">byte order mark
|
|
(BOM)</span>, as described in section 2.7 of <a href="#UNICODE310"
|
|
rel="biblioentry">[UNICODE310]</a>, that begins the sequence of characters
|
|
should not be considered, for purposes of applying the grammar below, as a
|
|
part of the style sheet. For a good introduction to character sets and
|
|
character encodings, please consult the HTML 4.0 specification (<a
|
|
href="#HTML40" rel="biblioentry">[HTML40]</a>, chapter 5). See also the XML
|
|
1.0 specification (<a href="#XML10" rel="biblioentry">[XML10]</a>, sections
|
|
2.2 and 4.3.3).
|
|
|
|
<p>When a style sheet is embedded in another document, such as in the STYLE
|
|
element or "style" attribute of HTML, the style sheet shares the character
|
|
encoding of the whole document.
|
|
|
|
<p>When a style sheet resides in a separate file, user agents must observe
|
|
the following <span class="index" id="priorities" title="character
|
|
encoding::user agent's determination of">priorities</span> when determining a
|
|
style sheet's <span class="index" id="character0" title="character
|
|
encoding::default|default::character encoding">character encoding</span>
|
|
(from highest priority to lowest):
|
|
|
|
<ol>
|
|
<li>A character encoding specified by a higher level protocol (e.g., the
|
|
"charset" parameter to the MIME type specified in an HTTP "Content-Type"
|
|
field). (The HTTP protocol (<a href="#HTTP11" rel="biblioentry">[HTTP11]</a>,
|
|
section 3.7.1) mentions ISO-8859-1 as a default character encoding when the
|
|
"charset" parameter is absent from the "Content-Type" header field. In
|
|
practice, this recommendation has proved useless because some servers don't
|
|
allow a "charset" parameter to be sent, and others may not be configured to
|
|
send the parameter. Therefore, user agents must not assume any default value
|
|
for the "charset" parameter, but must instead look for the <span
|
|
class="index" id="charset0"><a href="#charset">@charset</a></span> rule.)
|
|
|
|
<li>The <dfn id="charset">@charset</dfn> at-rule.
|
|
|
|
<li>Assume that the style sheet is UTF-8.
|
|
</ol>
|
|
|
|
<p>Since the third point differs from CSS1 and CSS2, authors should not rely
|
|
on user agents to assume that style sheets without encoding information are
|
|
UTF-8 encoded. Authors should specify the encoding using one of the first two
|
|
methods.
|
|
|
|
<p>At most one @charset rule may appear in an external style sheet — it
|
|
must <em>not</em> appear in an embedded style sheet — and it must
|
|
appear at the very start of the style sheet, not preceded by any characters
|
|
(except for the optional Byte Order Mark <a href="#BOM">described above)</a>.
|
|
After "@charset", authors specify the name of a character encoding. The name
|
|
must be a charset name as described in the IANA registry (See <a
|
|
href="#RFC2978" rel="biblioentry">[RFC2978]</a>. Also, see <a
|
|
href="#CHARSETS" rel="biblioentry">[CHARSETS]</a> for a complete list of
|
|
charsets). For example:
|
|
|
|
<div class="example">
|
|
<p> @charset "ISO-8859-1";
|
|
</div>
|
|
|
|
<p>This specification does not mandate which character encodings a user agent
|
|
must support. <span class="issue">[Should we require a certain minimal set,
|
|
such as UTF-8 and UCS2?]</span>
|
|
|
|
<p>Note that reliance on the @charset construct theoretically poses a problem
|
|
since there is no <em>a priori</em> information on how it is encoded. In
|
|
practice, however, the encodings in wide use on the Internet are either based
|
|
on ASCII, UTF-16, UCS-4, or (rarely) on EBCDIC. This means that in general,
|
|
the initial byte values of a style sheet enable a user agent to detect the
|
|
encoding family reliably, which provides enough information to decode the
|
|
@charset rule, which in turn determines the exact character encoding.
|
|
|
|
<div class="issue">[Should this specification describe how to handle encoding
|
|
errors? Can a user agent ignore the <code><a
|
|
href="#charset">@charset</a></code> rule if it's wrong? What if the user
|
|
agent does not support the encoding used? Should this specification describe
|
|
how to handle a <code><a href="#charset">@charset</a></code> rule that
|
|
specifies a character encoding that is incompatible with the family of
|
|
encodings used to decode the <code><a href="#charset">@charset</a></code>
|
|
rule (and BOM) itself?]</div>
|
|
<!-- More examples of good encodings to use? -IJ -->
|
|
<!-- Encodings not to use? (cf. HTML 4.0) -IJ -->
|
|
|
|
<h3 id="referring"><span class="secno">3.1. </span>Referring to characters
|
|
not represented in a character encoding</h3>
|
|
|
|
<p>A style sheet may have to refer to characters that cannot be represented
|
|
in the current character encoding. These characters must be written as <span
|
|
title="backslash escapes"><a href="#character">escaped</a></span> references
|
|
to ISO 10646 characters. These escapes serve the same purpose as numeric
|
|
character references in HTML or XML documents (see <a href="#HTML40"
|
|
rel="biblioentry">[HTML40]</a>, chapters 5 and 25).
|
|
|
|
<p>The character escape mechanism should be used when only a few characters
|
|
must be represented this way. If most of a style sheet requires escaping,
|
|
authors should encode it with a more appropriate encoding (e.g., if the style
|
|
sheet contains a lot of Greek characters, authors might use "ISO-8859-7" or
|
|
"UTF-8").
|
|
|
|
<p>Intermediate processors using a different character encoding may translate
|
|
these escaped sequences into byte sequences of that encoding. Intermediate
|
|
processors must not, on the other hand, alter escape sequences that cancel
|
|
the special meaning of an ASCII character.
|
|
|
|
<p><a href="#conformance">Conforming user agents</a> must correctly map to
|
|
Unicode all characters in any character encodings that they recognize (or
|
|
they must behave as if they did).
|
|
|
|
<p>For example, a style sheet transmitted as ISO-8859-1 (Latin-1) cannot
|
|
contain Greek letters directly: "κουρος"
|
|
(Greek: "kouros") has to be written as "\3BA\3BF\3C5\3C1\3BF\3C2".
|
|
|
|
<div class="note">
|
|
<p> <em><strong>Note.</strong> In HTML 4.0, numeric character references are
|
|
interpreted in "style" attribute values but not in the content of the STYLE
|
|
element. Because of this asymmetry, we recommend that authors use the CSS
|
|
character escape mechanism rather than numeric character references for both
|
|
the "style" attribute and the STYLE element. For example, we recommend:</em>
|
|
|
|
<pre class="html-example">
|
|
<span style="voice-family: D\FC rst">...</span>
|
|
</pre>
|
|
|
|
<p><em>rather than:</em>
|
|
|
|
<pre class="html-example">
|
|
<span style="voice-family: D&#252;rst">...</span>
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id="the-textcss"><span class="secno">3.2. </span>The <dfn
|
|
id="textcss0">text/css</dfn> content type</h3>
|
|
|
|
<p>CSS style sheets that exist in separate files are sent over the Internet
|
|
as a sequence of bytes accompanied by encoding
|
|
information<!--(see <a href="#HTML40" rel="biblioentry">[HTML40]</a>, chapter 5)-->.
|
|
The structure of the transmission, termed a <dfn id="message" title="message
|
|
entity">message entity,</dfn> is defined by MIME and HTTP 1.1 (see <a
|
|
href="#RFC2045" rel="biblioentry">[RFC2045]</a> and <a href="#HTTP11"
|
|
rel="biblioentry">[HTTP11]</a>). A message entity with a content type of
|
|
"text/css" represents an independent CSS style sheet. The "text/css" content
|
|
type has been registered by RFC 2318 (<a href="#RFC2318"
|
|
rel="biblioentry">[RFC2318]</a>).
|
|
|
|
<h2 id="syntax"><span class="secno">4. </span>General syntax of CSS</h2>
|
|
|
|
<p>This section describes a grammar (and <dfn
|
|
id="forward-compatible">forward-compatible parsing</dfn> rules) common to any
|
|
version of CSS (including CSS3). Future versions of CSS will adhere to this
|
|
core syntax, although they may add additional syntactic constraints.
|
|
|
|
<p>See the <a href="#characters">section on characters and case</a> for
|
|
information on case-sensitivity.
|
|
|
|
<p>These descriptions are normative.
|
|
|
|
<h3 id="characters"><span class="secno">4.1. </span>Characters and case</h3>
|
|
|
|
<p> The following rules always hold:
|
|
|
|
<ul>
|
|
<li>
|
|
<p>All CSS style sheets are <span class="index" id="case-insensitive"
|
|
title="case sensitivity">case-insensitive</span>, except for parts that are
|
|
not under the control of CSS. For example, the case-sensitivity of values of
|
|
the HTML attributes "id" and "class", of font names, and of URIs lies outside
|
|
the scope of this specification. Note in particular that element names are
|
|
case-insensitive in HTML, but case-sensitive in XML.
|
|
|
|
<li>
|
|
<p>In CSS3, <dfn id="identifiers" title="identifier">identifiers</dfn>
|
|
(including element names, classes, and IDs in selectors (see <a
|
|
href="#SELECT" rel="biblioentry">[SELECT]</a> <span class="issue">[or is this
|
|
still true]</span>)) can contain only the characters [A-Za-z0-9] and ISO
|
|
10646 characters 161 and higher, plus the hyphen (-) and the underscore (_);
|
|
they cannot start with a digit or a hyphen followed by a digit. They can also
|
|
contain escaped characters and any ISO 10646 character as a numeric code (see
|
|
next item). <span class="example">For instance, the identifier
|
|
"<code>B&W?</code>" may be written as "<code>B\&W\?</code>" or
|
|
"<code>B\26 W\3F</code>".</span> (See <a href="#UNICODE310"
|
|
rel="biblioentry">[UNICODE310]</a> and <a href="#ISO10646"
|
|
rel="biblioentry">[ISO10646]</a>.)
|
|
|
|
<li>
|
|
<p>In CSS3, a backslash (\) character indicates three types of <dfn
|
|
id="character" title="backslash escapes">character escapes</dfn>.
|
|
|
|
<p>First, inside a string (see <a href="#CSS3VAL"
|
|
rel="biblioentry">[CSS3VAL]</a>), a backslash followed by a newline is
|
|
ignored (i.e., the string is deemed not to contain either the backslash or
|
|
the newline).
|
|
|
|
<p>Second, it cancels the meaning of special CSS characters. Any character
|
|
(except a hexadecimal digit) can be escaped with a backslash to remove its
|
|
special meaning. For example, <samp>"\""</samp> is a string consisting of one
|
|
double quote. Style sheet preprocessors must not remove these backslashes
|
|
from a style sheet since that would change the style sheet's meaning.
|
|
|
|
<p>Third, backslash escapes allow authors to refer to characters they can't
|
|
easily put in a style sheet. In this case, the backslash is followed by at
|
|
most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 (<a
|
|
href="#ISO10646" rel="biblioentry">[ISO10646]</a>) character with that
|
|
number. If a digit or letter follows the hexadecimal number, the end of the
|
|
number needs to be made clear. There are two ways to do that:
|
|
|
|
<ol>
|
|
<li>with a space (or other whitespace character): "\26 B" ("&B"). In this
|
|
case, user agents should treat a "CR/LF" pair (13/10) as a single whitespace
|
|
character.
|
|
|
|
<li>by providing exactly 6 hexadecimal digits: "\000026B" ("&B")
|
|
</ol>
|
|
|
|
<p>In fact, these two methods may be combined. Only one whitespace character
|
|
is ignored after a hexadecimal escape. Note that this means that a "real"
|
|
space after the escape sequence must itself either be escaped or doubled.
|
|
|
|
<li>
|
|
<p>Backslash escapes are always considered to be part of an <span><a
|
|
href="#identifiers">identifier</a></span> or a string (i.e., "\7B" is not
|
|
punctuation, even though "{" is, and "\32" is allowed at the start of a class
|
|
name, even though "2" is not).
|
|
</ul>
|
|
|
|
<h3 id="tokenization"><span class="secno">4.2. </span>Tokenization</h3>
|
|
|
|
<p class="issue">[This needs to be integrated with the selectors module. How
|
|
should that be done?]
|
|
|
|
<p>All levels of CSS — level 1, level 2, level 3, and any future levels
|
|
— use the same core syntax. This allows UAs to parse (though not
|
|
completely understand) style sheets written in levels of CSS that didn't
|
|
exist at the time the UAs were created. Designers can use this feature to
|
|
create style sheets that work with older user agents, while also exercising
|
|
the possibilities of the latest levels of CSS.
|
|
|
|
<p>At the lexical level, CSS style sheets consist of a sequence of tokens.
|
|
Hexadecimal codes (e.g., <code>#x20</code>) refer to ISO 10646 (<a
|
|
href="#ISO10646" rel="biblioentry">[ISO10646]</a>). In case of multiple
|
|
matches, the longest match determines the token.
|
|
|
|
<p>The following productions are <em>parts</em> of tokens:
|
|
|
|
<p class="issue">[We need something to allow signs on integers. Do we need to
|
|
go as far as css3-selectors?]
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td id="SUBTOK-ident">ident
|
|
|
|
<td>::=
|
|
|
|
<td><code>'-'? <a href="#SUBTOK-nmstart">nmstart</a> <a
|
|
href="#SUBTOK-nmchar">nmchar</a>*</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-name">name
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-nmchar">nmchar</a>+</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-nmstart">nmstart
|
|
|
|
<td>::=
|
|
|
|
<td><code>[a-zA-Z] | '_' | <a href="#SUBTOK-nonascii">nonascii</a> | <a
|
|
href="#SUBTOK-escape">escape</a></code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-nonascii">nonascii
|
|
|
|
<td>::=
|
|
|
|
<td><code>[#x80-#xD7FF#xE000-#xFFFD#x10000-#x10FFFF]</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-unicode">unicode
|
|
|
|
<td>::=
|
|
|
|
<td><code>'\' [0-9a-fA-F]{1,6} <a href="#SUBTOK-wc">wc</a>?</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-escape">escape
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-unicode">unicode</a> | '\'
|
|
[#x20-#x7E#x80-#xD7FF#xE000-#xFFFD#x10000-#x10FFFF]</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-nmchar">nmchar
|
|
|
|
<td>::=
|
|
|
|
<td><code>[a-zA-Z0-9] | '-' | '_' | <a href="#SUBTOK-nonascii">nonascii</a> |
|
|
<a href="#SUBTOK-escape">escape</a></code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-num">num
|
|
|
|
<td>::=
|
|
|
|
<td><code>[0-9]+ | [0-9]* '.' [0-9]+</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-string">string
|
|
|
|
<td>::=
|
|
|
|
<td><code>'"' (<a href="#SUBTOK-stringchar">stringchar</a> | "'")* '"' | "'"
|
|
(<a href="#SUBTOK-stringchar">stringchar</a> | '"')* "'"</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-stringchar">stringchar
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-urlchar">urlchar</a> | #x20 | '\' <a
|
|
href="#SUBTOK-nl">nl</a></code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-urlchar">urlchar
|
|
|
|
<td>::=
|
|
|
|
<td><code>[#x9#x21#x23-#x26#x27-#x7E] | <a
|
|
href="#SUBTOK-nonascii">nonascii</a> | <a
|
|
href="#SUBTOK-escape">escape</a></code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-nl">nl
|
|
|
|
<td>::=
|
|
|
|
<td><code>#xA | #xD #xA | #xD | #xC</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-w">w
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-wc">wc</a>*</code>
|
|
|
|
<tr>
|
|
<td id="SUBTOK-wc">wc
|
|
|
|
<td>::=
|
|
|
|
<td><code>#x9 | #xA | #xC | #xD | #x20</code>
|
|
</table>
|
|
|
|
<p>The following productions are the complete list of tokens in CSS3:
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td id="TOK-IDENT">IDENT
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-ident">ident</a></code>
|
|
|
|
<tr>
|
|
<td id="TOK-ATKEYWORD">ATKEYWORD
|
|
|
|
<td>::=
|
|
|
|
<td><code>'@' <a href="#SUBTOK-ident">ident</a></code>
|
|
|
|
<tr>
|
|
<td id="TOK-STRING">STRING
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-string">string</a></code>
|
|
|
|
<tr>
|
|
<td id="TOK-HASH">HASH
|
|
|
|
<td>::=
|
|
|
|
<td><code>'#' <a href="#SUBTOK-name">name</a></code>
|
|
|
|
<tr>
|
|
<td id="TOK-NUMBER">NUMBER
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-num">num</a></code>
|
|
|
|
<tr>
|
|
<td id="TOK-PERCENTAGE">PERCENTAGE
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-num">num</a> '%'</code>
|
|
|
|
<tr>
|
|
<td id="TOK-DIMENSION">DIMENSION
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-num">num</a> <a
|
|
href="#SUBTOK-ident">ident</a></code>
|
|
|
|
<tr>
|
|
<td id="TOK-URI">URI
|
|
|
|
<td>::=
|
|
|
|
<td><code>"url(" <a href="#SUBTOK-w">w</a> (<a
|
|
href="#SUBTOK-string">string</a> | <a href="#SUBTOK-urlchar">urlchar</a>* )
|
|
<a href="#SUBTOK-w">w</a> ")"</code>
|
|
|
|
<tr>
|
|
<td id="TOK-UNICODE-RANGE">UNICODE-RANGE
|
|
|
|
<td>::=
|
|
|
|
<td><code>"U+" [0-9A-F?]{1,6} ('-' [0-9A-F]{1,6})?</code>
|
|
|
|
<tr>
|
|
<td id="TOK-CDO">CDO
|
|
|
|
<td>::=
|
|
|
|
<td><code>"<!--"</code>
|
|
|
|
<tr>
|
|
<td id="TOK-CDC">CDC
|
|
|
|
<td>::=
|
|
|
|
<td><code>"-->"</code>
|
|
|
|
<tr>
|
|
<td id="TOK-S">S
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-wc">wc</a>+</code>
|
|
|
|
<tr>
|
|
<td id="TOK-COMMENT">COMMENT
|
|
|
|
<td>::=
|
|
|
|
<td><code>"/*" [^*]* '*'+ ([^/] [^*]* '*'+)* "/"</code>
|
|
|
|
<tr>
|
|
<td id="TOK-FUNCTION">FUNCTION
|
|
|
|
<td>::=
|
|
|
|
<td><code><a href="#SUBTOK-ident">ident</a> '('</code>
|
|
|
|
<tr>
|
|
<td id="TOK-INCLUDES">INCLUDES
|
|
|
|
<td>::=
|
|
|
|
<td><code>"~="</code>
|
|
|
|
<tr>
|
|
<td id="TOK-DASHMATCH">DASHMATCH
|
|
|
|
<td>::=
|
|
|
|
<td><code>"|="</code>
|
|
|
|
<tr>
|
|
<td id="TOK-PREFIXMATCH">PREFIXMATCH
|
|
|
|
<td>::=
|
|
|
|
<td><code>"^="</code>
|
|
|
|
<tr>
|
|
<td id="TOK-SUFFIXMATCH">SUFFIXMATCH
|
|
|
|
<td>::=
|
|
|
|
<td><code>"$="</code>
|
|
|
|
<tr>
|
|
<td id="TOK-SUBSTRINGMATCH">SUBSTRINGMATCH
|
|
|
|
<td>::=
|
|
|
|
<td><code>"*="</code>
|
|
|
|
<tr>
|
|
<td id="TOK-CHAR">CHAR
|
|
|
|
<td>::=
|
|
|
|
<td>any other character not matched by the above rules, except for
|
|
<code>"</code> or <code>'</code>
|
|
|
|
<tr>
|
|
<td id="TOK-BOM">BOM
|
|
|
|
<td>::=
|
|
|
|
<td><code>#xFEFF</code>
|
|
</table>
|
|
|
|
<p> Since any single character other than ' or " that cannot be part of a
|
|
larger token is a single character token, there cannot be errors in
|
|
tokenization other than the inability to tokenize an unmatched quotation
|
|
mark. If at some point it is not possible to continue tokenizing an incoming
|
|
style sheet, the remainder of the style sheet should be ignored and only the
|
|
largest initial segment of the style sheet that can be tokenized according to
|
|
the above rules (that is, the entire style sheet except for the part from the
|
|
unmatched (single or double) quotation mark to the end) should be used to
|
|
form the sequence of tokens to be parsed according to the grammar.
|
|
|
|
<p class="issue">[This isn't exactly right. Since the string token can't
|
|
contain newlines that aren't escaped by backslashes, an untokenizable
|
|
sequence can occur in the middle of a file. Would it be better to change
|
|
things so that unmatched quotation marks become single-character tokens and
|
|
all character streams are tokenizable?]
|
|
|
|
<h3 id="grammar"><span class="secno">4.3. </span>Grammar</h3>
|
|
|
|
<h4 id="principles"><span class="secno">4.3.1. </span>Principles of CSS error
|
|
handling</h4>
|
|
|
|
<p>All levels of CSS, starting from CSS1, have required that user agents
|
|
ignore certain types of invalid style sheets in well-defined ways. This
|
|
allows forward-compatibility, since it allows future extensions to CSS within
|
|
basic grammatical constraints that will be ignored in well-defined ways by
|
|
user agents implementing earlier versions of CSS.
|
|
|
|
<p>Handling of CSS that is not valid CSS3 but is valid according to the
|
|
forward-compatible syntax requires first determining the beginning and end of
|
|
the part that is invalid and then handling that part in a specified way. The
|
|
latter is described in the <a href="#error-handling">rules for handling
|
|
parsing errors</a>. The mechanism for the former is described within the
|
|
grammar.
|
|
|
|
<p>The handling of style sheets that do not parse according to the
|
|
forward-compatible core syntax is not defined by this specification. <span
|
|
class="issue">[Should it be?]</span>
|
|
|
|
<p>Certain productions within the grammar are <dfn id="error0">error handling
|
|
points</dfn>. Every error handling point has a backup production that is to
|
|
be used if it is not possible to parse the stream of tokens based on the
|
|
primary production. If the error handling production is represented as
|
|
<code>prod</code>, then the backup production is represented as
|
|
<code>FAIL(prod)</code>.
|
|
|
|
<p class="issue">[The <a href="#detailed-grammar">grammar</a> given in
|
|
Appendix D of CSS2 still needs to be incorporated into this specification.
|
|
The editor hopes that it can be done by unifying it with the
|
|
forward-compatible grammar into a single grammar that describes both the
|
|
rules for forward-compatible parsing and the syntax of what is currently
|
|
possible in CSS, but that may not be possible. However, hopefully it will be
|
|
possible to do this by describing the general grammar in terms of the
|
|
concepts described in the previous paragraph.]
|
|
|
|
<p>Excluding the transformation of a production into its backup production,
|
|
this grammar is LL(1). <span class="issue">[We should explain briefly what
|
|
this means, except that it's probably not true. It's probably just
|
|
LALR(1).]</span>
|
|
|
|
<p>The portion of a CSS style sheet that is to be used is the largest initial
|
|
stream of the tokens resulting from the <a href="#tokenization">tokenization
|
|
process</a> that can be parsed according to the grammar presented in this
|
|
chapter. (For example, if a brace closing a declaration block <span
|
|
class="issue">[link-ify this]</span> is not present, the declaration block
|
|
must be ignored since the closing brace is required to satisfy this grammar.)
|
|
<span class="issue">[This might lead to highly unexpected behavior when
|
|
there's an extra closing brace (etc.). Do we really want this?]</span>
|
|
|
|
<p>Some of the constraints of CSS are not expressed in the grammar. For
|
|
example, an <code><a href="#charset">@charset</a></code> rule is not
|
|
permitted in an embedded style sheet, or a namespace prefix that has not been
|
|
defined by an <code>@namespace</code> rule is an invalid selector. These
|
|
constraints should be handled just as a parsing error would be (by ignoring
|
|
out to the next backup production) unless specified otherwise.
|
|
|
|
<h4 id="style"><span class="secno">4.3.2. </span>Style sheets</h4>
|
|
|
|
<p>Below is the core syntax for CSS. Lowercase identifiers represent
|
|
productions in this grammar, uppercase identifiers represent tokens (see
|
|
above), and characters in single quotes (') represent CHAR tokens (see
|
|
above). The sections that follow describe how to use it.
|
|
|
|
<p class="issue">[This might need better integration with the selectors
|
|
module, although maybe it's ok.]
|
|
|
|
<pre>
|
|
stylesheet : [ CDO | CDC | S | statement ]*;
|
|
statement : ruleset | at-rule;
|
|
at-rule : ATKEYWORD S* any* [ block | ';' S* ];
|
|
block : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
|
|
ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
|
|
selector : any+;
|
|
declaration : property ':' S* value;
|
|
property : IDENT S*;
|
|
value : [ any | block | ATKEYWORD S* ]+;
|
|
any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
|
|
| DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
|
|
| FUNCTION S* any* ')' | DASHMATCH | '(' S* any* ')'
|
|
| '[' S* any* ']' ] S*;
|
|
</pre>
|
|
|
|
<div class="issue"> [The definitions of these productions should be spread
|
|
below into the prose describing what they mean. Furthermore, they should be
|
|
combined with the Appendix D grammar from CSS2, perhaps using notation like:
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>ruleset
|
|
|
|
<td>::=
|
|
|
|
<td>...
|
|
|
|
<tr>
|
|
<td>FAIL(ruleset)
|
|
|
|
<td>::=
|
|
|
|
<td>...
|
|
</table>
|
|
]</div>
|
|
|
|
<p><dfn id="comment">COMMENT</dfn> tokens do not occur in the grammar (to
|
|
keep it readable), but any number of these tokens may appear anywhere between
|
|
other tokens.
|
|
|
|
<p>The token S in the grammar above stands for <dfn
|
|
id="whitespace">whitespace</dfn>. Only the characters "space" (Unicode code
|
|
32), "tab" (9), "line feed" (10), "carriage return" (13), and "form feed"
|
|
(12) can occur in whitespace. Other space-like characters, such as "em-space"
|
|
(8195) and "ideographic space" (12288), are never part of whitespace.
|
|
|
|
<h3 id="keywords"><span class="secno">4.4. </span>Keywords</h3>
|
|
<!-- provide better explanation of where keywords appear:
|
|
media types, at-rules, etc. -IJ -->
|
|
|
|
<p>Keywords have the form of identifiers. Keywords must not be placed between
|
|
quotes ("..." or '...'). Thus,
|
|
|
|
<pre>
|
|
red
|
|
</pre>
|
|
|
|
<p>is a keyword, but
|
|
|
|
<pre>
|
|
"red"
|
|
</pre>
|
|
|
|
<p>is not. (It is a string.) Other illegal examples:
|
|
|
|
<div class="illegal-example">
|
|
<p>
|
|
|
|
<pre>
|
|
width: "auto";
|
|
border: "none";
|
|
background: "red";
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id="statements"><span class="secno">4.5. </span>Statements</h3>
|
|
|
|
<p>A CSS style sheet, for any version of CSS, consists of a list of <em
|
|
class="index" id="statements0">statements</em> (see the grammar above). There
|
|
are two kinds of statements: <em class="index" id="at-rules2"><a
|
|
href="#at-rules0">at-rules</a></em> and <em class="index" id="rule-"
|
|
title="rule sets">rule sets.</em> There may be <a
|
|
href="#whitespace">whitespace</a> around the statements.
|
|
|
|
<h3 id="at-rules"><span class="secno">4.6. </span><dfn
|
|
id="at-rules1">At-rules</dfn></h3>
|
|
|
|
<p> At-rules start with an <dfn id="at-keyword">at-keyword</dfn>, an '@'
|
|
character followed immediately by an <span><a
|
|
href="#identifiers">identifier</a></span> (for example, '@import', '@page').
|
|
|
|
<p> An at-rule consists of everything up to and including the next semicolon
|
|
(;) or the next <a href="#block">block,</a> whichever comes first. A CSS user
|
|
agent that encounters an unrecognized or misplaced at-rule must <span
|
|
class="index" id="ignore1"><a href="#ignore">ignore</a></span> the whole of
|
|
the at-rule and continue parsing after it.
|
|
|
|
<div class="illegal-example">
|
|
<p> Assume, for example, that a CSS3 parser encounters this style sheet:
|
|
|
|
<pre>
|
|
@import "subs.css";
|
|
h1 { color: blue }
|
|
@import "list.css";
|
|
</pre>
|
|
|
|
<p>The second '<code><a href="#import">@import</a></code>' is illegal
|
|
according to CSS3 since '<code><a href="#import">@import</a></code>' rules
|
|
must occur before all rules other than '<code><a
|
|
href="#charset">@charset</a></code>' rules. The CSS3 parser <span
|
|
class="index" id="ignores" title="ignore"><a
|
|
href="#ignore">ignores</a></span> the whole at-rule, effectively reducing the
|
|
style sheet to:
|
|
|
|
<pre>
|
|
@import "subs.css";
|
|
h1 { color: blue }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="illegal-example">
|
|
<p> In the following example, the second '@import' rule is invalid, since it
|
|
occurs inside a '@media' <a href="#block">block</a>.
|
|
|
|
<pre>
|
|
@import "subs.css";
|
|
@media print {
|
|
@import "print-main.css";
|
|
BODY { font-size: 10pt }
|
|
}
|
|
h1 {color: blue }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id="blocks"><span class="secno">4.7. </span><dfn
|
|
id="blocks1">Blocks</dfn></h3>
|
|
|
|
<p> A <span class="index" id="block"><em>block</em></span> starts with a left
|
|
curly brace ({) and ends with the matching right curly brace (}). In between
|
|
there may be any characters, except that parentheses (( )), brackets
|
|
([ ]) and braces ({ }) must always occur in matching pairs and may
|
|
be nested. Single (') and double quotes (") <!-- " --> must also occur in
|
|
matching pairs, and characters between them are parsed as a <span
|
|
class="index" id="string">string</span>. See <a
|
|
href="#tokenization">Tokenization</a> above for the definition of a string.
|
|
|
|
<div class="illegal-example">
|
|
<p> Here is an example of a block. Note that the right brace between the
|
|
double quotes does not match the opening brace of the block, and that the
|
|
second single quote is an <span title="backslash escapes"><a
|
|
href="#character">escaped character</a></span>, and thus doesn't match the
|
|
first single quote:
|
|
|
|
<pre>
|
|
{ causta: "}" + ({7} * '\'') }
|
|
</pre>
|
|
|
|
<p>Note that the above rule is not valid CSS3, but it is still a block as
|
|
defined above.
|
|
</div>
|
|
|
|
<h3 id="rule-sets"><span class="secno">4.8. </span>Rule sets, declaration
|
|
blocks, and selectors</h3>
|
|
|
|
<p> A rule set (also called "rule") consists of a selector followed by a
|
|
declaration block.
|
|
|
|
<p> A <dfn id="declaration-block">declaration-block</dfn> (also called a
|
|
{}-block in the following text) starts with a left curly brace ({) and ends
|
|
with the matching right curly brace (}). In between there must be a list of
|
|
zero or more semicolon-separated (;) declarations.
|
|
|
|
<p>The <dfn id="selector">selector</dfn> (see the Selectors module <a
|
|
href="#SELECT" rel="biblioentry">[SELECT]</a>) consists of everything up to
|
|
(but not including) the first left curly brace ({). A selector always goes
|
|
together with a {}-block. When a user agent can't parse the selector (i.e.,
|
|
it is not valid CSS3), it must <span class="index" id="ignore2"><a
|
|
href="#ignore">ignore</a></span> the {}-block as well.
|
|
|
|
<p>CSS3 gives a special meaning to the comma (,) in selectors. However, since
|
|
it is not known if the comma may acquire other meanings in future versions of
|
|
CSS, the whole statement should be <span class="index" id="ignored"
|
|
title="ignore"><a href="#ignore">ignored</a></span> if there is an error
|
|
anywhere in the selector, even though the rest of the selector may look
|
|
reasonable in CSS3.
|
|
|
|
<div class="illegal-example">
|
|
<p>For example, since the "&" is not a valid token in a CSS3 selector, a
|
|
CSS3 user agent must <span class="index" id="ignore3"><a
|
|
href="#ignore">ignore</a></span> the whole second line, and not set the color
|
|
of H3 to red:
|
|
|
|
<pre>
|
|
h1, h2 {color: green }
|
|
h3, h4 & h5 {color: red }
|
|
h6 {color: black }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>
|
|
|
|
<p>Here is a more complex example. The first two pairs of curly braces are
|
|
inside a string, and do not mark the end of the selector. This is a valid
|
|
CSS3 statement.
|
|
|
|
<pre>
|
|
p[example="public class foo\
|
|
{\
|
|
private int x;\
|
|
\
|
|
foo(int x) {\
|
|
this.x = x;\
|
|
}\
|
|
\
|
|
}"] { color: red }
|
|
</pre>
|
|
|
|
<div class="note">
|
|
<p> <em><strong>Note.</strong> The <span class="css">\</span> characters in
|
|
the above example cause the newlines to be ignored. Newlines can be placed in
|
|
strings only using the correct numeric character escape. See <a
|
|
href="#characters">characters and case</a> above. </em>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id="declarations"><span class="secno">4.9. </span>Declarations and
|
|
properties</h3>
|
|
|
|
<p> A <dfn id="declaration">declaration</dfn> is either empty or consists of
|
|
a <dfn id="property">property</dfn>, followed by a colon (:), followed by a
|
|
value. Around each of these there may be <a
|
|
href="#whitespace">whitespace</a>.
|
|
|
|
<p>Because of the way selectors work, multiple declarations for the same
|
|
selector may be organized into semicolon (;) separated groups.
|
|
|
|
<div class="example">
|
|
<p> Thus, the following rules:
|
|
|
|
<pre>
|
|
h1 { font-weight: bold }
|
|
h1 { font-size: 2em }
|
|
h1 { line-height: 1.2 }
|
|
h1 { font-family: Helvetica, Arial, sans-serif }
|
|
h1 { font-variant: normal }
|
|
h1 { font-style: normal }
|
|
</pre>
|
|
|
|
<p>are equivalent to:
|
|
|
|
<pre>
|
|
h1 {
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
line-height: 1.2;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-variant: normal;
|
|
font-style: normal
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>A property is an <span><a href="#identifiers">identifier</a></span>. Any
|
|
character may occur in the value, but parentheses ("( )"), brackets
|
|
("[ ]"), braces ("{ }"), single quotes (') and double quotes (")
|
|
<!-- " --> must come in matching pairs, and semicolons not in strings must be
|
|
<span title="backslash escapes"><a href="#character">escaped</a></span>.
|
|
Parentheses, brackets, and braces may be nested. Inside the quotes,
|
|
characters are parsed as a string.
|
|
|
|
<p>The syntax of <dfn id="values" title="value">values</dfn> is specified
|
|
separately for each property, but in any case, values are built from
|
|
identifiers, strings, numbers, lengths, percentages, URIs, colors, angles,
|
|
times, and frequencies.
|
|
|
|
<p>A user agent must <span class="index" id="ignore4"><a
|
|
href="#ignore">ignore</a></span> a declaration with an invalid property name
|
|
or an invalid value. Every CSS3 property has its own syntactic and semantic
|
|
restrictions on the values it accepts.
|
|
|
|
<div class="illegal-example">
|
|
<p> For example, assume a CSS3 parser encounters this style sheet:
|
|
|
|
<pre>
|
|
h1 { color: red; font-style: 12px } /* Invalid value: 12px */
|
|
p { color: blue; font-vendor: any; /* Invalid prop.: font-vendor */
|
|
font-variant: small-caps }
|
|
em em { font-style: normal }
|
|
</pre>
|
|
|
|
<p> The second declaration on the first line has an invalid value '12pt'. The
|
|
second declaration on the second line contains an undefined property
|
|
'font-vendor'. The CSS3 parser will <span class="index" id="ignore5"><a
|
|
href="#ignore">ignore</a></span> these declarations, effectively reducing the
|
|
style sheet to:
|
|
|
|
<pre class="example">
|
|
h1 { color: red; }
|
|
p { color: blue; font-variant: small-caps }
|
|
em em { font-style: normal }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id="comments"><span class="secno">4.10. </span><dfn
|
|
id="comments1">Comments</dfn></h3>
|
|
|
|
<p><span class="index" id="comments2"><a href="#comments0">Comments
|
|
</a></span> begin with the characters "/*" and end with the characters "*/".
|
|
They may occur anywhere between tokens, and their contents have no influence
|
|
on the rendering. Comments may not be nested.
|
|
|
|
<p>CSS also allows the SGML comment delimiters ("<!--" and "-->") in
|
|
certain places, but they do not delimit CSS comments. They are permitted so
|
|
that style rules appearing in an HTML source document (in the STYLE element)
|
|
may be hidden from pre-HTML 3.2 user agents. See the HTML 4.0 specification
|
|
(<a href="#HTML40" rel="biblioentry">[HTML40]</a>) for more information.
|
|
|
|
<h2 id="error-handling"><span class="secno">5. </span>Rules for handling
|
|
parsing errors or unsupported features</h2>
|
|
|
|
<p class="issue">[Hopefully (assuming it can be formalized within the rules
|
|
above) this section will not need so much detail and can be folded into the
|
|
previous section.]
|
|
|
|
<p>In some cases, user agents must ignore part of an illegal style sheet.
|
|
This specification defines <dfn id="ignore">ignore</dfn> to mean that the
|
|
user agent parses the illegal part according to the grammar above (in order
|
|
to find its beginning and end), but otherwise acts as if it had not been
|
|
there.
|
|
|
|
<p>If a style sheet cannot be parsed according to the grammar above, the user
|
|
agent must behave the same as it would if the style sheet had the smallest
|
|
sequence of characters removed from its end that would allow it to be parsed
|
|
according to the grammar.
|
|
|
|
<p>To ensure that new properties and new values for existing properties can
|
|
be added in the future, user agents are required to obey the following rules
|
|
when they encounter the following scenarios:
|
|
|
|
<ul>
|
|
<li><strong>Unknown properties.</strong> User agents must <span class="index"
|
|
id="ignore6"><a href="#ignore">ignore</a></span> a <a
|
|
href="#declarations">declaration</a> with an unknown property. For example,
|
|
if the style sheet is:
|
|
<pre class="illegal-example">
|
|
h1 { color: red; rotation: 70minutes }
|
|
</pre>
|
|
|
|
<p> the user agent will treat this as if the style sheet had been
|
|
|
|
<pre class="example">
|
|
H1 { color: red }
|
|
</pre>
|
|
|
|
<li id="illegalvalues"><strong>Illegal values.</strong> User agents must
|
|
ignore a declaration with an illegal value. For example:
|
|
<pre class="illegal-example">
|
|
img { float: left } /* correct CSS3 */
|
|
img { float: left here } /* "here" is not a value of 'float' */
|
|
img { background: "red" } /* keywords cannot be quoted in CSS3 */
|
|
img { border-width: 3 } /* a unit must be specified for length values */
|
|
</pre>
|
|
A CSS3 parser would honor the first rule and <span class="index"
|
|
id="ignore7"><a href="#ignore">ignore</a></span> the rest, as if the style
|
|
sheet had been:
|
|
<pre class="example">
|
|
img { float: left }
|
|
img { }
|
|
img { }
|
|
img { }
|
|
</pre>
|
|
|
|
<p>A user agent conforming to a future CSS specification may accept one or
|
|
more of the other rules as well.
|
|
|
|
<p class="issue">[A general comment on how to handle negative numbers when
|
|
disallowed might be useful. It should be a parsing error (and thus ignored).
|
|
We might want to add additional grammar productions for potentially negative
|
|
numbers.]
|
|
|
|
<li><strong>Malformed declarations.</strong> User agents must handle
|
|
unexpected tokens encountered while parsing a declaration by reading until
|
|
the end of the declaration, while observing the rules for matching pairs of
|
|
(), [], {}, "", and '', and correctly handling escapes. For example, a
|
|
malformed declaration may be missing a property, colon (:) or value. The
|
|
following are all equivalent:
|
|
<pre class="example"><code>
|
|
p { color:green }
|
|
p { color:green; color } /* malformed declaration missing ':', value */
|
|
p { color:red; color; color:green } /* same with expected recovery */
|
|
p { color:green; color: } /* malformed declaration missing value */
|
|
p { color:red; color:; color:green } /* same with expected recovery */
|
|
p { color:green; color{;color:maroon} } /* unexpected tokens { } */
|
|
p { color:red; color{;color:maroon}; color:green } /* same with recovery */
|
|
</code></pre>
|
|
|
|
<li><strong>Invalid at-keywords.</strong> User agents must <span
|
|
class="index" id="ignore8"><a href="#ignore">ignore</a></span> an invalid
|
|
at-keyword together with everything following it, up to and including the
|
|
next semicolon (;) or block ({...}), whichever comes first. For example,
|
|
consider the following:
|
|
<pre class="illegal-example">
|
|
@three-dee {
|
|
@background-lighting {
|
|
azimuth: 30deg;
|
|
elevation: 190deg;
|
|
}
|
|
h1 { color: red }
|
|
}
|
|
h1 { color: blue }
|
|
</pre>
|
|
|
|
<p> The '@three-dee' at-rule is not part of CSS3. Therefore, the whole
|
|
at-rule (up to, and including, the third right curly brace) is <span
|
|
class="index" id="ignored." title="ignore"><a
|
|
href="#ignore">ignored.</a></span> A CSS3 user agent <span class="index"
|
|
id="ignores0" title="ignore"><a href="#ignore">ignores</a></span> it,
|
|
effectively reducing the style sheet to:
|
|
|
|
<pre class="example">
|
|
h1 { color: blue }
|
|
</pre>
|
|
|
|
<li id="unsupportedvalues">
|
|
<p><strong>Unsupported Values</strong>If a UA does not support a particular
|
|
value, it should <em><a href="#ignore">ignore</a></em> that value when
|
|
parsing stylesheets, as if that value was an <a href="#illegalvalues">illegal
|
|
value</a>. For example:
|
|
|
|
<div class="example">
|
|
<pre>
|
|
h3 {
|
|
display: inline;
|
|
display: run-in;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p> A UA that supports the 'run-in' value for the 'display' property will
|
|
accept the first display declaration and then "write over" that value with
|
|
the second display declaration. A UA that does not support the 'run-in' value
|
|
will process the first display declaration and ignore the second display
|
|
declaration.
|
|
</ul>
|
|
|
|
<h3 id="partial"><span class="secno">5.1. </span>Partial implementations</h3>
|
|
|
|
<p>CSS3, unlike CSS1 and CSS2, is modular and thus allows for partial
|
|
implementations. The conformance requirements of some modules may also allow
|
|
for conformant implementations to implement only part of a module.
|
|
|
|
<p>Implementations that do not implement a feature of any CSS3 module
|
|
(whether a property, an at-rule, or a property value) should behave as they
|
|
would according to the forward-compatible parsing rules had that feature not
|
|
been part of a known CSS specification.
|
|
|
|
<h2 id="vendor-specific"><span class="secno">6. </span>Vendor-specific
|
|
extensions</h2>
|
|
|
|
<p>Although proprietary extensions should be avoided in general, there are
|
|
situations (experiments, implementations of W3C drafts that have not yet
|
|
reached Candidate Recommendation, intra-nets, debugging, etc.) where it is
|
|
convenient to add some nonstandard, i.e., proprietary identifiers to a CSS
|
|
style sheet. It is often hard to predict how long these proprietary
|
|
extensions will be in use and hard to avoid that their names clash with new,
|
|
standard properties or with other proprietary properties. Therefore the CSS
|
|
Working Group proposes the following simple naming convention. A proprietary
|
|
name should have a prefix consisting of:
|
|
|
|
<ol>
|
|
<li>an underscore ("_") or a dash ("-"),
|
|
|
|
<li>the (possibly abbreviated) name of the company, organization, etc. that
|
|
created it,
|
|
|
|
<li>an underscore or a dash.
|
|
</ol>
|
|
|
|
<p>Some examples (and the companies/organizations that created them):
|
|
|
|
<ul>
|
|
<li><em>-moz-box-sizing,</em> <em>-moz-border-radius</em> (The Mozilla
|
|
Organization)
|
|
|
|
<li><em>-wap-accesske</em>y (The WAP Forum)
|
|
|
|
<li><em>_xyz-dwiw</em> (hypothetical)
|
|
</ul>
|
|
|
|
<p>The advantage of the initial dash is that it is not a valid start
|
|
character for identifiers in CSS, so it is guaranteed never to be used by any
|
|
current or future level of CSS. CSS-conforming parsers will skip rules that
|
|
contain identifiers with such a character. <span class="issue">[Should the
|
|
grammar allow '-' as part of identifiers or should it require that vendors
|
|
who use '-' to begin identifiers extend the grammar in their tokenizer?
|
|
Currently it does, but perhaps it shouldn't.]</span>
|
|
|
|
<p>That is also a possible disadvantage: a conforming parser will skip them,
|
|
so in order to use them, an extended parser is required.
|
|
|
|
<p>For that reason, the underscore is also proposed. Although it is a valid
|
|
start character, the CSS Working Group believes it will never define any
|
|
identifiers that start with that character.
|
|
|
|
<h3 id="historical"><span class="secno">6.1. </span>Historical notes</h3>
|
|
|
|
<p><em>This section is informative, not normative.</em>
|
|
|
|
<p>Microsoft created a number of proprietary properties for use inside their
|
|
Microsoft Office product, at a time when there was not yet a consensus in the
|
|
working group about the naming convention. They chose to prefix properties
|
|
with "mso-" rather than "-mso-".
|
|
|
|
<p>At the time of writing, the following prefixes are known to exist:
|
|
|
|
<ul>
|
|
<li><em>mso-</em> (Microsoft Corporation)
|
|
|
|
<li><em>-moz-</em> (The Mozilla Organization)
|
|
|
|
<li><em>-opera-</em> (Opera Software)
|
|
|
|
<li><em>-atsc</em>- (Advanced Television Standards Committee)
|
|
|
|
<li><em>-wap-</em> (The WAP Forum)
|
|
</ul>
|
|
|
|
<h2 id="associating"><span class="secno">7. </span>Associating style sheets
|
|
with documents</h2>
|
|
|
|
<h3 id="media"><span class="secno">7.1. </span>Media types</h3>
|
|
|
|
<p class="issue">[This section lacks testable statements.]
|
|
|
|
<h4 id="introduction0"><span class="secno">7.1.1. </span>Introduction to
|
|
media types</h4>
|
|
|
|
<p>One of the most important features of style sheets is that they specify
|
|
how a document is to be presented on different media: on the screen, on
|
|
paper, with a speech synthesizer, with a braille device, etc.
|
|
|
|
<p>Certain CSS properties are only designed for certain media (e.g., the
|
|
<span class="propinst-page-break-before">'page-break-before'</span> property
|
|
only applies to paged media). On occasion, however, style sheets for
|
|
different media types may share a property, but require different values for
|
|
that property. For example, the <span
|
|
class="propinst-font-size">'font-size'</span> property is useful both for
|
|
screen and print media. The two media types are different enough to require
|
|
different values for the common property; a document will typically need a
|
|
larger font on a computer screen than on paper. Therefore, it is necessary to
|
|
express that a style sheet, or a section of a style sheet, applies to certain
|
|
media types.
|
|
|
|
<h4 id="specifying"><span class="secno">7.1.2. </span>Specifying
|
|
media-dependent style sheets</h4>
|
|
|
|
<p>There are currently two ways to specify media dependencies for style
|
|
sheets:
|
|
|
|
<ul>
|
|
<li>Specify the target medium for a set of style rules with the <span
|
|
class="index" id="media2" title="@media"><a
|
|
href="#media0"><code>@media</code></a></span> at-rule.
|
|
<div class="example">
|
|
<p>
|
|
|
|
<pre>
|
|
@media print {
|
|
/* style rules for print go here */
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<li>
|
|
<p>Specify the target media for an entire style sheet at the point where the
|
|
stylesheet is linked to the document.
|
|
|
|
<p>If the style sheet is linked to the document by being imported (with an <a
|
|
href="#at-import"><code>@import</code> rule</a>) from another style sheet,
|
|
the target media can be specified as part of the <span class="index"
|
|
id="import0" title="@import"><a
|
|
href="#import"><code>@import</code></a></span> at-rule:
|
|
|
|
<div class="example">
|
|
<pre>
|
|
@import url("fancyfonts.css") screen;
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the style sheet is linked to the document through a <a
|
|
href="#associating-author">linking mechanism within the document</a>, then it
|
|
may be possible to specify the target medium within the document language.
|
|
For example, in HTML 4.0 (<a href="#HTML40" rel="biblioentry">[HTML40]</a>),
|
|
the <code><a href="#media0">media</a></code> attribute on the
|
|
<code>link</code> element specifies the target media of an external style
|
|
sheet:
|
|
|
|
<div class="example">
|
|
<p>
|
|
|
|
<pre>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>Link to a target medium</title>
|
|
<link rel="stylesheet" type="text/css"
|
|
media="print, handheld" href="foo.css">
|
|
</head>
|
|
<body>
|
|
<p>The body...
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
</div>
|
|
</ul>
|
|
|
|
<h4 id="at-media-rule"><span class="secno">7.1.3. </span>The <code><a
|
|
href="#media0">@media</a></code> rule</h4>
|
|
|
|
<p>An <dfn id="media0" title="@media"><code>@media</code></dfn> rule
|
|
specifies the target <a href="#media-types">media types</a> (separated by
|
|
commas) of a set of rules (delimited by curly braces). The @media construct
|
|
allows style sheet rules for various media in the same style sheet:
|
|
|
|
<div class="example">
|
|
<p>
|
|
|
|
<pre>
|
|
@media print {
|
|
body { font-size: 12pt; }
|
|
h1 { font-size: 24pt; }
|
|
}
|
|
@media screen {
|
|
body { font-size: medium; }
|
|
h1 { font-size: 2em; }
|
|
}
|
|
@media screen, print {
|
|
body { line-height: 1.2; }
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h4 id="media-types"><span class="secno">7.1.4. </span>Recognized media types</h4>
|
|
|
|
<p>A CSS <dfn id="media1">media type</dfn> names a set of CSS properties. A
|
|
user agent that claims to support a media type by name must implement all of
|
|
the properties that apply to that media type. <span class="issue">[This needs
|
|
to be relaxed to deal with profiles.]</span> (For the 'all' media type, this
|
|
means that it must support all properties that apply to all media types.
|
|
<span class="issue">[Should all be removed from the list and separated to
|
|
make this more logical?]</span>)
|
|
|
|
<p>The names chosen for CSS media types reflect target devices for which the
|
|
relevant properties make sense. The names of media types are normative. In
|
|
the following list of CSS media types, the parenthetical descriptions are not
|
|
normative. Likewise, the "Media" field in the description of each property is
|
|
informative.
|
|
|
|
<dl>
|
|
<dt><strong>all</strong>
|
|
|
|
<dd>Suitable for all devices.
|
|
|
|
<dt><strong>braille</strong>
|
|
|
|
<dd>Intended for braille tactile feedback devices.
|
|
|
|
<dt><strong>embossed</strong>
|
|
|
|
<dd>Intended for paged braille printers.
|
|
|
|
<dt><strong>handheld</strong>
|
|
|
|
<dd>Intended for handheld devices (typically small screen, limited
|
|
bandwidth).
|
|
|
|
<dt><strong>print</strong>
|
|
|
|
<dd>Intended for paged material and for documents viewed on screen in print
|
|
preview mode. Please consult the paged media module <a href="#CSS3PAGE"
|
|
rel="biblioentry">[CSS3PAGE]</a> for information about formatting issues that
|
|
are specific to paged media.
|
|
|
|
<dt><strong>projection</strong>
|
|
|
|
<dd>Intended for projected presentations. Please consult the paged media
|
|
module <a href="#CSS3PAGE" rel="biblioentry">[CSS3PAGE]</a> for information
|
|
about formatting issues that are specific to paged media.
|
|
|
|
<dt><strong>screen</strong>
|
|
|
|
<dd>Intended primarily for color computer screens.
|
|
|
|
<dt><strong>speech</strong>
|
|
|
|
<dd>Intended for speech synthesizers. See the speech module <a
|
|
href="#CSS3SPEECH" rel="biblioentry">[CSS3SPEECH]</a> for details.
|
|
|
|
<dt><strong>tty</strong>
|
|
|
|
<dd>Intended for media using a fixed-pitch character grid (such as teletypes,
|
|
terminals, or portable devices with limited display capabilities).
|
|
|
|
<dt><strong>tv</strong>
|
|
|
|
<dd>Intended for television-type devices (low resolution, color,
|
|
limited-scrollability screens, sound available).
|
|
</dl>
|
|
|
|
<p>Media type names are case-insensitive.
|
|
|
|
<p>Media types are mutually exclusive in the sense that a user agent can only
|
|
support one media type when rendering a document. However, user agents may
|
|
have different modes which support different media types.
|
|
|
|
<div class="note">
|
|
<p> <em><strong>Note.</strong> Future versions of CSS may extend this list.
|
|
Authors should not rely on media type names that are not yet defined by a CSS
|
|
specification. </em>
|
|
</div>
|
|
|
|
<h4 id="extensions"><span class="secno">7.1.5. </span>Extensions to media
|
|
types</h4>
|
|
|
|
<p>The Media Queries Module <a href="#MEDIAQ" rel="biblioentry">[MEDIAQ]</a>
|
|
defines an extended mechanism for media type specification.
|
|
|
|
<h3 id="associating-UA"><span class="secno">7.2. </span>User-agent style
|
|
sheets</h3>
|
|
|
|
<h3 id="associating-user"><span class="secno">7.3. </span>User style sheets</h3>
|
|
|
|
<h3 id="associating-author"><span class="secno">7.4. </span>Author style
|
|
sheets</h3>
|
|
|
|
<p><em>This section is informative, not normative.</em>
|
|
|
|
<p class="issue">[This section should briefly summarize the mechanisms for
|
|
associating author style sheets with documents provided by <a href="#HTML40"
|
|
rel="biblioentry">[HTML40]</a>, <a href="#CSSSTYLEATTR"
|
|
rel="biblioentry">[CSSSTYLEATTR]</a> and <a href="#XMLSTYLE"
|
|
rel="biblioentry">[XMLSTYLE]</a>.]
|
|
|
|
<h3 id="at-import"><span class="secno">7.5. </span>Style sheets including
|
|
other style sheets: the <code><a href="#import">@import</a></code> rule</h3>
|
|
|
|
<p class="issue">[When this section is rewritten to define user agent
|
|
conformance more clearly, it should state that (1) the media list specified
|
|
in an @import rule prevents the import from being processed if the medium
|
|
doesn't match, but it doesn't "associate" the media with the style sheet so
|
|
that it can't be imported some other way. (2) @import without a medium must
|
|
ignore any medium specified for the same style sheet in a link from a
|
|
document.]
|
|
|
|
<p class="issue">[Should the discussion of how imported stylesheets affect
|
|
the cascade's notion of order be here or in <a href="#CSS3CASCADE"
|
|
rel="biblioentry">[CSS3CASCADE]</a>? It probably depends on which direction
|
|
the module dependency goes.]
|
|
|
|
<p>The <dfn id="import">'@import'</dfn> rule allows users to import style
|
|
rules from other style sheets. Any @import rules must follow all @charset
|
|
rules and precede all other at-rules and rule sets in a style sheet. The
|
|
'@import' keyword must be followed by the URI of the style sheet to include.
|
|
A string is also allowed; it will be interpreted as if it had url(...) around
|
|
it.
|
|
|
|
<div class="example">
|
|
<p> The following lines are equivalent in meaning and illustrate both
|
|
'@import' syntaxes (one with "url()" and one with a bare string):
|
|
|
|
<pre>
|
|
@import "mystyle.css";
|
|
@import url("mystyle.css");
|
|
</pre>
|
|
</div>
|
|
|
|
<p>So that user agents can avoid retrieving resources for unsupported <a
|
|
href="#media-types">media types</a>, authors may specify media-dependent
|
|
<span class="index" id="import1"><a href="#import">@import</a></span> rules.
|
|
These <dfn id="conditional" title="conditional import|media-dependent
|
|
import">conditional imports</dfn> specify comma-separated media types after
|
|
the URI.
|
|
|
|
<div class="example">
|
|
<p>The following rules illustrate how @import rules can be made
|
|
media-dependent:
|
|
|
|
<pre>
|
|
@import url("fineprint.css") print;
|
|
@import url("bluish.css") projection, tv;
|
|
</pre>
|
|
</div>
|
|
|
|
<p>In the absence of any media types, the import is unconditional. Specifying
|
|
'all' for the medium has the same effect.
|
|
|
|
<h2 id="defining"><span class="secno">8. </span>Defining namespaces: the
|
|
<code>@namespace</code> rule</h2>
|
|
|
|
<p>The @namespace rule allows the style sheet author to declare a namespace
|
|
prefix and associate it to a given namespace URI. The prefix applies only to
|
|
the style sheet in which it is declared, and not any style sheets imported by
|
|
that style sheet, style sheets that import that stylesheet, or any other
|
|
style sheets applying to the document. This namespace prefix can then be used
|
|
as a namespace prefix as described in other modules, for example the
|
|
Selectors Module <a href="#SELECT" rel="biblioentry">[SELECT]</a> or the
|
|
Generated Content module <a href="#CSS3GENCON"
|
|
rel="biblioentry">[CSS3GENCON]</a>. Any @namespace rules must follow all
|
|
@import and @charset rules and precede all other at-rules and rule sets in a
|
|
style sheet. This is to avoid any confusion or issues regarding the scope of
|
|
the declared namespace.
|
|
|
|
<p>If the optional namespace prefix is omitted, then the namespace URI is
|
|
considered to be the default namespace. The default namespace applies only to
|
|
type selectors that have no explicit namespace prefix declared as described
|
|
in the Selectors Module <a href="#SELECT" rel="biblioentry">[SELECT]</a>.
|
|
|
|
<p>A prefix, once declared, may be used in selectors and property values as
|
|
described in other modules. Those modules should define the use of a
|
|
namespace prefix that has not been properly declared as a parsing error that
|
|
will cause the selector or declaration (etc.) to be considered invalid and
|
|
ignored.
|
|
|
|
<p>If a namespace prefix is declared more than once, the last occurrence will
|
|
be used.
|
|
|
|
<div class="example">
|
|
<p>Examples:
|
|
|
|
<pre>@namespace url(http://www.w3.org/1999/xhtml);
|
|
@namespace svg url(http://www.w3.org/2000/svg);</pre>
|
|
|
|
<p>The first rule declares a default namespace
|
|
<code>http://www.w3.org/1999/xhtml</code> to be applied only to type
|
|
selectors that have no explicit namespace component.
|
|
|
|
<p>The second rule declares a namespace prefix <code>svg</code> that is used
|
|
to apply the namespace <code>http://www.w3.org/2000/svg</code> where the
|
|
<code>svg</code> namespace prefix is used.
|
|
</div>
|
|
|
|
<h2 id="conf"><span class="secno">9. </span>Conformance</h2>
|
|
|
|
<p>The key words <dfn id="must">"MUST"</dfn>, <dfn id="must-not">"MUST
|
|
NOT"</dfn>, <dfn id="required">"REQUIRED"</dfn>, <dfn
|
|
id="shall">"SHALL"</dfn>, <dfn id="shall0">"SHALL NOT"</dfn>, <dfn
|
|
id="should">"SHOULD"</dfn>, <dfn id="should0">"SHOULD NOT"</dfn>, <dfn
|
|
id="recommended">"RECOMMENDED"</dfn>, <dfn id="may">"MAY"</dfn>, and <dfn
|
|
id="optional">"OPTIONAL"</dfn> in this document are to be interpreted as
|
|
described in RFC 2119 (see <a href="#RFC2119"
|
|
rel="biblioentry">[RFC2119]</a>). However, for readability, these words do
|
|
not appear in all uppercase letters in this specification.
|
|
|
|
<p>At times, this specification recommends good practice for authors and user
|
|
agents. These recommendations are not normative and conformance with this
|
|
specification does not depend on their realization. These recommendations
|
|
contain the expression "We recommend ...", "This specification recommends
|
|
...", or some similar wording.
|
|
|
|
<h3 id="definitions"><span class="secno">9.1. </span>Definitions</h3>
|
|
|
|
<p class="issue">[Some of these need heavy rewriting given modularization.
|
|
I've avoided substituting CSS3 where it's clearly not going to be
|
|
appropriate.]
|
|
|
|
<p>This module and other CSS3 modules rely on the following definitions:
|
|
|
|
<dl>
|
|
<dt><dfn id="style0">Style sheet</dfn>
|
|
|
|
<dd>A set of statements that specify presentation of a document.
|
|
<p>Style sheets may have three different origins: <a
|
|
href="#author">author</a>, <a href="#user">user</a>, and <a
|
|
href="#user-agent">user agent</a>. The interaction of these sources is
|
|
described in the cascading and inheritance module <a href="#CSS3CASCADE"
|
|
rel="biblioentry">[CSS3CASCADE]</a>.
|
|
|
|
<dt><dfn id="valid">Valid style sheet</dfn>
|
|
|
|
<dd>The validity of a style sheet depends on the level of CSS used for the
|
|
style sheet. All valid CSS1 style sheets are valid CSS 2.1 style sheets,
|
|
but some changes from CSS1 mean that a few CSS1 style sheets will have
|
|
slightly different semantics in CSS 2.1. Some features in CSS2 are not
|
|
part of CSS 2.1, so not all CSS2 style sheets are valid CSS 2.1
|
|
style sheets.
|
|
<p>A valid CSS 2.1 style sheet must be written according to the <a
|
|
href="#detailed-grammar">grammar of CSS 2.1</a>. Furthermore, it must
|
|
contain only at-rules, property names, and property values defined in this
|
|
specification. An <dfn id="illegal">illegal</dfn> (invalid) at-rule, property
|
|
name, or property value is one that is not valid.
|
|
|
|
<dt><dfn id="source">Source document</dfn>
|
|
|
|
<dd>The document to which one or more style sheets apply. This is encoded in
|
|
some language that represents the document as a tree of <a
|
|
href="#element">elements</a>. Each element consists of a name that identifies
|
|
the type of element, optionally a number of <a
|
|
href="#attribute">attributes</a>, and a (possibly empty) <a
|
|
href="#content">content</a>.
|
|
|
|
<dt><dfn id="document">Document language</dfn>
|
|
|
|
<dd>The encoding language of the source document (e.g., HTML, XHTML or SVG).
|
|
CSS is used to describe the presentation of document languages and CSS does
|
|
not change the underlying semantics of the document languages.
|
|
|
|
<dt><dfn id="element">Element</dfn>
|
|
|
|
<dd>(An SGML term, see <a href="#ISO8879" rel="biblioentry">[ISO8879]</a>.)
|
|
The primary syntactic constructs of the document language. Most CSS style
|
|
sheet rules use the names of these elements (such as P, TABLE, and OL in
|
|
HTML) to specify how the elements should be rendered.
|
|
|
|
<dt><dfn id="replaced">Replaced element</dfn>
|
|
|
|
<dd>An element for which the CSS formatter knows only the intrinsic
|
|
dimensions. In HTML, IMG and OBJECT elements can be replaced elements. For
|
|
example, the content of the IMG element is often replaced by the image that
|
|
the "src" attribute designates.
|
|
|
|
<dt><dfn id="intrinsic">Intrinsic dimensions</dfn>
|
|
|
|
<dd>The width and height as defined by the element itself, not imposed by the
|
|
surroundings. CSS does not define how the intrinsic dimensions are found. In
|
|
CSS 2.1 it is assumed that all replaced elements, and only replaced
|
|
elements, come with intrinsic dimensions.
|
|
|
|
<dt><dfn id="attribute">Attribute</dfn>
|
|
|
|
<dd>A value associated with an element, consisting of a name, and an
|
|
associated (textual) value.
|
|
|
|
<dt><dfn id="content">Content</dfn>
|
|
|
|
<dd>The content associated with an element in the source document. Some
|
|
elements have no content, in which case they are called <dfn
|
|
id="empty">empty</dfn>. The content of an element may include text, and it
|
|
may include a number of sub-elements, in which case the element is called the
|
|
<dfn id="parent">parent</dfn> of those sub-elements.
|
|
|
|
<dt><dfn id="ignore0">Ignore</dfn>
|
|
|
|
<dd>This term has three slightly different meanings in this specification.
|
|
First, a CSS parser must follow certain rules when it discovers unknown or
|
|
illegal syntax in a style sheet. The parser must then ignore certain parts of
|
|
the style sheets. The exact rules for what parts must be ignored is given in
|
|
these section: <a href="#declaration">Declarations and properties</a>, <a
|
|
href="#error-handling">Rules for handling parsing errors</a>, <a
|
|
href="#unsupportedvalues">Unsupported Values</a>, or may be explained in the
|
|
text where the term "ignore" appears. Second, a user agent may (and, in some
|
|
cases must) disregard certain properties or values in the style sheet even if
|
|
the syntax is legal. For example, table-column-group elements cannot have
|
|
borders around them, so the border properties must be ignored.
|
|
|
|
<dt><dfn id="rendered">Rendered content</dfn>
|
|
|
|
<dd>The content of an element after the rendering that applies to it
|
|
according to the relevant style sheets has been applied. The rendered content
|
|
of a <span><a href="#replaced">replaced element</a></span> comes from outside
|
|
the source document. Rendered content may also be alternate text for an
|
|
element (e.g., the value of the XHTML "alt" attribute), and may include items
|
|
inserted implicitly or explicitly by the style sheet, such as bullets,
|
|
numbering, etc.
|
|
|
|
<dt><dfn id="document0">Document tree</dfn>
|
|
|
|
<dd>The tree of elements encoded in the source document. Each element in this
|
|
tree has exactly one parent, with the exception of the <dfn
|
|
id="root">root</dfn> element, which has none.
|
|
|
|
<dt><dfn id="child">Child</dfn>
|
|
|
|
<dd>An element A is called the child of element B if and only if B is the
|
|
parent of A.
|
|
|
|
<dt><dfn id="descendant">Descendant</dfn>
|
|
|
|
<dd>An element A is called a descendant of an element B, if either (1) A is a
|
|
child of B, or (2) A is the child of some element C that is a descendant of
|
|
B.
|
|
|
|
<dt><dfn id="ancestor">Ancestor</dfn>
|
|
|
|
<dd>An element A is called an ancestor of an element B, if and only if B is a
|
|
descendant of A.
|
|
|
|
<dt><dfn id="sibling">Sibling</dfn>
|
|
|
|
<dd>An element A is called a sibling of an element B, if and only if B and A
|
|
share the same parent element. Element A is a preceding sibling if it comes
|
|
before B in the document tree. Element B is a following sibling if it comes
|
|
after A in the document tree.
|
|
|
|
<dt><dfn id="preceding" title="preceding
|
|
element|element::preceding">Preceding element</dfn>
|
|
|
|
<dd>An element A is called a preceding element of an element B, if and only
|
|
if (1) A is an ancestor of B or (2) A is a preceding sibling of B.
|
|
|
|
<dt><dfn id="following" title="following
|
|
element|element::following">Following element</dfn>
|
|
|
|
<dd>An element A is called a following element of an element B, if and only
|
|
if B is a preceding element of A.
|
|
|
|
<dt><dfn id="author">Author</dfn>
|
|
|
|
<dd>An author is a person who writes documents and associated style sheets.
|
|
An <dfn id="authoring">authoring tool</dfn> generates documents and
|
|
associated style sheets.
|
|
|
|
<dt><dfn id="user">User</dfn>
|
|
|
|
<dd> A user is a person who interacts with a user agent to view, hear, or
|
|
otherwise use a document and its associated style sheet. The user may provide
|
|
a personal style sheet that encodes personal preferences.
|
|
|
|
<dt><dfn id="user-agent">User agent (UA)</dfn>
|
|
|
|
<dd>A <dfn id="user-" title="user agent|UA">user agent</dfn> is any program
|
|
that interprets a document written in the document language and applies
|
|
associated style sheets according to the terms of this specification. A user
|
|
agent may display a document, read it aloud, cause it to be printed, convert
|
|
it to another format, etc.
|
|
|
|
<dd>An HTML user agent is one that supports the HTML 2.x, HTML 3.x, or HTML
|
|
4.x specifications. A user agent that supports XHTML <a href="#XHTML10"
|
|
rel="biblioentry">[XHTML10]</a>, but not HTML (as listed in the previous
|
|
sentence) is not considered an HTML user agent for the purpose of conformance
|
|
with this specification.
|
|
</dl>
|
|
|
|
<h3 id="conf-UA"><span class="secno">9.2. </span>User agent conformance</h3>
|
|
|
|
<p class="issue">[This section should contain rules for user style sheet
|
|
conformance, author style sheet disabling, handling parsing errors, etc.,
|
|
from the CSS2.1 specification.]
|
|
|
|
<p class="issue">[Below is the text from CSS2.1. Much of it needs rewriting
|
|
given modularization. I've avoided substituting CSS3 where it's clearly not
|
|
going to be appropriate.]
|
|
|
|
<p>This section defines <dfn id="conformance">conformance</dfn> with the
|
|
CSS 2.1 specification only. There may be other levels of CSS in the
|
|
future that may require a user agent to implement a different set of features
|
|
in order to conform.
|
|
|
|
<p>In general, the following points must be observed by a user agent claiming
|
|
conformance to this specification:
|
|
|
|
<ol>
|
|
<li>It must support one or more of the CSS3 <a href="#media-types">media
|
|
types</a>.
|
|
|
|
<li>For each source document, it must attempt to retrieve all associated
|
|
style sheets that are appropriate for the supported media types. If it cannot
|
|
retrieve all associated style sheets (for instance, because of network
|
|
errors), it must display the document using those it can retrieve.
|
|
|
|
<li>It must parse the style sheets according to this specification. In
|
|
particular, it must recognize all at-rules, blocks, declarations, and
|
|
selectors (see the <a href="#detailed-grammar">grammar of CSS 2.1</a>).
|
|
If a user agent encounters a property that applies for a supported media
|
|
type, the user agent must parse the value according to the property
|
|
definition. This means that the user agent must accept all valid values and
|
|
must <span class="index" id="ignore9"><a href="#ignore">ignore</a></span>
|
|
declarations with invalid values. User agents must <span class="index"
|
|
id="ignore10"><a href="#ignore">ignore</a></span> rules that apply to
|
|
unsupported <a href="#media-types">media types</a>.
|
|
<!-- Define "accept"? Include statement that conforming user
|
|
agents may only allow one value for certain properties (for
|
|
backwards compatibility, see CSS1 for list of these properties),
|
|
i.e., the default style sheet value -IJ -->
|
|
|
|
<li>For each element in a <span><a href="#document0">document
|
|
tree</a></span>, it must assign a value for every applicable property
|
|
according to the property's definition and the rules of <a
|
|
href="http://www.w3.org/TR/REC-CSS2/cascade.html">cascading and
|
|
inheritance</a>.
|
|
|
|
<li>If the source document comes with alternate style sheet sets (such as
|
|
with the "alternate" keyword in HTML 4.0 <a href="#HTML40"
|
|
rel="biblioentry">[HTML40]</a>), the UA must allow the user to select which
|
|
style sheet set the UA should apply.
|
|
</ol>
|
|
|
|
<p>Not every user agent must observe every point, however:
|
|
|
|
<ul>
|
|
<li>An application that reads style sheets without rendering any content
|
|
(e.g., a CSS 2.1 validator) must respect points 1-3.
|
|
|
|
<li>An authoring tool is only required to output <span title="valid style
|
|
sheet"><a href="#valid">valid style sheets</a></span>
|
|
|
|
<li>A user agent that <em>renders</em> a document with associated style
|
|
sheets must respect points 1-5 and render the document according to the
|
|
media-specific requirements set forth in this specification. <a
|
|
href="http://www.w3.org/TR/REC-CSS2/cascade.html#actual-value">Values</a> may
|
|
be approximated when required by the user agent.
|
|
</ul>
|
|
|
|
<p>The inability of a user agent to implement part of this specification due
|
|
to the limitations of a particular device (e.g., a user agent cannot render
|
|
colors on a monochrome monitor or page) does not imply non-conformance.
|
|
|
|
<p>UAs must allow users to specify a file that contains the user style sheet.
|
|
UAs that run on devices without any means of writing or specifying files are
|
|
exempted from this requirement. Additionally, UAs may offer other means to
|
|
specify user preferences, for example through a GUI.
|
|
|
|
<p>CSS2.1 does not define which properties apply to form controls and frames,
|
|
or how CSS can be used to style them. User agents may apply CSS properties to
|
|
these elements. Authors are recommended to treat such support as
|
|
experimental. A future level of CSS may specify this further.
|
|
|
|
<h4 id="error"><span class="secno">9.2.1. </span>Error conditions</h4>
|
|
|
|
<p>In general, this document does not specify error handling behavior for
|
|
user agents (e.g., how they behave when they cannot find a resource
|
|
designated by a URI).
|
|
|
|
<p>However, user agents must observe the <a href="#error-handling">rules for
|
|
handling parsing errors</a>.
|
|
|
|
<p>Since user agents may vary in how they handle error conditions, authors
|
|
and users must not rely on specific error recovery behavior.
|
|
|
|
<h3 id="conf-SS"><span class="secno">9.3. </span>Style sheet conformance</h3>
|
|
|
|
<h3 id="conf-AT"><span class="secno">9.4. </span>Authoring tool conformance</h3>
|
|
|
|
<p>Authoring tools may use a modified form of the <a
|
|
href="#error-handling">rules for handling parsing errors</a>: when those
|
|
rules require that user agents <em><a href="#ignore">ignore</a></em>
|
|
something, authoring tools are not required to ignore it. However, authoring
|
|
tools should not present such parts of the style sheet to the user in the
|
|
same way as valid parts of the style sheet. In so far as authoring tools
|
|
display the application of a style sheet to a document, they are required to
|
|
meet the <a href="#conf-UA">user agent conformance</a> rules.
|
|
|
|
<p class="issue">[informative reference to canonicalization proposal?]
|
|
|
|
<h2 id="property-defs"><span class="secno">10. </span>Format of property
|
|
definitions in other modules</h2>
|
|
|
|
<p>Each CSS property definition begins with a summary of key information that
|
|
resembles the following:
|
|
|
|
<div class="propdef">
|
|
<dl>
|
|
<dt><dfn class="propdef-title" id="property-name">'property-name'</dfn>
|
|
|
|
<dd>
|
|
<table cellpadding="0" cellspacing="0" class="propinfo">
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><em><a href="#values">Value:</a></em>
|
|
|
|
<td>legal values & syntax
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Initial:</em>
|
|
|
|
<td>initial value
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>elements this property applies to
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>whether the property is inherited
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Computed Value:</em>
|
|
|
|
<td>the computed value of the property
|
|
|
|
<tr valign="baseline">
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>how percentage values are interpreted
|
|
|
|
<tr valign="baseline">
|
|
<td><em><a href="#media0">Media:</a></em>
|
|
|
|
<td>which media groups the property applies to
|
|
</table>
|
|
</dl>
|
|
</div>
|
|
|
|
<h3 id="property-def-value"><span class="secno">10.1. </span>Value</h3>
|
|
|
|
<p>This part specifies the set of valid values for the property. Value types
|
|
may be designated in several ways:
|
|
|
|
<ol>
|
|
<li> keyword values (e.g., auto, disc, etc.)
|
|
|
|
<li> basic data types, which appear between "<" and ">" (e.g.,
|
|
<length>, <percentage>, etc.). In the electronic version of the
|
|
document, each instance of a basic data type links to its definition.
|
|
|
|
<li> types that have the same range of values as a property bearing the same
|
|
name (e.g., <'border-width'> <'background-attachment'>, etc.). In
|
|
this case, the type name is the property name (complete with quotes) between
|
|
"<" and ">" (e.g., <'border-width'>). Such a type does
|
|
<strong>not</strong> include the value 'inherit'. In the electronic version
|
|
of the document, each instance of this type of non-terminal links to the
|
|
corresponding property definition.
|
|
|
|
<li> non-terminals that do not share the same name as a property. In this
|
|
case, the non-terminal name appears between "<" and ">", as in
|
|
<border-width>. Notice the distinction between <border-width> and
|
|
<'border-width'>; the latter is defined in terms of the former. The
|
|
definition of a non-terminal is located near its first appearance in the
|
|
specification. In the electronic version of the document, each instance of
|
|
this type of value links to the corresponding value definition.
|
|
</ol>
|
|
|
|
<p>Other words in these definitions are keywords that must appear literally,
|
|
without quotes (e.g., red). The slash (/) and the comma (,) must also appear
|
|
literally.
|
|
|
|
<p>Values may be arranged as follows:
|
|
|
|
<ul>
|
|
<li>Several juxtaposed words mean that all of them must occur, in the given
|
|
order.
|
|
|
|
<li>A bar (|) separates two or more alternatives: exactly one of them must
|
|
occur.
|
|
|
|
<li>A double bar (||) separates two or more options: one or more of them must
|
|
occur, in any order.
|
|
|
|
<li>Brackets ([ ]) are for grouping.
|
|
</ul>
|
|
|
|
<p>Juxtaposition is stronger than the double bar, and the double bar is
|
|
stronger than the bar. Thus, the following lines are equivalent:
|
|
|
|
<pre>
|
|
a b | c || d e
|
|
[ a b ] | [ c || [ d e ]]
|
|
</pre>
|
|
|
|
<p> Every type, keyword, or bracketed group may be followed by one of the
|
|
following modifiers:
|
|
|
|
<ul>
|
|
<li> An asterisk (*) indicates that the preceding type, word, or group occurs
|
|
zero or more times.
|
|
|
|
<li> A plus (+) indicates that the preceding type, word, or group occurs one
|
|
or more times.
|
|
|
|
<li> A question mark (?) indicates that the preceding type, word, or group is
|
|
optional.
|
|
|
|
<li> A pair of numbers in curly braces ({A,B}) indicates that the preceding
|
|
type, word, or group occurs at least A and at most B times.
|
|
</ul>
|
|
|
|
<p>The following examples illustrate different value types:
|
|
|
|
<blockquote>
|
|
<p><em><a href="#values">Value:</a></em> N | NW | NE<br>
|
|
<em><a href="#values">Value:</a></em> [ <length> | thick | thin
|
|
]{1,4}<br>
|
|
<em><a href="#values">Value:</a></em> [<family-name> , ]*
|
|
<family-name><br>
|
|
<em><a href="#values">Value:</a></em> <uri>? <color> [ /
|
|
<color> ]?<br>
|
|
<em><a href="#values">Value:</a></em> <uri> || <color><br>
|
|
</blockquote>
|
|
|
|
<p>See the values and units <a href="#CSS3VAL"
|
|
rel="biblioentry">[CSS3VAL]</a> module for the formal definitions of the
|
|
basic values types.
|
|
|
|
<p class="issue">[We need a more formal grammar for parsing of properties.
|
|
Refer to section on keywords (they can't be quoted).]
|
|
|
|
<h4 id="initial"><span class="secno">10.1.1. </span><code>initial</code> and
|
|
<code>inherit</code> values</h4>
|
|
|
|
<p>In addition to the legal values stated, <code>initial</code> and
|
|
<code>inherit</code> values are also legal for every property. The meaning of
|
|
these values is described in the Values & Units <a href="#CSS3VAL"
|
|
rel="biblioentry">[CSS3VAL]</a> and Cascading & Inheritance <a
|
|
href="#CSS3CASCADE" rel="biblioentry">[CSS3CASCADE]</a> modules.
|
|
|
|
<h3 id="property-def-initial"><span class="secno">10.2. </span>Initial</h3>
|
|
|
|
<p>This part specifies the property's initial value. If the property is <a
|
|
href="#property-def-inherited">inherited</a>, this is the value that is given
|
|
to the root element of the <span><a href="#document0">document
|
|
tree</a></span>. Please consult the the Cascading & Inheritance module <a
|
|
href="#CSS3CASCADE" rel="biblioentry">[CSS3CASCADE]</a> for information about
|
|
the interaction between style sheet-specified, inherited, and initial values.
|
|
|
|
<h3 id="property-def-applies"><span class="secno">10.3. </span>Applies to</h3>
|
|
|
|
<p>This part lists the elements to which the property applies. All elements
|
|
are considered to have all properties, but some properties have no rendering
|
|
effect on some types of elements. For example, <span
|
|
class="propinst-white-space">'white-space'</span> only affects block-level
|
|
elements.
|
|
|
|
<h3 id="property-def-inherited"><span class="secno">10.4. </span>Inherited</h3>
|
|
|
|
<p>This part indicates whether the value of the property is inherited from an
|
|
ancestor element by default ("Inherited: yes") or the value of the property
|
|
is its <a href="#property-def-initial">initial value</a> by default
|
|
("Inherited: no"). Please consult the Cascading & Inheritance Module <a
|
|
href="#CSS3CASCADE" rel="biblioentry">[CSS3CASCADE]</a> for information about
|
|
the interaction between style sheet-specified, inherited, and initial values.
|
|
|
|
<h3 id="property-def-computed"><span class="secno">10.5. </span>Computed
|
|
value</h3>
|
|
|
|
<p>This part indicates the computed value of the property. The concept of
|
|
computed value is described in the Cascading & Inheritance Module <a
|
|
href="#CSS3CASCADE" rel="biblioentry">[CSS3CASCADE]</a>. (It is needed both
|
|
for inheritance and for the definitions of some DOM properties.)
|
|
|
|
<p class="issue">[What is the computed value for elements to which the
|
|
property does not apply? Do some existing inherited properties rely on
|
|
inheritance through elements to which the property doesn't apply?]
|
|
|
|
<h3 id="property-def-percent"><span class="secno">10.6. </span>Percentage
|
|
values</h3>
|
|
|
|
<p>This part indicates how percentages should be interpreted, if they occur
|
|
in the value of the property. If "N/A" appears here, it means that the
|
|
property does not accept percentages as values.
|
|
|
|
<h3 id="media-groups"><span class="secno">10.7. </span>Media groups</h3>
|
|
|
|
<p class="issue">[Some of this needs to be relaxed to deal with profiles.]
|
|
|
|
<p><em>This section is informative, not normative.</em>
|
|
|
|
<p>This part indicates the media groups for which the property must be
|
|
implemented by a conforming user agent. Since properties generally apply to
|
|
several media, the "Applies to media" section of each property definition
|
|
lists media groups rather than individual media types. User agents must
|
|
support the property if they support rendering to the media types included in
|
|
these media groups. Each property applies to all media types in the media
|
|
groups listed in its definition.
|
|
|
|
<p>CSS3 defines the following media groups:
|
|
|
|
<ul>
|
|
<li> <dfn id="continuous" title="'continuous' media group">continuous</dfn>
|
|
or <dfn id="paged" title="'paged' media group">paged</dfn>.
|
|
|
|
<li><dfn id="visual" title="'visual' media group">visual,</dfn> <dfn
|
|
id="audio" title="'audio' media group">audio,</dfn> <dfn id="speech"
|
|
title="'speech' media group">speech,</dfn> or <dfn id="tactile"
|
|
title="'tactile' media group">tactile</dfn>.
|
|
|
|
<li><dfn id="grid" title="'grid' media group">grid</dfn> (for character grid
|
|
devices), or <dfn id="bitmap" title="'bitmap' media group">bitmap</dfn>.
|
|
|
|
<li><dfn id="interactive" title="'interactive' media group">interactive</dfn>
|
|
(for devices that allow user interaction), or <dfn id="static"
|
|
title="'static' media group">static</dfn> (for those that don't).
|
|
|
|
<li><dfn id="all" title="'all' media group">all</dfn> (includes all media
|
|
types)
|
|
</ul>
|
|
|
|
<p>The following table shows the relationships between media groups and media
|
|
types:
|
|
|
|
<table border summary="Relationship between media groups and media types">
|
|
<caption>Relationship between media groups and media types</caption>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Media Types
|
|
|
|
<th colspan="4">Media Groups
|
|
|
|
<tr>
|
|
<th>
|
|
|
|
<th>continuous/paged
|
|
|
|
<th>visual/audio/speech/tactile
|
|
|
|
<th>grid/bitmap
|
|
|
|
<th>interactive/static <!--
|
|
<TR><TH>audio<TD align="center">continuous<TD align="center">audio<TD align="center">N/A<TD align="center">both</TR>
|
|
-->
|
|
|
|
<tr>
|
|
<th>braille
|
|
|
|
<td align="center">continuous
|
|
|
|
<td align="center">tactile
|
|
|
|
<td align="center">grid
|
|
|
|
<td align="center">both
|
|
|
|
<tr>
|
|
<th>emboss
|
|
|
|
<td align="center">paged
|
|
|
|
<td align="center">tactile
|
|
|
|
<td align="center">grid
|
|
|
|
<td align="center">static
|
|
|
|
<tr>
|
|
<th>handheld
|
|
|
|
<td align="center">both
|
|
|
|
<td align="center">visual, audio, speech
|
|
|
|
<td align="center">both
|
|
|
|
<td align="center">both
|
|
|
|
<tr>
|
|
<th>print
|
|
|
|
<td align="center">paged
|
|
|
|
<td align="center">visual
|
|
|
|
<td align="center">bitmap
|
|
|
|
<td align="center">static
|
|
|
|
<tr>
|
|
<th>projection
|
|
|
|
<td align="center">paged
|
|
|
|
<td align="center">visual
|
|
|
|
<td align="center">bitmap
|
|
|
|
<td align="center">interactive
|
|
|
|
<tr>
|
|
<th>screen
|
|
|
|
<td align="center">continuous
|
|
|
|
<td align="center">visual, audio
|
|
|
|
<td align="center">bitmap
|
|
|
|
<td align="center">both
|
|
|
|
<tr>
|
|
<th>speech
|
|
|
|
<td align="center">continuous
|
|
|
|
<td align="center">speech
|
|
|
|
<td align="center">N/A
|
|
|
|
<td align="center">both
|
|
|
|
<tr>
|
|
<th>tty
|
|
|
|
<td align="center">continuous
|
|
|
|
<td align="center">visual
|
|
|
|
<td align="center">grid
|
|
|
|
<td align="center">both
|
|
|
|
<tr>
|
|
<th>tv
|
|
|
|
<td align="center">both
|
|
|
|
<td align="center">visual, audio
|
|
|
|
<td align="center">bitmap
|
|
|
|
<td align="center">both
|
|
</table>
|
|
|
|
<h3 id="shorthand"><span class="secno">10.8. </span>Shorthand properties</h3>
|
|
|
|
<p>Some properties are <dfn id="shorthand0" title="shorthand
|
|
property">shorthand properties</dfn>, meaning they allow authors to specify
|
|
the values of several properties with a single property.
|
|
|
|
<p>For instance, the <span class="propinst-font">'font'</span> property is a
|
|
shorthand property for setting <span
|
|
class="propinst-font-style">'font-style'</span>, <span
|
|
class="propinst-font-variant">'font-variant'</span>, <span
|
|
class="propinst-font-weight">'font-weight'</span>, <span
|
|
class="propinst-font-size">'font-size'</span>, <span
|
|
class="propinst-line-height">'line-height'</span>, and <span
|
|
class="propinst-font-family">'font-family'</span> all at once.
|
|
|
|
<p>The syntax of a shorthand property may allow some of the properties that
|
|
can be specified by that shorthand to be omitted. When such values are
|
|
omitted from a shorthand form, each "missing" property is assigned its
|
|
initial value (see the Cascading & Inheritance module <a
|
|
href="#CSS3CASCADE" rel="biblioentry">[CSS3CASCADE]</a>). The definition of a
|
|
shorthand property may further say that it resets the definitions of other
|
|
properties to their initial value.
|
|
|
|
<div class="example">
|
|
<p> The multiple style rules of this example:
|
|
|
|
<pre>
|
|
h1 {
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
line-height: 1.2;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-variant: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
font-size-adjust: none
|
|
}
|
|
</pre>
|
|
|
|
<p>may be rewritten with a single shorthand property:
|
|
|
|
<pre>
|
|
h1 { font: bold 2em/1.2 Helvetica, Arial, sans-serif }
|
|
</pre>
|
|
|
|
<p>In this example, <span
|
|
class="propinst-font-variant">'font-variant'</span>, <span
|
|
class="propinst-font-stretch">'font-stretch'</span>, <span
|
|
class="propinst-font-size-adjust">'font-size-adjust'</span>, and <span
|
|
class="propinst-font-style">'font-style'</span> take their initial values.
|
|
</div>
|
|
|
|
<h2 id="detailed-grammar"><span class="secno">11. </span>Appendix: Second
|
|
grammar</h2>
|
|
|
|
<p class="issue">[This grammar was the Appendix D grammar of CSS2, augmented
|
|
by the additions from the @namespace draft. It needs to be incorporated into
|
|
the above normative text in some way.]
|
|
|
|
<p>The grammar below defines the syntax of CSS2. It is in some sense,
|
|
however, a superset of CSS2 as this specification imposes additional semantic
|
|
constraints not expressed in this grammar. A conforming UA must also adhere
|
|
to the <a href="#syntax"> forward-compatible parsing rules</a>, the <a
|
|
href="#property-defs">property and value notation</a>, and the unit notation.
|
|
In addition, the document language may impose restrictions, e.g. HTML imposes
|
|
restrictions on the possible values of the "class" attribute.
|
|
<!-- IJ: There used to be a link to "unit notation", but I couldn't
|
|
find anything in the spec that corresponded. -->
|
|
|
|
<h3 id="grammar0"><span class="secno">11.1. </span>Grammar</h3>
|
|
|
|
<p>The grammar below is <span class="index" id="ll1"
|
|
title="LL(1)">LL(1)</span> (but note that most UA's should not use it
|
|
directly, since it doesn't express the forward-compatible <a
|
|
href="#syntax">parsing conventions</a>, only the CSS3 syntax). The format of
|
|
the productions is optimized for human consumption and some shorthand
|
|
notation beyond Yacc (see <a href="#YACC" rel="biblioentry">[YACC]</a>) is
|
|
used:
|
|
|
|
<p class="issue">[It's probably not LL(1), but rather just LALR(1).]
|
|
|
|
<p class="issue">[This needs a lot more revisions to reflect all the
|
|
additions in CSS3.]
|
|
|
|
<p class="issue">[This doesn't allow nested at-rules, such as
|
|
<code>@page</code> inside <code><a href="#media0">@media</a></code>. Do we
|
|
want to allow this?]
|
|
|
|
<ul>
|
|
<li><strong>*</strong>: 0 or more
|
|
|
|
<li><strong>+</strong>: 1 or more
|
|
|
|
<li><strong>?</strong>: 0 or 1
|
|
|
|
<li><strong>|</strong>: separates alternatives
|
|
|
|
<li><strong>[ ]</strong>: grouping
|
|
</ul>
|
|
|
|
<p>The productions are:
|
|
|
|
<pre>
|
|
stylesheet
|
|
: [ CHARSET_SYM S* STRING S* ';' ]?
|
|
[S|CDO|CDC]* [ import [S|CDO|CDC]* ]*
|
|
[ namespace [S|CDO|CDC]* ]*
|
|
[ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*
|
|
;
|
|
import
|
|
: IMPORT_SYM S*
|
|
[STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*
|
|
;
|
|
namespace
|
|
: NAMESPACE_SYM S* [namespace_prefix S*]? [STRING|URI] S* ';' S*
|
|
;
|
|
namespace_prefix
|
|
: IDENT
|
|
;
|
|
media
|
|
: MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*
|
|
;
|
|
medium
|
|
: IDENT S*
|
|
;
|
|
page
|
|
: PAGE_SYM S* IDENT? pseudo_page? S*
|
|
'{' S* declaration [ ';' S* declaration ]* '}' S*
|
|
;
|
|
pseudo_page
|
|
: ':' IDENT
|
|
;
|
|
font_face
|
|
: FONT_FACE_SYM S*
|
|
'{' S* declaration [ ';' S* declaration ]* '}' S*
|
|
;
|
|
operator
|
|
: '/' S* | ',' S* | /* empty */
|
|
;
|
|
combinator
|
|
: '+' S* | '>' S* | /* empty */
|
|
;
|
|
unary_operator
|
|
: '-' | '+'
|
|
;
|
|
property
|
|
: IDENT S*
|
|
;
|
|
ruleset
|
|
: selector [ ',' S* selector ]*
|
|
'{' S* declaration [ ';' S* declaration ]* '}' S*
|
|
;
|
|
<span class="index" id="selector0"><a href="#selector">selector</a></span>
|
|
: simple_selector [ combinator simple_selector ]*
|
|
;
|
|
simple_selector
|
|
: element_name? [ HASH | class | attrib | pseudo ]* S*
|
|
;
|
|
class
|
|
: '.' IDENT
|
|
;
|
|
element_name
|
|
: IDENT | '*'
|
|
;
|
|
attrib
|
|
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
|
|
[ IDENT | STRING ] S* ]? ']'
|
|
;
|
|
pseudo
|
|
: ':' [ IDENT | FUNCTION S* IDENT S* ')' ]
|
|
;
|
|
declaration
|
|
: property ':' S* expr prio?
|
|
| /* empty */
|
|
;
|
|
prio
|
|
: IMPORTANT_SYM S*
|
|
;
|
|
expr
|
|
: term [ operator term ]*
|
|
;
|
|
term
|
|
: unary_operator?
|
|
[ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
|
|
TIME S* | FREQ S* | function ]
|
|
| STRING S* | IDENT S* | URI S* | UNICODERANGE S* | hexcolor
|
|
;
|
|
function
|
|
: FUNCTION S* expr ')' S*
|
|
;
|
|
/*
|
|
* There is a constraint on the <span class="index" id="color">color</span> that it must
|
|
* have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
|
|
* after the "#"; e.g., "#000" is OK, but "#abcd" is not.
|
|
*/
|
|
hexcolor
|
|
: HASH S*
|
|
;
|
|
</pre>
|
|
|
|
<h3 id="lexical"><span class="secno">11.2. </span>Lexical scanner</h3>
|
|
|
|
<p> The following is the <dfn id="tokenizer">tokenizer</dfn>, written in Flex
|
|
(see <a href="#FLEX" rel="biblioentry">[FLEX]</a>) notation. The tokenizer is
|
|
case-insensitive.
|
|
|
|
<p>The two occurrences of "\377" represent the highest character number that
|
|
current versions of Flex can deal with (decimal 255). They should be read as
|
|
"\4177777" (decimal 1114111), which is the highest possible code point in
|
|
<span class="index" id="unicode">Unicode</span>/<span class="index"
|
|
id="iso-10646">ISO-10646</span>, except excluding the characters excluded in
|
|
the <code><a href="#SUBTOK-nonascii">nonascii</a></code> production above.
|
|
<!-- ignored whitespace after Unicode escape, is it OK? -->
|
|
|
|
<pre>
|
|
%option case-insensitive
|
|
|
|
h [0-9a-f]
|
|
nonascii [\200-\377]
|
|
unicode \\{h}{1,6}[ \t\r\n\f]?
|
|
escape {unicode}|\\[ -~\200-\377]
|
|
nmstart [a-z]|{nonascii}|{escape}
|
|
nmchar [a-z0-9-]|{nonascii}|{escape}
|
|
string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
|
|
string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
|
|
|
|
ident [-]?{nmstart}{nmchar}*
|
|
name {nmchar}+
|
|
num [0-9]+|[0-9]*"."[0-9]+
|
|
string {string1}|{string2}
|
|
url ([!#$%&*-~]|{nonascii}|{escape})*
|
|
w [ \t\r\n\f]*
|
|
nl \n|\r\n|\r|\f
|
|
range \?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))
|
|
|
|
%%
|
|
|
|
[ \t\r\n\f]+ {return S;}
|
|
|
|
\/\*[^*]*\*+([^/][^*]*\*+)*\/ /* ignore comments */
|
|
|
|
"<!--" {return CDO;}
|
|
"-->" {return CDC;}
|
|
"~=" {return INCLUDES;}
|
|
"|=" {return DASHMATCH;}
|
|
|
|
{string} {return STRING;}
|
|
|
|
{ident} {return IDENT;}
|
|
|
|
"#"{name} {return HASH;}
|
|
|
|
"@import" {return IMPORT_SYM;}
|
|
"@page" {return PAGE_SYM;}
|
|
"@media" {return MEDIA_SYM;}
|
|
"@font-face" {return FONT_FACE_SYM;}
|
|
"@charset" {return CHARSET_SYM;}
|
|
"@namespace" {return NAMESPACE_SYM;}
|
|
|
|
"!{w}important" {return IMPORTANT_SYM;}
|
|
|
|
{num}em {return EMS;}
|
|
{num}ex {return EXS;}
|
|
{num}px {return LENGTH;}
|
|
{num}cm {return LENGTH;}
|
|
{num}mm {return LENGTH;}
|
|
{num}in {return LENGTH;}
|
|
{num}pt {return LENGTH;}
|
|
{num}pc {return LENGTH;}
|
|
{num}deg {return ANGLE;}
|
|
{num}rad {return ANGLE;}
|
|
{num}grad {return ANGLE;}
|
|
{num}ms {return TIME;}
|
|
{num}s {return TIME;}
|
|
{num}Hz {return FREQ;}
|
|
{num}kHz {return FREQ;}
|
|
{num}{ident} {return DIMEN;}
|
|
{num}% {return PERCENTAGE;}
|
|
{num} {return NUMBER;}
|
|
|
|
"url("{w}{string}{w}")" {return URI;}
|
|
"url("{w}{url}{w}")" {return URI;}
|
|
{ident}"(" {return FUNCTION;}
|
|
|
|
U\+{range} {return UNICODERANGE;}
|
|
U\+{h}{1,6}-{h}{1,6} {return UNICODERANGE;}
|
|
|
|
. {return *yytext;}
|
|
</pre>
|
|
|
|
<h2 class="no-num" id="changes">Changes from CSS2</h2>
|
|
|
|
<p>This section is informative.
|
|
|
|
<p> The parts of CSS2 that have become part of this CSS3 draft are sections
|
|
1.3.2 (1.4.2 in CSS 2.1), 1.3.3 (1.4.3 in CSS2.1), 3 (parts), 4.1, 4.2, 4.4,
|
|
and 6.3, 7, and Appendix D. This draft also contains new material on
|
|
namespaces and on vendor extensions to CSS that began as separate documents.
|
|
|
|
<ul>
|
|
<li>The text taken from Chapter 1 of CSS2 is now normative rather than
|
|
informative.
|
|
|
|
<li>added the section on vendor extensions and added the <span
|
|
class="css">'-'</span> character to the ident productions so that identifiers
|
|
can begin with it
|
|
|
|
<li>modified the rules for handling parsing errors to allow implementations
|
|
that support only parts of CSS3
|
|
|
|
<li>described how style sheets that cannot be parsed according to the grammar
|
|
should be handled (by saying that parsing uses the parseable initial sequence
|
|
of tokens)
|
|
|
|
<li><span class="issue">[to be done]</span> described handling of unmatched
|
|
quotation marks (by saying that tokenization uses the tokenizable initial
|
|
sequence of characters)
|
|
|
|
<li><span class="issue">[to be done]</span> formalized the error handling
|
|
rules by combining the forward-compatible grammar in chapter 4 with the CSS2
|
|
grammar in Appendix D.
|
|
|
|
<li>combined DELIM and other single character tokens into CHAR
|
|
|
|
<li>explicitly stated that the byte order mark should be ignored for purposes
|
|
of the grammar
|
|
|
|
<li>Changed the acceptable characters to exclude surrogate blocks and #xFFFE,
|
|
#xFFFF, as in XML.
|
|
|
|
<li>Changed the rules on what to do when a character encoding is not
|
|
specified.
|
|
</ul>
|
|
|
|
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
|
|
|
|
<p>Since most of this draft is taken from CSS2, it would not have been
|
|
possible to write it so easily without the work of the editors and authors of
|
|
<a href="#CSS1" rel="biblioentry">[CSS1]</a> and <a href="#CSS2"
|
|
rel="biblioentry">[CSS2]</a>. This draft also borrows heavily from earlier
|
|
drafts on CSS namespace support by Peter Linss <a href="#CSS3NAMESPACE"
|
|
rel="biblioentry">[CSS3NAMESPACE]</a> and early (unpublished) drafts on
|
|
vendor extensions to CSS by Bert Bos. Many current and former members of the
|
|
working group have contributed to this document. Discussions on <code><a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a></code>
|
|
and in other places have also contributed ideas to this specification.
|
|
Comments from Glenn Adams, Björn Höhrmann, and Etan Wexler have
|
|
been particularly helpful.
|
|
|
|
<h2 class="no-num" id="references">References</h2>
|
|
|
|
<h3 class="no-num" id="normative">Normative references</h3>
|
|
<!-- begin-normative -->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id="CSS3CASCADE">[CSS3CASCADE]
|
|
|
|
<dd>Håkon Wium Lie. <cite>CSS3 module: Cascading and inheritance.</cite> 13
|
|
July 2001. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2001/WD-css3-cascade-20010713">http://www.w3.org/TR/2001/WD-css3-cascade-20010713</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3VAL">[CSS3VAL]
|
|
|
|
<dd>Håkon Wium Lie. <cite>CSS3 module: values and units.</cite>
|
|
(forthcoming). W3C working draft. (Work in progress.)
|
|
<!---->
|
|
|
|
<dt id="HTML40">[HTML40]
|
|
|
|
<dd>Raggett, D.; Le Hors, A.; Jacobs, I.. <cite>HTML 4.0 Specification
|
|
(revised).</cite> Apr 1998. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1998/REC-html40-19980424">http://www.w3.org/TR/1998/REC-html40-19980424</a>
|
|
<!---->
|
|
|
|
<dt id="HTTP11">[HTTP11]
|
|
|
|
<dd>Fielding, Roy,; et al. <cite>Hypertext Transfer Protocol -
|
|
HTTP/1.1.</cite> June 1999. Internet RFC 2616. URL: <a
|
|
href="ftp://ftp.isi.edu/in-notes/rfc2616.txt">ftp://ftp.isi.edu/in-notes/rfc2616.txt</a>
|
|
<!---->
|
|
|
|
<dt id="ISO10646">[ISO10646]
|
|
|
|
<dd><cite>Information Technology - Universal Multiple- Octet Coded
|
|
CharacterSet (UCS) - Part 1: Architecture and Basic Multilingual
|
|
Plane.</cite> ISO/IEC10646-1:1993. The current specification also takes into
|
|
consideration the first five amendments to ISO/IEC 10646-1:1993. Useful <a
|
|
href="http://www.egt.ie/standards/iso10646/ucs-roadmap.html">roadmaps</a>show
|
|
which scripts sit at which numeric ranges.
|
|
<!---->
|
|
|
|
<dt id="ISO8879">[ISO8879]
|
|
|
|
<dd><cite>Information Processing -- Text and Office Systems -- Standard
|
|
Generalized Markup Language (SGML).</cite> ISO 8879:1986.. URL: <a
|
|
href="http://www.iso.ch/cate/d16387.html">http://www.iso.ch/cate/d16387.html</a>
|
|
<!---->
|
|
|
|
<dt id="RFC2045">[RFC2045]
|
|
|
|
<dd>N. Freed and N. Borenstein. <cite>Multipurpose Internet Mail Extensions
|
|
(MIME) Part One: Format of Internet Message Bodies.</cite> November 1996.
|
|
URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2045.txt">http://www.ietf.org/rfc/rfc2045.txt</a>
|
|
<!---->
|
|
|
|
<dt id="RFC2119">[RFC2119]
|
|
|
|
<dd>S. Bradner. <cite>Key words for use in RFCs to Indicate Requirement
|
|
Levels.</cite> Internet RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
<!---->
|
|
|
|
<dt id="RFC2318">[RFC2318]
|
|
|
|
<dd>H. Lie, B. Bos, C. Lilley. <cite>The text/css Media Type.</cite> March
|
|
1998.. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2318.txt">http://www.ietf.org/rfc/rfc2318.txt</a>
|
|
<!---->
|
|
|
|
<dt id="RFC2978">[RFC2978]
|
|
|
|
<dd>N. Freed; J. Postel. <cite>IANA Charset Registration Procedures.</cite>
|
|
October 2000. Internet RFC 2978. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2978.txt">http://www.ietf.org/rfc/rfc2978.txt</a>
|
|
<!---->
|
|
|
|
<dt id="SELECT">[SELECT]
|
|
|
|
<dd>Daniel Glazman; Tantek Çelik; Ian Hickson; et al. <cite>Selectors.</cite>
|
|
13 Nov 2001. W3C Candidate Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
|
|
<!---->
|
|
|
|
<dt id="UNICODE310">[UNICODE310]
|
|
|
|
<dd>The Unicode Consortium. <cite>The Unicode Standard: Version 3.1.0.</cite>
|
|
Addison Wesley Longman. 2000. ISBN 0-201-61633-5. For more information,
|
|
consult the Unicode Consortium's home page at <a
|
|
href="http://www.unicode.org/">http://www.unicode.org/</a>
|
|
URL: <a
|
|
href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html#Unicode_3_1_0">http://www.unicode.org/unicode/standard/versions/enumeratedversions.html#Unicode_3_1_0</a>
|
|
<!---->
|
|
</dl>
|
|
<!-- end-normative -->
|
|
|
|
<h3 class="no-num" id="other">Other references</h3>
|
|
<!-- begin-informative -->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id="CHARSETS">[CHARSETS]
|
|
|
|
<dd><cite>Characters sets.</cite> These are the official names for character
|
|
sets that may be used in the Internet and may be referred to in Internet
|
|
documentation URL: <a
|
|
href="http://www.iana.org/assignments/character-sets">http://www.iana.org/assignments/character-sets</a>
|
|
<!---->
|
|
|
|
<dt id="CSS1">[CSS1]
|
|
|
|
<dd>Håkon Wium Lie; Bert Bos. <cite>Cascading Style Sheets, level 1.</cite>
|
|
1996. W3C Recommendation. Revised 11 Jan 1999. URL: <a
|
|
href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a>
|
|
<!---->
|
|
|
|
<dt id="CSS2">[CSS2]
|
|
|
|
<dd>Bert Bos; Håkon Wium Lie; Chris Lilley; Ian Jacobs. <cite>Cascading Style
|
|
Sheets, level 2.</cite> 1998. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/REC-CSS2">http://www.w3.org/TR/REC-CSS2</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3GENCON">[CSS3GENCON]
|
|
|
|
<dd>Håkon Wium Lie; Ian Hickson. <cite>CSS3 module: generated text.</cite>
|
|
(forthcoming). W3C working draft. (Work in progress.)
|
|
<!---->
|
|
|
|
<dt id="CSS3NAMESPACE">[CSS3NAMESPACE]
|
|
|
|
<dd>Peter Linss. <cite>CSS Namespace Enhancements.</cite> 25 June 1999. W3C
|
|
working draft. (Proposal) URL: <a
|
|
href="http://www.w3.org/1999/06/25/WD-css3-namespace-19990625/">http://www.w3.org/1999/06/25/WD-css3-namespace-19990625/</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3PAGE">[CSS3PAGE]
|
|
|
|
<dd>Robert Stevahn. <cite>CSS3 module: paged media.</cite> 28 Sep 1999. W3C
|
|
working draft. (Work in progress) URL: <a
|
|
href="http://www.w3.org/TR/1999/WD-css3-page-19990928">http://www.w3.org/TR/1999/WD-css3-page-19990928</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3SPEECH">[CSS3SPEECH]
|
|
|
|
<dd>Dave Raggett; Daniel Glazman. <cite>CSS3 Speech Module.</cite> 14 May
|
|
2003. W3C working draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2003/WD-css3-speech-20030514">http://www.w3.org/TR/2003/WD-css3-speech-20030514</a>
|
|
<!---->
|
|
|
|
<dt id="CSSSTYLEATTR">[CSSSTYLEATTR]
|
|
|
|
<dd>Tantek Çelik; Bert Bos; Marc Attinasi. <cite>Syntax of CSS rules in
|
|
HTML's "style" attribute.</cite> 15 May 2002. W3C working draft.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2002/WD-css-style-attr-20020515">http://www.w3.org/TR/2002/WD-css-style-attr-20020515</a>
|
|
<!---->
|
|
|
|
<dt id="FLEX">[FLEX]
|
|
|
|
<dd><cite>Flex: The Lexical Scanner Generator.</cite> Version 2.3.7, ISBN
|
|
1882114213
|
|
<!---->
|
|
|
|
<dt id="MEDIAQ">[MEDIAQ]
|
|
|
|
<dd>Håkon Wium Lie; Tantek Çelik; Daniel Glazman. <cite>Media queries.</cite>
|
|
23 January 2002. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708">http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708</a>
|
|
<!---->
|
|
|
|
<dt id="XHTML10">[XHTML10]
|
|
|
|
<dd>Steven Pemberton; et al. <cite>XHTML 1.0: The Extensible HyperText Markup
|
|
Language.</cite> Jan 2000. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2000/REC-xhtml1-20000126">http://www.w3.org/TR/2000/REC-xhtml1-20000126</a>
|
|
<!---->
|
|
|
|
<dt id="XML10">[XML10]
|
|
|
|
<dd>Tim Bray; Jean Paoli; C. M. Sperberg-McQueen; Eve Maler. <cite>Extensible
|
|
Markup Language (XML) 1.0 (Second Edition).</cite> Oct 2000. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2000/REC-xml-20001006">http://www.w3.org/TR/2000/REC-xml-20001006</a>
|
|
<!---->
|
|
|
|
<dt id="XMLSTYLE">[XMLSTYLE]
|
|
|
|
<dd>J. Clark. <cite>Associating Style Sheets with XML documents.</cite> 29
|
|
June 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/xml-stylesheet">http://www.w3.org/TR/xml-stylesheet</a>
|
|
<!---->
|
|
|
|
<dt id="YACC">[YACC]
|
|
|
|
<dd>S. C. Johnson. <cite>YACC - Yet another compiler compiler.</cite> Murray
|
|
Hill. 1975. Technical Report.
|
|
<!---->
|
|
</dl>
|
|
<!-- end-informative -->
|
|
|
|
<h2 class="no-num" id="index">Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class="indexlist">
|
|
<li>'all' media group, <a href="#all"><strong>#</strong></a>
|
|
|
|
<li>Ancestor, <a href="#ancestor"><strong>#</strong></a>
|
|
|
|
<li>at-keyword, <a href="#at-keyword"><strong>#</strong></a>
|
|
|
|
<li>At-rules, <a href="#at-rules0"><strong>#</strong></a>, <a
|
|
href="#at-rules1"><strong>#</strong></a>, <a href="#at-rules2">#</a>
|
|
|
|
<li>Attribute, <a href="#attribute"><strong>#</strong></a>
|
|
|
|
<li>'audio' media group, <a href="#audio"><strong>#</strong></a>
|
|
|
|
<li>Author, <a href="#author"><strong>#</strong></a>
|
|
|
|
<li>authoring tool, <a href="#authoring"><strong>#</strong></a>
|
|
|
|
<li>backslash escapes, <a href="#character"><strong>#</strong></a>
|
|
|
|
<li>'bitmap' media group, <a href="#bitmap"><strong>#</strong></a>
|
|
|
|
<li>block, <a href="#block">#</a>
|
|
|
|
<li>Blocks, <a href="#blocks0"><strong>#</strong></a>, <a
|
|
href="#blocks1"><strong>#</strong></a>
|
|
|
|
<li>byte order mark (BOM), <a href="#BOM">#</a>
|
|
|
|
<li>case sensitivity, <a href="#case-insensitive">#</a>
|
|
|
|
<li>character encoding, <a href="#encoded"><strong>#</strong></a>
|
|
<ul>
|
|
<li>default, <a href="#character0">#</a>
|
|
|
|
<li>user agent's determination of, <a href="#priorities">#</a>
|
|
</ul>
|
|
|
|
<li>@charset, <a href="#charset"><strong>#</strong></a>, <a
|
|
href="#charset0">#</a>
|
|
|
|
<li>Child, <a href="#child"><strong>#</strong></a>
|
|
|
|
<li>color, <a href="#color">#</a>
|
|
|
|
<li>COMMENT, <a href="#comment"><strong>#</strong></a>
|
|
|
|
<li>Comments, <a href="#comments0"><strong>#</strong></a>, <a
|
|
href="#comments1"><strong>#</strong></a>
|
|
|
|
<li>Comments , <a href="#comments2">#</a>
|
|
|
|
<li>conditional import, <a href="#conditional"><strong>#</strong></a>
|
|
|
|
<li>conformance, <a href="#conformance"><strong>#</strong></a>
|
|
|
|
<li>Content, <a href="#content"><strong>#</strong></a>
|
|
|
|
<li>'continuous' media group, <a href="#continuous"><strong>#</strong></a>
|
|
|
|
<li>declaration, <a href="#declaration"><strong>#</strong></a>
|
|
|
|
<li>declaration-block, <a href="#declaration-block"><strong>#</strong></a>
|
|
|
|
<li>default
|
|
<ul>
|
|
<li>character encoding, <a href="#character0">#</a>
|
|
</ul>
|
|
|
|
<li>Descendant, <a href="#descendant"><strong>#</strong></a>
|
|
|
|
<li>Document language, <a href="#document"><strong>#</strong></a>
|
|
|
|
<li>Document tree, <a href="#document0"><strong>#</strong></a>
|
|
|
|
<li>Element, <a href="#element"><strong>#</strong></a>
|
|
<ul>
|
|
<li>following, <a href="#following"><strong>#</strong></a>
|
|
|
|
<li>preceding, <a href="#preceding"><strong>#</strong></a>
|
|
</ul>
|
|
|
|
<li>empty, <a href="#empty"><strong>#</strong></a>
|
|
|
|
<li>error handling points, <a href="#error0"><strong>#</strong></a>
|
|
|
|
<li>following element, <a href="#following"><strong>#</strong></a>
|
|
|
|
<li>forward-compatible parsing, <a
|
|
href="#forward-compatible"><strong>#</strong></a>
|
|
|
|
<li>'grid' media group, <a href="#grid"><strong>#</strong></a>
|
|
|
|
<li>identifier, <a href="#identifiers"><strong>#</strong></a>
|
|
|
|
<li>ignore, <a href="#ignore"><strong>#</strong></a>, <a
|
|
href="#ignore0"><strong>#</strong></a>, <a href="#ignore1">#</a>, <a
|
|
href="#ignore10">#</a>, <a href="#ignore2">#</a>, <a href="#ignore3">#</a>,
|
|
<a href="#ignore4">#</a>, <a href="#ignore5">#</a>, <a href="#ignore6">#</a>,
|
|
<a href="#ignore7">#</a>, <a href="#ignore8">#</a>, <a href="#ignore9">#</a>,
|
|
<a href="#ignored">#</a>, <a href="#ignored.">#</a>, <a
|
|
href="#ignores">#</a>, <a href="#ignores0">#</a>
|
|
|
|
<li>illegal, <a href="#illegal"><strong>#</strong></a>
|
|
|
|
<li>'@import', <a href="#import"><strong>#</strong></a>
|
|
|
|
<li>@import, <a href="#import0">#</a>, <a href="#import1">#</a>
|
|
|
|
<li>'interactive' media group, <a href="#interactive"><strong>#</strong></a>
|
|
|
|
<li>Intrinsic dimensions, <a href="#intrinsic"><strong>#</strong></a>
|
|
|
|
<li>ISO-10646, <a href="#iso-10646">#</a>
|
|
|
|
<li>LL(1), <a href="#ll1">#</a>
|
|
|
|
<li>"MAY", <a href="#may"><strong>#</strong></a>
|
|
|
|
<li>@media, <a href="#media0"><strong>#</strong></a>, <a href="#media2">#</a>
|
|
|
|
<li>media-dependent import, <a href="#conditional"><strong>#</strong></a>
|
|
|
|
<li>media type, <a href="#media1"><strong>#</strong></a>
|
|
|
|
<li>message entity, <a href="#message"><strong>#</strong></a>
|
|
|
|
<li>"MUST", <a href="#must"><strong>#</strong></a>
|
|
|
|
<li>"MUST NOT", <a href="#must-not"><strong>#</strong></a>
|
|
|
|
<li>"OPTIONAL", <a href="#optional"><strong>#</strong></a>
|
|
|
|
<li>'paged' media group, <a href="#paged"><strong>#</strong></a>
|
|
|
|
<li>parent, <a href="#parent"><strong>#</strong></a>
|
|
|
|
<li>preceding element, <a href="#preceding"><strong>#</strong></a>
|
|
|
|
<li>property, <a href="#property"><strong>#</strong></a>
|
|
|
|
<li>'property-name', <a href="#property-name"><strong>#</strong></a>
|
|
|
|
<li>"RECOMMENDED", <a href="#recommended"><strong>#</strong></a>
|
|
|
|
<li>Rendered content, <a href="#rendered"><strong>#</strong></a>
|
|
|
|
<li>Replaced element, <a href="#replaced"><strong>#</strong></a>
|
|
|
|
<li>"REQUIRED", <a href="#required"><strong>#</strong></a>
|
|
|
|
<li>root, <a href="#root"><strong>#</strong></a>
|
|
|
|
<li>rule sets, <a href="#rule-">#</a>
|
|
|
|
<li>selector, <a href="#selector"><strong>#</strong></a>, <a
|
|
href="#selector0">#</a>
|
|
|
|
<li>"SHALL", <a href="#shall"><strong>#</strong></a>
|
|
|
|
<li>"SHALL NOT", <a href="#shall0"><strong>#</strong></a>
|
|
|
|
<li>shorthand property, <a href="#shorthand0"><strong>#</strong></a>
|
|
|
|
<li>"SHOULD", <a href="#should"><strong>#</strong></a>
|
|
|
|
<li>"SHOULD NOT", <a href="#should0"><strong>#</strong></a>
|
|
|
|
<li>Sibling, <a href="#sibling"><strong>#</strong></a>
|
|
|
|
<li>Source document, <a href="#source"><strong>#</strong></a>
|
|
|
|
<li>'speech' media group, <a href="#speech"><strong>#</strong></a>
|
|
|
|
<li>statements, <a href="#statements0">#</a>
|
|
|
|
<li>'static' media group, <a href="#static"><strong>#</strong></a>
|
|
|
|
<li>string, <a href="#string">#</a>
|
|
|
|
<li>Style sheet, <a href="#style0"><strong>#</strong></a>
|
|
|
|
<li>'tactile' media group, <a href="#tactile"><strong>#</strong></a>
|
|
|
|
<li>text/css, <a href="#textcss"><strong>#</strong></a>, <a
|
|
href="#textcss0"><strong>#</strong></a>
|
|
|
|
<li>tokenizer, <a href="#tokenizer"><strong>#</strong></a>
|
|
|
|
<li>UA, <a href="#user-"><strong>#</strong></a>
|
|
|
|
<li>Unicode, <a href="#unicode">#</a>
|
|
|
|
<li>User, <a href="#user"><strong>#</strong></a>
|
|
|
|
<li>user agent, <a href="#user-"><strong>#</strong></a>
|
|
|
|
<li>User agent (UA), <a href="#user-agent"><strong>#</strong></a>
|
|
|
|
<li>Valid style sheet, <a href="#valid"><strong>#</strong></a>
|
|
|
|
<li>value, <a href="#values"><strong>#</strong></a>
|
|
|
|
<li>'visual' media group, <a href="#visual"><strong>#</strong></a>
|
|
|
|
<li>whitespace, <a href="#whitespace"><strong>#</strong></a>
|
|
</ul>
|
|
<!--end-index-->
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
sgml-live-element-indicator:t
|
|
End:
|
|
-->
|