index.html 174 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="en-US"><head>
  <title>CSSOM</title>

  <style type="text/css">
   pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
   pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
   dfn { font-weight:bold; font-style:normal }
   .example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
   .example table code { color:inherit }
   td, th { padding:.1em }
   .note {  margin-left:2em; color:green; font-style:italic; font-weight:bold }
   p.note::before { content:"Note: " }
   .XXX { padding:.5em; border:solid red }
   p.XXX::before { content:"Issue: " }
   dl.switch { padding-left:2em }
   dl.switch > dt { text-indent:-1.5em }
   dl.switch > dt:before { content:'\21AA'; padding:0 0.5em 0 0; display:inline-block; width:1em; text-align:right; line-height:0.5em }
   code { color:orangered }
   code :link, code :visited { color:inherit }
  </style>

  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet">
 </head>

 <body class="draft">
  <div class="head">

<!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<!--end-logo-->
   <h1 id="cssom">CSSOM</h1>
   <h2 class="no-num no-toc" id="w3c-working-draft-12-july-2011">W3C Working Draft 12 July 2011</h2>

   <dl>

    <dt>This Version:</dt>
    <dd class="publish"><a href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a></dd>

    <dt class="publish">Latest Version:</dt>
    <dd class="publish"><a href="http://www.w3.org/TR/cssom/">http://www.w3.org/TR/cssom/</a></dd>

    <dt class="publish">Latest Editor's draft:</dt>
    <dd class="publish"><a href="http://dev.w3.org/csswg/cssom/">http://dev.w3.org/csswg/cssom/</a></dd>

    <dt>Editor:</dt>
    <dd><a href="http://annevankesteren.nl/">Anne van Kesteren</a>
    (<a href="http://www.opera.com/">Opera Software ASA</a>)
    &lt;<a href="mailto:annevk@opera.com">annevk@opera.com</a>&gt;</dd>
   </dl>


<!--begin-copyright-->
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
<!--end-copyright-->
  </div>

  <hr class="top">


  <h2 class="no-num no-toc" id="abstract">Abstract</h2>

  <p>CSSOM defines APIs (including generic parsing and serialization rules)
  for Media Queries, Selectors, and of course CSS itself.</p>


  <h2 class="no-num no-toc" id="sotd">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 at http://www.w3.org/TR/.</a></em>

  <p>The
  (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
  public mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a>
  (see <a href="http://www.w3.org/Mail/Request">instructions</a>) is
  preferred for discussion of this specification. When sending e-mail,
  please put the text “cssom-view” in the subject, preferably
  like this: “[<!---->cssom-view<!---->] <em>…summary of
  comment…</em>”

  <p>This is the 12 July 2011 First Public Working Draft of CSSOM, produced by the
  <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part
  of the <a href="http://www.w3.org/Style/">Style Activity</a>).
  <!--XXX remove "First Public" after initial publication -->

  <p>This document was produced by a group operating under the
  <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
  W3C maintains a
  <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a>
  made in connection with the deliverables of the group; that page also
  includes instructions for disclosing a patent. An individual who has
  actual knowledge of a patent which the individual believes contains
  <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
  must disclose the information in accordance with
  <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
  Membership. 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.


  <h2 class="no-num no-toc" id="toc">Table of Contents</h2>


<!--begin-toc-->
<ol class="toc">
 <li><a href="#introduction"><span class="secno">1 </span>Introduction</a>
  <ol class="toc">
   <li><a href="#history"><span class="secno">1.1 </span>History</a></ol></li>
 <li><a href="#conformance"><span class="secno">2 </span>Conformance</a></li>
 <li><a href="#terminology"><span class="secno">3 </span>Terminology</a>
  <ol class="toc">
   <li><a href="#common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</a></ol></li>
 <li><a href="#media-queries"><span class="secno">4 </span>Media Queries</a>
  <ol class="toc">
   <li><a href="#parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</a></li>
   <li><a href="#serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</a>
    <ol class="toc">
     <li><a href="#serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</a></ol></li>
   <li><a href="#comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</a></li>
   <li><a href="#the-medialist-interface"><span class="secno">4.4 </span>The <code title="">MediaList</code> Interface</a></li>
   <li><a href="#creating-a-medialist-object"><span class="secno">4.5 </span>Creating a <code title="">MediaList</code> Object</a></ol></li>
 <li><a href="#selectors"><span class="secno">5 </span>Selectors</a>
  <ol class="toc">
   <li><a href="#parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</a></li>
   <li><a href="#serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</a></ol></li>
 <li><a href="#css"><span class="secno">6 </span>CSS</a>
  <ol class="toc">
   <li><a href="#style-sheet-0"><span class="secno">6.1 </span>Style Sheet</a>
    <ol class="toc">
     <li><a href="#the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code title="">StyleSheet</code> Interface</a></li>
     <li><a href="#the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code title="">CSSStyleSheet</code> Interface</a></ol></li>
   <li><a href="#style-sheet-collections"><span class="secno">6.2 </span>Style Sheet Collections</a>
    <ol class="toc">
     <li><a href="#the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code title="">Default-Style</code> Header</a></li>
     <li><a href="#the-stylesheetlist-sequence"><span class="secno">6.2.2 </span>The <code title="">StyleSheetList</code> Sequence</a></li>
     <li><a href="#extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code title="">Document</code> Interface</a></li>
     <li><a href="#interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</a>
      <ol class="toc">
       <li><a href="#persisting-the-selected-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected style sheet set</a></ol></li>
     <li><a href="#examples"><span class="secno">6.2.5 </span>Examples</a></ol></li>
   <li><a href="#style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</a>
    <ol class="toc">
     <li><a href="#the-linkstyle-interface"><span class="secno">6.3.1 </span>The <code title="">LinkStyle</code> Interface</a></li>
     <li><a href="#requirements-on-specifications"><span class="secno">6.3.2 </span>Requirements on specifications</a></li>
     <li><a href="#requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction"><span class="secno">6.3.3 </span>Requirements on User Agents Implementing the
  <span title=""><code>xml-stylesheet</code> processing instruction</span></a></li>
     <li><a href="#requirements-on-user-agents-implementing-the-http-link-header"><span class="secno">6.3.4 </span>Requirements on User Agents Implementing the HTTP
  <code title="">Link</code> Header</a></ol></li>
   <li><a href="#css-rules"><span class="secno">6.4 </span>CSS Rules</a>
    <ol class="toc">
     <li><a href="#the-cssrulelist-sequence"><span class="secno">6.4.1 </span>The <code title="">CSSRuleList</code> Sequence</a></li>
     <li><a href="#the-cssrule-interface"><span class="secno">6.4.2 </span>The <code title="">CSSRule</code> Interface</a>
      <ol class="toc">
       <li><a href="#extensibility"><span class="secno">6.4.2.1 </span>Extensibility</a></ol></li>
     <li><a href="#css-style-rule-rule-set"><span class="secno">6.4.3 </span>CSS Style Rule (Rule Set)</a></li>
     <li><a href="#css-import-rule"><span class="secno">6.4.4 </span>CSS <code title="">@import</code> Rule</a></li>
     <li><a href="#css-media-rule"><span class="secno">6.4.5 </span>CSS <code title="">@media</code> Rule</a></li>
     <li><a href="#css-font-face-rule"><span class="secno">6.4.6 </span>CSS <code title="">@font-face</code> Rule</a></li>
     <li><a href="#css-page-rule"><span class="secno">6.4.7 </span>CSS <code title="">@page</code> Rule</a></li>
     <li><a href="#css-namespace-rule"><span class="secno">6.4.8 </span>CSS <code title="">@namespace</code> Rule</a></ol></li>
   <li><a href="#css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</a>
    <ol class="toc">
     <li><a href="#the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code title="">CSSStyleDeclaration</code> Interface</a></li>
     <li><a href="#the-cssstyledeclarationvalue-interface"><span class="secno">6.5.2 </span>The <code title="">CSSStyleDeclarationValue</code> Interface</a></ol></li>
   <li><a href="#css-values"><span class="secno">6.6 </span>CSS Values</a>
    <ol class="toc">
     <li><a href="#parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</a></li>
     <li><a href="#serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</a>
      <ol class="toc">
       <li><a href="#examples-0"><span class="secno">6.6.2.1 </span>Examples</a></ol></li>
     <li><a href="#the-csspropertyvalue-interface"><span class="secno">6.6.3 </span>The <code title="">CSSPropertyValue</code> Interface</a></li>
     <li><a href="#the-cssmapvalue-interface"><span class="secno">6.6.4 </span>The <code title="">CSSMapValue</code> Interface</a></li>
     <li><a href="#the-csspropertyvaluelist-interface"><span class="secno">6.6.5 </span>The <code title="">CSSPropertyValueList</code> Interface</a></li>
     <li><a href="#the-csscomponentvalue-interface"><span class="secno">6.6.6 </span>The <code title="">CSSComponentValue</code> Interface</a></ol></ol></li>
 <li><a href="#dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</a>
  <ol class="toc">
   <li><a href="#the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code>ElementCSSInlineStyle</code> Interface</a></li>
   <li><a href="#extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code title="">Window</code> Interface</a></ol></li>
 <li><a href="#resolved-values"><span class="secno">8 </span>Resolved Values</a></li>
 <li><a href="#iana-considerations"><span class="secno">9 </span>IANA Considerations</a>
  <ol class="toc">
   <li><a href="#default-style"><span class="secno">9.1 </span><code>Default-Style</code></a></ol></li>
 <li><a class="no-num" href="#references">References</a>
  <ol class="toc">
   <li><a class="no-num" href="#normative-references">Normative references</a></li>
   <li><a class="no-num" href="#informative-references">Informative references</a></ol></li>
 <li><a class="no-num" href="#acknowledgments">Acknowledgments</a></ol>
<!--end-toc-->


  <h2 id="introduction"><span class="secno">1 </span>Introduction</h2>

  <p class="XXX">...</p>

  <h3 id="history"><span class="secno">1.1 </span>History</h3>

  <p>Several interfaces from DOM Level 2 Style
  <a href="http://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html" title="[CSSOM] CSSValue and related interfaces (message from the CSS WG)">have
  been obsoleted</a> because they were thought to be too awkward for
  frequent use. This specification no longer contains those features.
  <code>DOMImplementationCSS</code> and <code>CSSCharsetRule</code> have
  been removed as well as they were not deemed necessary.</p>


  <h2 id="conformance"><span class="secno">2 </span>Conformance</h2>

<p>All diagrams, examples, and notes in this specification are
non-normative, as are all sections explicitly marked non-normative.
Everything else in this specification is normative.

<p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
"OPTIONAL" in the normative parts of this document are to be
interpreted as described in RFC2119. For readability, these words do
not appear in all uppercase letters in this specification.
<a href="#refsRFC2119">[RFC2119]</a>

<p>Requirements phrased in the imperative as part of algorithms
(such as "strip any leading space characters" or "return false and
terminate these steps") are to be interpreted with the meaning of the
key word ("must", "should", "may", etc) used in introducing the
algorithm.

<p>Conformance requirements phrased as algorithms or specific steps
may be implemented in any manner, so long as the end result is
equivalent. (In particular, the algorithms defined in this
specification are intended to be easy to follow, and not intended to
be performant.)

<p id="hardwareLimitations">User agents may impose
implementation-specific limits on otherwise unconstrained inputs,
e.g. to prevent denial of service attacks, to guard against running
out of memory, or to work around platform-specific limitations.

<p>When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can't change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.

<p>Unless otherwise stated, string comparisons are done in a
<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> manner.


<h2 id="terminology"><span class="secno">3 </span>Terminology</h2>

<p>Terminology used in this specification is from
<cite>DOM Core</cite>,
<cite>HTML</cite>,
<cite>Associating Style Sheets with XML documents</cite>
and
<cite>XML</cite>
<a href="#refsDOMCORE">[DOMCORE]</a>
<a href="#refsHTML">[HTML]</a>
<a href="#refsXMLSS">[XMLSS]</a>
<a href="#refsXML">[XML]</a>

<p class="XXX"><dfn id="supported-styling-language">supported styling language</dfn>

<p>When this specification talks about object
<code title=""><var>A</var></code> where <code title=""><var>A</var></code> is actually an interface, it generally means an object implementing interface
<code title=""><var>A</var></code>.</p>

<p>The term <dfn id="whitespace">whitespace</dfn> is used as defined in CSS.
<!--XXX <a href="#ref-css">[CSS]</a>--></p>


  <h3 id="common-serializing-idioms"><span class="secno">3.1 </span>Common Serializing Idioms</h3>

  <p>To <dfn id="serialize-a-character">serialize a character</dfn> means to create a string of
  "<code>\</code>" (U+005C), followed by the character.</p>

  <p>To <dfn id="serialize-a-character-as-code-point">serialize a character as code point</dfn> means to create a
  string of "<code>\</code>" (U+005C), followed by the Unicode code point as
  the smallest possible number of hexadecimal digits in the range 0-9 a-f
  (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
  base 16, followed by a space (U+0020).</p>

  <p>To <dfn id="serialize-an-identifier">serialize an identifier</dfn> means to create a string represented
  by the concatenation of, for each character of the identifier:</p>

  <ul>
   <li>If the character is in the range U+0000 to U+001F, the character
   <a href="#serialize-a-character-as-code-point" title="serialize a character as code point">escaped as code point</a>.</li>
   <li>If the character is the first character and is in the range 0-9
   (U+0030 to U+0039), the character
   <a href="#serialize-a-character-as-code-point" title="serialize a character as code point">escaped as code point</a>.</li>
   <li>If the character is the second character and is in the range 0-9
   (U+0030 to U+0039) and the first character is a "<code>-</code>"
   (U+002D), the character
   <a href="#serialize-a-character-as-code-point" title="serialize a character as code point">escaped as code point</a>.</li>
   <li>If the character is the second character and is "<code>-</code>"
   (U+002D) and the first character is "<code>-</code>" too, the
   <a href="#serialize-a-character" title="serialize a character">escaped</a> character.</li>
   <li>If the character is not handled by one of the above rules and is
   greater than or equal to U+0080, is "<code>-</code>" (U+002D) or
   "<code>_</code>" (U+005F), or is in one of the ranges 0-9 (U+0030 to
   U+0039), A-Z (U+0041 to U+005A), or a-z (U+0061 to U+007A), the character
   itself.</li>
   <li>Otherwise, the <a href="#serialize-a-character" title="serialize a character">escaped</a>
   character.</li>
  </ul>

  <p>To <dfn id="serialize-a-string">serialize a string</dfn> means to create a string represented
  by '<code>"</code>' (U+0022), followed by the result of applying the rules
  below to each character of the given string, followed by
  '<code>"</code>' (U+0022):</p>

  <ul>
   <li>If the character is in the range U+0000 to U+001F, the character
   <a href="#serialize-a-character-as-code-point" title="serialize a character as code point">escaped as code point</a>.</li>
   <li>If the character is '<code>"</code>' (U+0022) or '<code>\</code>'
   (U+005C), the <a href="#serialize-a-character" title="serialize a character">escaped</a> character.</li>
   <li>Otherwise, the character itself.</li>
  </ul>

  <p class="note">"<code>'</code>" (U+0027) is not escaped because strings
  are always serialized with '<code>"</code>' (U+0022).</p>

  <p>To <dfn id="serialize-a-url">serialize a URL</dfn> means to create a string represented by
  "<code title="">url(</code>", followed by the
  <a href="#serialize-a-string" title="serialize a string">string escaped</a> value of the given
  string, followed by "<code>)</code>".</p>

  <p>To <dfn id="serialize-a-comma-separated-list">serialize a comma-separated list</dfn> concatenate all items of
  the list in list order while separating them by "<code>,</code>" (U+002C),
  followed by a space (U+0020).</p>

  <p>To <dfn id="serialize-a-whitespace-separated-list">serialize a whitespace-separated list</dfn> concatenate all
  items of the list in list order while separating them a space (U+0020).</p>


  <h2 id="media-queries"><span class="secno">4 </span>Media Queries</h2>

  <p>Media queries are defined by the Media Queries specification. This
  section defines various concepts around media queries, including their API
  and serialization form.</p>

  <!-- XXX ref -->

  <h3 id="parsing-media-queries"><span class="secno">4.1 </span>Parsing Media Queries</h3>

  <p>To
  <dfn id="parse-a-media-query-list">parse a media query list</dfn> for a
  given string <var title="">s</var> into a media query list is defined in
  the Media Queries specification. Return the list of one or more media
  queries that the algorithm defined there gives.</p> <!-- XXX ref -->

  <p class="note">A media query that ends up being "ignored" will turn
  into "<code title="">not all</code>".</p>

  <p>To
  <dfn id="parse-a-media-query">parse a media query</dfn> for a given string
  <var title="">s</var> means to follow the
  <a href="#parse-a-media-query-list">parse a media query list</a> steps and return null if more
  than one media query is returned or a media query if a
  single media query is returned.</p>

  <p class="note">Again, a media query that ends up being "ignored" will
  turn into "<code title="">not all</code>".</p>


  <h3 id="serializing-media-queries"><span class="secno">4.2 </span>Serializing Media Queries</h3>

  <p>To
  <dfn id="serialize-a-media-query-list">serialize a media query list</dfn>
  run these steps:</p>

  <ol>
   <li><p>If the media query list is empty return the empty string and
   terminate these steps.</li>

   <li><p><a href="#serialize-a-media-query" title="serialize a media query">Serialize</a> each
   media query in the list of media queries, sort them in lexicographical
   order, and then
   <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
   list.</li>
  </ol>

  <p>To
  <dfn id="serialize-a-media-query">serialize a media query</dfn> let
  <var title="">s</var> be the empty string, run the steps below, and
  finally return <var title="">s</var>:</p>

  <ol>
   <li><p>If the media query is negated append "<code>not</code>", followed
   by a space (U+0020), to <var title="">s</var>.</li>

   <li><p>Let <var title="">type</var> be the media type of the media query,
   <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> and
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</li>

   <li><p>If the media query does not contain media features append
   <var title="">type</var>, to <var title="">s</var>,
   then return <var title="">s</var> and terminate this algorithm.</li>

   <li><p>If <var title="">type</var> is not "<code>all</code>" or if the
   media query is negated append <var title="">type</var>, followed by a
   space (U+0020), followed by "<code>and</code>", followed by a space
   (U+0020), to <var title="">s</var>.</li>

   <li><p>Sort the media features in lexicographical order.</li>

   <li>
    <p>Then, for each media feature:</p>

    <ol>
     <li>Append a "<code>(</code>" (U+0028), followed by the media feature
     name, <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#converted-to-ascii-lowercase">converted to ASCII lowercase</a>,
     to <var title="">s</var>.<p></li>

     <li><p>If a value is given append a "<code>:</code>" (U+003A), followed
     by a space (U+0020), followed by the
     <a href="#serialize-a-media-feature-value" title="serialize a media feature value">serialized media feature value</a>,
     to <var title="">s</var>.</p>

     <li><p>Append a "<code>)</code>" (U+0029) to
     <var title="">s</var>.</li>

     <li><p>If this is not the last media feature append a space (U+0020),
     followed by "<code>and</code>", followed by a space (U+0020), to
     <var title="">s</var>.</li>
    </ol>
   </li>
  </ol>

  <div class="example">
   <p>Here are some examples of input (first column) and output (second
   column):</p>

   <table>
    <thead>
     <tr><th>Input<th>Output
    <tbody>
     <tr>
      <td><code>not screen and (min-WIDTH:5px) AND (max-width:40px  )</code>
      <td><code>not screen and (max-width: 40px) and (min-width: 5px)</code>
     <tr>
      <td><code>all and (color) and (color)</code>
      <td><code>(color)</code>
   </table>
  </div>


  <h4 id="serializing-media-feature-values"><span class="secno">4.2.1 </span>Serializing Media Feature Values</h4>

  <p class="XXX">This should probably be done in terms of mapping it to
  serializing CSS values as media features are defined in terms of CSS
  values after all.</p>

  <p>To <dfn id="serialize-a-media-feature-value">serialize a media feature value</dfn>
  named <var title="">v</var> locate <var title="">v</var> in the first
  column of the table below and use the serialization format described in
  the second column:</p>

  <table>
   <tr>
    <th>Media Feature
    <th>Serialization
   <tr>
    <td><code title="">width</code>
    <td>...
   <tr>
    <td><code title="">height</code>
    <td>...
   <tr>
    <td><code title="">device-width</code>
    <td>...
   <tr>
    <td><code title="">device-height</code>
    <td>...
   <tr>
    <td><code title="">orientation</code>
    <td>
     <p>If the value is `<code title="">portrait</code>`: "<code title="">portrait</code>".</p>
     <p>If the value is `<code title="">landscape</code>`: "<code title="">landscape</code>".</p>
   <tr>
    <td><code title="">aspect-ratio</code>
    <td>...
   <tr>
    <td><code title="">device-aspect-ratio</code>
    <td>...
   <tr>
    <td><code title="">color</code>
    <td>...
   <tr>
    <td><code title="">color-index</code>
    <td>...
   <tr>
    <td><code title="">monochrome</code>
    <td>...
   <tr>
    <td><code title="">resolution</code>
    <td>...
   <tr>
    <td><code title="">scan</code>
    <td>
     <p>If the value is `<code title="">progressive</code>`: "<code title="">progressive</code>".</p>
     <p>If the value is `<code title="">interlace</code>`: "<code title="">interlace</code>".</p>
   <tr>
    <td><code title="">grid</code>
    <td>...
  </table>

  <p>Other specifications can extend this table and vendor-prefixed media
  features can have custom serialization formats as well.</p>


  <h3 id="comparing-media-queries"><span class="secno">4.3 </span>Comparing Media Queries</h3>

  <p>To
  <dfn id="compare-media-queries">compare media queries</dfn>
  <var title="">m1</var> and <var title="">m2</var> means to
  <a href="#serialize-a-media-query" title="serialize a media query">serialize</a> them both and
  return true if they are a
  <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> match and false if they
  are not.</p>


  <h3 id="the-medialist-interface"><span class="secno">4.4 </span>The <code title="">MediaList</code> Interface</h3>

  <p>An object that implements the <code><a href="#medialist">MediaList</a></code> interface has an
  associated <dfn id="collection-of-media-queries">collection of media queries</dfn>.</p>

  <!-- http://dev.w3.org/2006/webapi/WebIDL/#idl-indexed-properties -->

  <pre class="idl">interface <dfn id="medialist">MediaList</dfn> {
  stringifier attribute DOMString <a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>;
  readonly attribute unsigned long <a href="#dom-medialist-length" title="dom-MediaList-length">length</a>;
  getter DOMString <a href="#dom-medialist-item" title="dom-MediaList-item">item</a>(unsigned long <var title="">index</var>);
  void <a href="#dom-medialist-appendmedium" title="dom-MediaList-appendMedium">appendMedium</a>(DOMString <var title="">medium</var>);
  void <a href="#dom-medialist-deletemedium" title="dom-MediaList-deleteMedium">deleteMedium</a>(DOMString <var title="">medium</var>);
};</pre>

  <p>The
  <dfn id="dom-medialist-mediatext" title="dom-MediaList-mediaText"><code>mediaText</code></dfn>
  attribute, on getting, must return a
  <a href="#serialize-a-media-query-list" title="serialize a media query list">serialization</a> of
  the <a href="#collection-of-media-queries">collection of media queries</a>.</p>

  <p>On setting the <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code>
  attribute these steps must be run:</p>

  <ol>
   <li><p>Empty the <a href="#collection-of-media-queries">collection of media queries</a>.</li>

   <li><p>If the given value is the empty string terminate these
   steps.</li>

   <li><p>Append all the media queries as a result of
   <a href="#parse-a-media-query-list" title="parse a media query list">parsing</a> the given
   value to the <a href="#collection-of-media-queries">collection of media queries</a>.</li>
  </ol>

  <p>The
  <dfn id="dom-medialist-length" title="dom-MediaList-length"><code>length</code></dfn>
  attribute must return the number of media queries in
  the <a href="#collection-of-media-queries">collection of media queries</a>.</p>

  <p>The
  <dfn id="dom-medialist-item" title="dom-MediaList-item"><code>item(<var title="">index</var>)</code></dfn>
  method must return the media query in the
  <a href="#collection-of-media-queries">collection of media queries</a> given by
  <var title="">index</var>, or null, if <var title="">index</var> is
  greater than or equal to the number of media queries in the
  <a href="#collection-of-media-queries">collection of media queries</a>.</p>
  <!-- XXX need consistency here WebIDL? list of media queries? -->

  <p>The
  <dfn id="dom-medialist-appendmedium" title="dom-MediaList-appendmedium"><code>appendMedium(<var title="">medium</var>)</code></dfn>
  method must run these steps:</p>

  <ol>
   <li><p>Let <var title="">m</var> be the result of
   <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given
   value.</li>

   <li><p>If <var title="">m</var> is null terminate these steps.</li>

   <li><p>If <a href="#compare-media-queries" title="compare media queries">comparing</a>
   <var title="">m</var> with any of the media queries in the
   <a href="#collection-of-media-queries">collection of media queries</a> returns true terminate these
   steps.</li>

   <li><p>Append <var title="">m</var> to the
   <a href="#collection-of-media-queries">collection of media queries</a>.</li>
  </ol>

  <p>The
  <dfn id="dom-medialist-deletemedium" title="dom-MediaList-deletemedium"><code>deleteMedium(<var title="">medium</var>)</code></dfn>
  method must run these steps:</p>

  <ol>
   <li><p>Let <var title="">m</var> be the result of
   <a href="#parse-a-media-query" title="parse a media query">parsing</a> the given
   value.</li>

   <li><p>If <var title="">m</var> is null terminate these steps.</li>

   <li><p>Remove any media query from the
   <a href="#collection-of-media-queries">collection of media queries</a> for which
   <a href="#compare-media-queries" title="compare media queries">comparing</a> the media query with
   <var title="">m</var> returns true.</li>
  </ol>


  <h3 id="creating-a-medialist-object"><span class="secno">4.5 </span>Creating a <code title="">MediaList</code> Object</h3>

  <p>To
  <dfn id="create-a-medialist-object">create a <code>MediaList</code> object</dfn>
  from <var title="">s</var> run these steps:</p>

  <ol>
   <li><p>Create a new <code><a href="#medialist">MediaList</a></code> object.</li>

   <li><p>Set its <a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>
   attribute to <var title="">s</var>.</li>

   <li><p>Return the newly created <code><a href="#medialist">MediaList</a></code> object.</li>
  </ol>


  <h2 id="selectors"><span class="secno">5 </span>Selectors</h2>

  <p>Selectors are defined in the Selectors specification. This section
  mainly defines how to serialize them.</p> <!-- XXX ref -->

  <!-- XXX ref universal selector etc? some are in <span> some not -->

  <h3 id="parsing-selectors"><span class="secno">5.1 </span>Parsing Selectors</h3>

  <p>To
  <dfn id="parse-a-group-of-selectors">parse a group of selectors</dfn>
  means to parse the value using the <code title="">selectors_group</code>
  production defined in the Selectors specification and return either a
  group of selectors if parsing did not fail or null if parsing did
  fail.</p> <!-- XXX ref -->


  <h3 id="serializing-selectors"><span class="secno">5.2 </span>Serializing Selectors</h3>
  <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->

  <p>To
  <dfn id="serialize-a-group-of-selectors">serialize a group of selectors</dfn>
  <a href="#serialize-a-selector" title="serialize a selector">serialize</a> each selector in the
  group of selectors and then
  <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
  group.</p>

  <p>To <dfn id="serialize-a-selector">serialize a selector</dfn> let
  <var title="">s</var> be the empty string, run the steps below for each
  part of the chain of the selector, and finally return
  <var title="">s</var>:</p>

  <ol>
   <li><p>If there is only one <span>simple selector</span> in the
   <span>sequence of simple selectors</span> which is a
   <span>universal selector</span>, append the result of
   <a href="#serialize-a-simple-selector" title="serialize a simple selector">serializing</a> the
   <span>universal selector</span> to <var title="">s</var>.</li>

   <li><p>Otherwise, for each <span>simple selector</span> in the
   <span>sequence of simple selectors</span> that is not a
   universal selector of which the <span>namespace prefix</span> maps to
   the null namespace (not in a namespace) or of which the
   <span>namespace prefix</span> maps to a namespace that is not the
   <span>default namespace</span>
   <a href="#serialize-a-simple-selector" title="serialize a simple selector">serialize</a> the
   <span>simple selector</span> and append the result to
   <var title="">s</var>.</li>

   <li><p>If this is not the last part of the chain of the selector append a
   space (U+0020), followed by the combinator
   "<code>&gt;</code>",
   "<code>+</code>", or
   "<code>~</code>"
   as appropriate, followed by another space (U+0020) if the combinator was
   not whitespace, to <var title="">s</var>.</li>

   <li><p>If this is the last part of the chain of the selector and there is
   a pseudo-element, append "<code>::</code>" followed by the name of the
   pseudo-class, to <var title="">s</var>.</li>
  </ol>


  <p>To
  <dfn id="serialize-a-simple-selector">serialize a simple selector</dfn>
  let <var title="">s</var> be the empty string, run the steps below, and
  finally return <var title="">s</var>:</p>

  <dl class="switch">
   <dt>type selector</dt>
   <dt>universal selector</dt>
   <dd>
    <ol>
     <li><p>If the <span>namespace prefix</span> maps to a namespace that is
     not the <span>default namespace</span> and is not the
     null namespace (not in a namespace) append the
     <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
     <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
     to <var title="">s</var>.</li>

     <li><p>If the <span>namespace prefix</span> maps to a namespace that is
     the null namespace (not in a namespace) append
     "<code>|</code>" (U+007C) to <var title="">s</var>.</li>
     <!-- This includes |* -->

     <li><p>If this is a type selector append the
     <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> element name to
     <var title="">s</var>.</p>

     <li><p>If this is a universal selector append "<code>*</code> (U+002A)
     to <var title="">s</var>.</li>
    </ol>
   </dd>

   <dt>attribute selector</dt>
   <dd>
    <ol>
     <li><p>Append "<code>[</code>" (U+005B) to
     <var title="">s</var>.</li>

     <li><p>If the <span>namespace prefix</span> maps to a namespace that is
     not the null namespace (not in a namespace) append the
     <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
     <span>namespace prefix</span>, followed by a "<code>|</code>" (U+007C)
     to <var title="">s</var>.</li>

     <li><p>If the <span>namespace prefix</span> maps to a namespace that is
     the null namespace (not in a namespace) append
     "<code>|</code>" (U+007C) to <var title="">s</var>.</li>
     <!-- This includes |* -->

     <li><p>Append the <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
     attribute name to <var title="">s</var>.</li>

     <li><p>If there is an attribute value specified, append
     "<code>=</code>",
     "<code>~=</code>",
     "<code>|=</code>",
     "<code>^=</code>",
     "<code>$=</code>", or
     "<code>*=</code>"
     as appropriate (depending on the type of attribute selector), followed
     by the <a href="#serialize-a-string" title="serialize a string">string escaped</a>
     attribute value, to <var title="">s</var>.</li>

     <li><p>Append "<code>]</code>" (U+005D) to
     <var title="">s</var>.</li>
    </ol>
   </dd>

   <dt>class selector</dt>
   <dd><p>Append a "<code>.</code>" (U+002E), followed by the
   <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> class name to
   <var title="">s</var>.</dd>

   <dt>ID selector</dt>
   <dd><p>Append a "<code>#</code>" (U+0023), followed by the
   <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a> ID to
   <var title="">s</var>.</dd>

   <dt>pseudo-class</dt>
   <dd>
    <p>If the pseudo-class does not accept arguments append
    "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to
    <var title="">s</var>.</p>

    <p>Otherwise, append "<code>:</code>" (U+003A), followed by the name of
    the pseudo-class, followed by "<code>(</code>" (U+0028), followed by the
    value of the pseudo-class argument determined as per below, followed by
    "<code>)</code>" (U+0029), to <var title="">s</var>.</p>

    <dl class="switch">
     <dt><code title="">:lang()</code></dt>
     <dd><p>The <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>
     value.</dd>

     <dt><code title="">:nth-child()</code></dt>
     <dt><code title="">:nth-last-child()</code></dt>
     <dt><code title="">:nth-of-type()</code></dt>
     <dt><code title="">:nth-last-of-type()</code></dt>
     <dd>
      <ol>
       <li><p>If the value is odd let the value be
       "<code title="">2n+1</code>".</li>

       <li><p>If the value is even let the value be
       "<code title="">2n</code>".</li>

       <li><p>If <var title="">a</var> is zero let the value be
       <var title="">b</var>
       <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as &lt;integer&gt;.</li>

       <li><p>If <var title="">a</var> is one or minus one and
       <var title="">b</var> is zero let the value be
       "<code title="">n</code>" (U+006E).</li>

       <li><p>If <var title="">a</var> is one or minus one let the value be
       "<code title="">n</code>" (U+006E), followed by
       "<code>+</code>" (U+002B) if <var title="">b</var> is positive,
       followed by <var title="">b</var>
       <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as &lt;integer&gt;.</li>

       <li><p>If <var title="">b</var> is zero let the value be
       <var title="">a</var>
       <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as &lt;integer&gt;,
       followed by "<code title="">n</code>" (U+006E).</li>

       <li><p>Otherwise let the value be
       <var title="">a</var>
       <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as &lt;integer&gt;,
       followed by "<code title="">n</code>" (U+006E), followed by
       "<code>+</code>" (U+002B) if <var title="">b</var> is positive,
       followed by <var title="">b</var>
       <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a> as &lt;integer&gt;.</li>
      </ol>
     </dd>

     <dt><code title="">:not()</code></dt>
     <dd><p>The result of serializing the value using the rules for
     <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing a group of selectors</a>.</dd>
    </dl>
   </dd>
  </dl>


  <h2 id="css"><span class="secno">6 </span>CSS</h2>

  <h3 id="style-sheet-0"><span class="secno">6.1 </span>Style Sheet</h3>

  <!-- XXX
   element inserted into the DOM, style sheet created, element removed from
   the DOM, what happens to StyleSheet?
  -->

  <p>A <dfn id="style-sheet">style sheet</dfn> is an abstract concept that
  represents a style sheet as defined by the CSS specification. In the DOM a
  <a href="#style-sheet">style sheet</a> is a <code><a href="#cssstylesheet">CSSStyleSheet</a></code> object. A
  <a href="#style-sheet">style sheet</a> has a number of associated properties:</p>

  <dl>
   <dt><dfn id="style-sheet-type">style sheet type</dfn></dt>
   <dd><p>The literal string "<code>text/css</code>".</dd>

   <dt><dfn id="style-sheet-location">style sheet location</dfn></dt>
   <dd><p>The <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#url">URL</a> of the
   <a href="#style-sheet">style sheet</a> or null if the <a href="#style-sheet">style sheet</a> was
   embedded.</dd>

   <dt><dfn id="style-sheet-parent">style sheet parent</dfn></dt>
   <dd><p>The <a href="#style-sheet">style sheet</a> that is the parent of the
   <a href="#style-sheet">style sheet</a>.</dd>

   <dt><dfn id="style-sheet-owner-node">style sheet owner node</dfn></dt>
   <dd><p>The DOM node associated with the <a href="#style-sheet">style sheet</a> or
   null if there is no associated DOM node.</dd>

   <dt><dfn id="style-sheet-owner-css-rule">style sheet owner CSS rule</dfn></dt>
   <dd><p>The <span>CSS rule</span> in the <a href="#style-sheet-parent">style sheet parent</a>
   that caused the inclusion of the <a href="#style-sheet">style sheet</a> or null if
   there is no such <span>CSS rule</span>.</dd>

   <dt><dfn id="style-sheet-media">style sheet media</dfn></dt>
   <dd>
    <p>The <code><a href="#medialist">MediaList</a></code> object associated with the
    <a href="#style-sheet">style sheet</a>.</p>

    <p>If this property is set to a string run the
    <a href="#create-a-medialist-object">create a <code>MediaList</code> object</a> steps for that
    string and associate the returned object with the
    <a href="#style-sheet">style sheet</a>.</p>
   </dd>

   <dt><dfn id="style-sheet-title">style sheet title</dfn></dt>
   <dd>
    <p>The title of the <a href="#style-sheet">style sheet</a>. It is said to be empty
    if the title is the empty string.</p>

    <div class="example">
     <p>In these examples the <a href="#style-sheet-title">style sheet title</a> ends up being
     empty:</p>

     <pre>&lt;style title=""&gt; body { background:papayawhip } &lt;/style&gt;</pre>

     <pre>&lt;style&gt; body { background:orange } &lt;/style&gt;</pre>
    </div>
   </dd>

   <dt><dfn id="style-sheet-alternate-flag">style sheet alternate flag</dfn></dt>
   <dd>
    <p>Either true or false. False by default.</p>

    <div class="example">
     <p>The following <a href="#style-sheet" title="style sheet">style sheets</a> have
     their <a href="#style-sheet-alternate-flag">style sheet alternate flag</a> set:</p>

     <pre><code>&lt;?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?&gt;</code></pre>

     <pre><code>&lt;link rel="alternate stylesheet" title="x" href="data:text/css,…"&gt;</code></pre>
    </div>
   </dd>

   <dt><dfn id="style-sheet-disabled-flag">style sheet disabled flag</dfn></dt>
   <dd>
    <p>Either true or false. False by default.</p>

    <p class="note">Even when false it does not necessarily mean that the
    <a href="#style-sheet">style sheet</a> is actually rendered.</p>
   </dd>


   <dt><dfn id="style-sheet-css-rules">style sheet CSS rules</dfn></dt>
   <dd><p>The <span title="CSS rule">CSS rules</span> associated with the
   <a href="#style-sheet">style sheet</a>.</dd>
  </dl>

  <p>When you are to <a href="#create-a-style-sheet">create a style sheet</a> the above properties,
  with the exception of <a href="#style-sheet-type">style sheet type</a> and
  <a href="#style-sheet-css-rules">style sheet CSS rules</a>, are to be set to
  their proper values.</p>

  <!-- same-origin restrictions -->


  <h4 id="the-stylesheet-interface"><span class="secno">6.1.1 </span>The <code title="">StyleSheet</code> Interface</h4>

  <p>The <code><a href="#stylesheet">StyleSheet</a></code> interface represents a base interface that
  has no meaning on its own.</p>

  <pre class="idl">interface <dfn id="stylesheet">StyleSheet</dfn> {
  readonly attribute DOMString <a href="#dom-stylesheet-type" title="dom-StyleSheet-type">type</a>;
  readonly attribute DOMString <a href="#dom-stylesheet-href" title="dom-StyleSheet-href">href</a>;
  readonly attribute Node <a href="#dom-stylesheet-ownernode" title="dom-StyleSheet-ownerNode">ownerNode</a>;
  readonly attribute <a href="#stylesheet">StyleSheet</a> <a href="#dom-stylesheet-parentstylesheet" title="dom-StyleSheet-parentStyleSheet">parentStyleSheet</a>;
  readonly attribute DOMString <a href="#dom-stylesheet-title" title="dom-StyleSheet-title">title</a>;
  [PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <a href="#dom-stylesheet-media" title="dom-StyleSheet-media">media</a>;
           attribute boolean <a href="#dom-stylesheet-disabled" title="dom-StyleSheet-disabled">disabled</a>;
};</pre>

  <p>The
  <dfn id="dom-stylesheet-type" title="dom-StyleSheet-type"><code>type</code></dfn>
  attribute must return the
  <a href="#style-sheet-type">style sheet type</a>.</p>

  <p>The
  <dfn id="dom-stylesheet-href" title="dom-StyleSheet-href"><code>href</code></dfn>
  attribute must return the
  <a href="#style-sheet-location">style sheet location</a>.</p>

  <p>The
  <dfn id="dom-stylesheet-ownernode" title="dom-StyleSheet-ownerNode"><code>ownerNode</code></dfn>
  attribute must return the
  <a href="#style-sheet-owner-node">style sheet owner node</a>.</p>

  <p>The
  <dfn id="dom-stylesheet-parentstylesheet" title="dom-StyleSheet-parentStyleSheet"><code>parentStyleSheet</code></dfn>
  attribute must return the
  <a href="#style-sheet-parent">style sheet parent</a>.</p>

  <p>The
  <dfn id="dom-stylesheet-title" title="dom-StyleSheet-title"><code>title</code></dfn>
  attribute must return the
  <a href="#style-sheet-title">style sheet title</a>.</p>

  <p>The
  <dfn id="dom-stylesheet-media" title="dom-StyleSheet-media"><code>media</code></dfn>
  attribute must return the
  <a href="#style-sheet-media">style sheet media</a>.</p>

  <p>The
  <dfn id="dom-stylesheet-disabled" title="dom-StyleSheet-disabled"><code>disabled</code></dfn>
  attribute must, on getting, return the
  <a href="#style-sheet-disabled-flag">style sheet disabled flag</a>. On setting, it
  must set the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> to
  the given value.</p>


  <h4 id="the-cssstylesheet-interface"><span class="secno">6.1.2 </span>The <code title="">CSSStyleSheet</code> Interface</h4>

  <p>The <code><a href="#cssstylesheet">CSSStyleSheet</a></code> interface represents a
  <a href="#style-sheet">style sheet</a>.</p>

  <!--
   IE exposes:
   owningElement, pages, id, type, href, disabled, cssText, readOnly, title,
   parentStyleSheet, imports, rules, media
  -->

  <pre class="idl">interface <dfn id="cssstylesheet">CSSStyleSheet</dfn> : <a href="#stylesheet">StyleSheet</a> {
  readonly attribute <a href="#cssrule">CSSRule</a> <a href="#dom-cssstylesheet-ownerrule" title="dom-CSSStyleSheet-ownerRule">ownerRule</a>;
  readonly attribute <a href="#cssrulelist">CSSRuleList</a> <a href="#dom-cssstylesheet-cssrules" title="dom-CSSStyleSheet-cssRules">cssRules</a>;
  unsigned long <a href="#dom-cssstylesheet-insertrule" title="dom-CSSStyleSheet-insertRule">insertRule</a>(DOMString <var title="">rule</var>, unsigned long <var title="">index</var>);
  void <a href="#dom-cssstylesheet-deleterule" title="dom-CSSStyleSheet-deleteRule">deleteRule</a>(unsigned long <var title="">index</var>);
};</pre>

  <p>The
  <dfn id="dom-cssstylesheet-ownerrule" title="dom-CSSStyleSheet-ownerRule"><code>ownerRule</code></dfn>
  attribute must return the
  <a href="#style-sheet-owner-css-rule">style sheet owner CSS rule</a>.</p>

  <p>The
  <dfn id="dom-cssstylesheet-cssrules" title="dom-CSSStyleSheet-cssRules"><code>cssRules</code></dfn>
  attribute must return a <code><a href="#cssrulelist">CSSRuleList</a></code>
  object representing the <a href="#style-sheet-css-rules">style sheet CSS rules</a>.</p>

  <p class="note">CSS rules that were dropped during parsing can not be
  found using APIs described by this specification.</p>

  <p>The
  <dfn id="dom-cssstylesheet-insertrule" title="dom-CSSStyleSheet-insertRule"><code>insertRule(<var title="">rule</var>, <var title="">index</var>)</code></dfn>
  method must <a href="#insert-a-css-rule">insert a CSS rule</a>
  <var title="">rule</var> the in CSS rule list returned by
  <code title="dom-CSSStyleSheet-cssRules"><a href="#dom-cssstylesheet-cssrules">cssRules</a></code> at
  <var title="">index</var>.</p>

  <p>The
  <dfn id="dom-cssstylesheet-deleterule" title="dom-CSSStyleSheet-deleteRule"><code>deleteRule(<var title="">index</var>)</code></dfn>
  method must <a href="#remove-a-css-rule">remove a CSS rule</a> from the
  CSS rule list returned by
  <code title="dom-CSSStyleSheet-cssRules"><a href="#dom-cssstylesheet-cssrules">cssRules</a></code> at
  <var title="">index</var>.</p>


  <h3 id="style-sheet-collections"><span class="secno">6.2 </span>Style Sheet Collections</h3>

  <p>Below various new concepts are defined that are associated with each
  <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> object.</p>

  <p>Each <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code> has an associated list of zero or more
  <a href="#style-sheet" title="style sheet">style sheets</a>, named the
  <dfn id="document-style-sheets">document style sheets</dfn>. This is
  an ordered list that contains all
  <a href="#style-sheet" title="style sheet">style sheets</a> associated with the
  <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code>, in
  <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#tree-order">tree order</a>, with
  <a href="#style-sheet" title="style sheet">style sheets</a> created from HTTP
  <code title="http-link">Link</code> headers first, if any, in header
  order.</p>

  <p>To <dfn id="create-a-style-sheet">create a style sheet</dfn>, run these
  steps:</p>

  <ol>
   <li><p>Create a new <a href="#style-sheet">style sheet</a> object and set its
   properties as specified.</li>

   <li><p>Then run the <a href="#add-a-style-sheet">add a style sheet</a> steps for the newly
   created <a href="#style-sheet">style sheet</a>.</li>
  </ol>

  <p>To <dfn id="add-a-style-sheet">add a style sheet</dfn>, run these
  steps:</p>

  <ol>
   <li><p>Add the <a href="#style-sheet">style sheet</a> to the list of
   <a href="#document-style-sheets">document style sheets</a> at the appropriate location. The
   remainder of these steps deal with the
   <a href="#style-sheet-disabled-flag">style sheet disabled flag</a>.</li>

   <li><p>If the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> is true terminate
   these steps.</li>

   <li><p>If the <a href="#style-sheet-title">style sheet title</a> is non-empty, the
   <a href="#style-sheet-alternate-flag">style sheet alternate flag</a> is false, and
   <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a> is the empty string
   <a href="#change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</a> to the
   <a href="#style-sheet-title">style sheet title</a>.</li>

   <li>
    <p>If any of the following is true set the
    <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> to false and terminate these
    steps:</p>

    <ul>
     <li><p>The <a href="#style-sheet-title">style sheet title</a> is empty.</li>
     <li><p>The <a href="#last-style-sheet-set-name">last style sheet set name</a> is null and the
     <a href="#style-sheet-title">style sheet title</a> is a
     <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> match
     for the <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a>.</li>
     <li><p>The <a href="#style-sheet-title">style sheet title</a> is a
     <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> match for the
     <a href="#last-style-sheet-set-name">last style sheet set name</a>.</li>
    </ul>
   </li>

   <li><p>Set the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> to true.</li>
  </ol>

  <p>A <dfn id="persistent-style-sheet">persistent style sheet</dfn> is a
  <a href="#style-sheet">style sheet</a> from the <a href="#document-style-sheets">document style sheets</a>
  whose <a href="#style-sheet-title">style sheet title</a> is the empty string and whose
  <a href="#style-sheet-alternate-flag">style sheet alternate flag</a> is false.</p>

  <p>A <dfn id="style-sheet-set">style sheet set</dfn> is an ordered
  collection of one or more <a href="#style-sheet" title="style sheet">style sheets</a>
  from the <a href="#document-style-sheets">document style sheets</a> which have an identical
  <a href="#style-sheet-title">style sheet title</a> that is not the empty string.</p>

  <p>A <dfn id="style-sheet-set-name">style sheet set name</dfn> is the
  <a href="#style-sheet-title">style sheet title</a> the <a href="#style-sheet-set">style sheet set</a> has in
  common.</p>

  <p>An <dfn id="enabled-style-sheet-set">enabled style sheet set</dfn> is a
  <a href="#style-sheet-set">style sheet set</a> of which each <a href="#style-sheet">style sheet</a> has
  its <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> set to false.</p>

  <p>To <dfn id="enable-a-style-sheet-set">enable a style sheet set</dfn>
  with name <var title="">name</var>, run these steps:</p>

  <ol>
   <li><p>If <var title="">name</var> is the empty string set the
   <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> for each <a href="#style-sheet">style sheet</a>
   that is in a <a href="#style-sheet-set">style sheet set</a> to true and terminate these
   steps.</li>

   <li><p>Set the <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> for each
   <a href="#style-sheet">style sheet</a> in a <a href="#style-sheet-set">style sheet set</a> whose
   <a href="#style-sheet-set-name">style sheet set name</a> is a
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> match for
   <var title="">name</var> to false and set it to true for all other
   <a href="#style-sheet" title="style sheet">style sheets</a> in a
   <a href="#style-sheet-set">style sheet set</a>.</li>
  </ol>

  <p>To <dfn id="select-a-style-sheet-set">select a style sheet set</dfn>
  with name <var title="">name</var>, run these steps:</p>

  <ol>
   <li><p><a href="#enable-a-style-sheet-set">Enable a style sheet set</a> with name
   <var title="">name</var>.</li>

   <li><p>Set <a href="#last-style-sheet-set-name">last style sheet set name</a> to
   <var title="">name</var>.</li>
  </ol>

  <p>A <dfn id="last-style-sheet-set-name">last style sheet set name</dfn>
  is a concept to determine what <a href="#style-sheet-set">style sheet set</a> was last
  <a href="#select-a-style-sheet-set" title="select a style sheet set">selected</a>. Initially its
  value is null.</p>

  <p>A
  <dfn id="preferred-style-sheet-set-name">preferred style sheet set name</dfn>
  is a concept to determine which
  style sheets need to have their
  <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> set to false. Initially its value
  is the empty string.

  <p>To
  <dfn id="change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</dfn>
  with name <var title="">name</var>, run these steps:</p>

  <ol>
   <li><p>Let the <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a> be
   <var title="">current</var>.</li>

   <li><p>Set <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a> to
   <var title="">name</var>.</li>

   <li><p>If <var title="">name</var> is not a
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> match for
   <var title="">current</var> and
   <a href="#last-style-sheet-set-name">last style sheet set name</a> is null
   <a href="#enable-a-style-sheet-set">enable a style sheet set</a> with name
   <var title="">new</var>.</li>
  </ol>

  <!-- XXX ought to define "applied"

  thoughts:
    depends on disabled flag, alternate flag, media queries, sheesh
   -->


  <h4 id="the-http-default-style-header"><span class="secno">6.2.1 </span>The HTTP <code title="">Default-Style</code> Header</h4>

  <p>The HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code> header
  can be used to set the <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a>
  influencing which <a href="#style-sheet-set">style sheet set</a> is (initially) the
  <a href="#enabled-style-sheet-set">enabled style sheet set</a>.</p>

  <p>For each HTTP <code title="http-default-style"><a href="#default-style">Default-Style</a></code>
  header, in header order, the user agent must
  <a href="#change-the-preferred-style-sheet-set-name">change the preferred style sheet set name</a> with name being the
  value of the header.</p>


  <h4 id="the-stylesheetlist-sequence"><span class="secno">6.2.2 </span>The <code title="">StyleSheetList</code> Sequence</h4>

  <p>The sequence parameterized type represents an ordered collection of
  <a href="#style-sheet" title="style sheet">style sheets</a>.</p>

  <pre class="idl">typedef sequence&lt;<a href="#stylesheet">StyleSheet</a>&gt; <dfn id="stylesheetlist">StyleSheetList</dfn>;</pre>

<!--
  <pre class="idl">interface <dfn>StyleSheetList</dfn> {
  readonly attribute unsigned long <span title="stylesheetlist-length">length</span>;
  getter <span>StyleSheet</span> <span title="stylesheetlist-item">item</span>(unsigned long <var title="">index</var>);
};</pre>

  <p>The
  <dfn id="stylesheetlist-length" title="stylesheetlist-length"><code>length</code></dfn>
  attribute, on getting, must return the number of
  objects currently in the list.</p>

  <p>The
  <dfn title="stylesheetlist-item"><code>item(<var title="">index</var>)</code></dfn>
  method, when invoked, must return the
  <code>StyleSheet</code> object in the list given by <var title="">index</var>, or
  null, if <var title="">index</var> is greater than or equal to the
  number of items in the list.</p>
-->


  <h4 id="extensions-to-the-document-interface"><span class="secno">6.2.3 </span>Extensions to the <code title="">Document</code> Interface</h4>

  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=200930 (FIXED) -->
  <pre class="idl">partial interface <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a> {
  readonly attribute <a href="#stylesheetlist">StyleSheetList</a> <a href="#dom-document-stylesheets" title="dom-Document-styleSheets">styleSheets</a>;
           attribute DOMString? <a href="#dom-document-selectedStyleSheetSet" title="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</a>;
  readonly attribute DOMString? <a href="#dom-document-lastStyleSheetSet" title="dom-Document-lastStyleSheetSet">lastStyleSheetSet</a>;
  readonly attribute DOMString? <a href="#dom-document-preferredStyleSheetSet" title="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</a>;
  readonly attribute DOMStringList <a href="#dom-document-styleSheetSets" title="dom-Document-styleSheetSets">styleSheetSets</a>;
  void <a href="#dom-document-enablestylesheetsforset" title="dom-Document-enableStyleSheetsForSet">enableStyleSheetsForSet</a>(DOMString? <var title="">name</var>);
};</pre>

  <p>The
  <dfn id="dom-document-stylesheets" title="dom-Document-styleSheets"><code>styleSheets</code></dfn>
  attribute must return a <code><a href="#stylesheetlist">StyleSheetList</a></code>
  sequence representing the <a href="#document-style-sheets">document style sheets</a>.</p>

  <p class="note">Because of historical IDL limitations the
  <code title="dom-Document-styleSheets"><a href="#dom-document-stylesheets">styleSheets</a></code> attribute used
  to be on a separate interface, <code title="">DocumentStyle</code>.</p>

  <p>The
  <dfn id="dom-document-selectedStyleSheetSet" title="dom-Document-selectedStyleSheetSet"><code>selectedStyleSheetSet</code></dfn>
  attribute, on getting, must run these steps:</p>

  <ol>
   <li><p>If there is a single <a href="#enabled-style-sheet-set">enabled style sheet set</a> and no
   other <a href="#document-style-sheets">document style sheets</a> with a non-empty
   <a href="#style-sheet-title">style sheet title</a> have the
   <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> set to false return the
   <a href="#style-sheet-set-name">style sheet set name</a> of the
   <a href="#enabled-style-sheet-set">enabled style sheet set</a> and terminate this set of
   steps.</li>

   <li><p>Otherwise, if <a href="#style-sheet" title="style sheet">style sheets</a> from
   different <a href="#style-sheet-set" title="style sheet set">style sheet sets</a> have
   their <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> set to false return
   null and terminate this set of steps.</li>

   <li>
    <p>Otherwise, return the empty string.</p>

    <p class="note">At this point either all
    <a href="#style-sheet" title="style sheet">style sheets</a> with a non-empty
    <a href="#style-sheet-title">style sheet title</a> have the
    <a href="#style-sheet-disabled-flag">style sheet disabled flag</a> set to true or there are no such
    <a href="#style-sheet" title="style sheet">style sheets</a>.</p>
   </li>
  </ol>

  <p>On setting the
  <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedStyleSheetSet">selectedStyleSheetSet</a></code>
  attribute these steps must be run:</p>

  <ol>
   <li><p>If the value is null terminate this set of steps.</li>

   <li><p>Otherwise, <a href="#select-a-style-sheet-set">select a style sheet set</a> with as name the
   value passed.</li>
  </ol>

  <p>From the DOM's perspective, all views have the same
  <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedStyleSheetSet">selectedStyleSheetSet</a></code>.
  If a user agent supports multiple views with different selected
  alternative style sheets, then this attribute (and the
  <code><a href="#stylesheet">StyleSheet</a></code> interface's
  <code title="dom-StyleSheet-disabled"><a href="#dom-stylesheet-disabled">disabled</a></code> attribute)
  must return and set the value for the default
  view.</p>
  <!-- XXX clean up once we get rid of views -->

  <p>The
  <dfn id="dom-document-lastStyleSheetSet" title="dom-Document-lastStyleSheetSet"><code>lastStyleSheetSet</code></dfn>
  attribute must return the
  <a href="#last-style-sheet-set-name">last style sheet set name</a>.</p>

  <p class="note">This attribute is initially null.</p>

  <p>The
  <dfn id="dom-document-preferredStyleSheetSet" title="dom-Document-preferredStyleSheetSet"><code>preferredStyleSheetSet</code></dfn>
  attribute must return the
  <a href="#preferred-style-sheet-set-name">preferred style sheet set name</a>.</p>

  <p class="note">Unlike
  <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-lastStyleSheetSet">lastStyleSheetSet</a></code>,
  this attribute is initially the empty string.</p> <!-- XXX change? -->

  <p>The
  <dfn id="dom-document-styleSheetSets" title="dom-Document-styleSheetSets"><code>styleSheetSets</code></dfn>
  attribute must return a list of the
  <a href="#style-sheet-set-name" title="style sheet set name">style sheet set names</a> of the
  <a href="#style-sheet-set" title="style sheet set">style sheet sets</a>, in order of the
  <a href="#document-style-sheets">document style sheets</a>.</p>

  <p>The
  <dfn id="dom-document-enablestylesheetsforset" title="dom-Document-enableStyleSheetsForSet"><code>enableStyleSheetsForSet(<var title="">name</var>)</code></dfn>
  method must, when invoked, run these steps:</p>

  <ol>
   <li><p>If <var title="">name</var> is null terminate these
   steps.</li>

   <li><p><a href="#enable-a-style-sheet-set">Enable a style sheet set</a> with name
   <var title="">name</var>.</li>
  </ol>

  <p class="note"><a href="#style-sheet" title="Style sheet">Style sheets</a> with an
  empty <a href="#style-sheet-title">style sheet title</a> are never affected by this method.
  This method does not change the values of the
  <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-lastStyleSheetSet">lastStyleSheetSet</a></code> or
  <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredStyleSheetSet">preferredStyleSheetSet</a></code>
  attributes.</p>


  <h4 id="interaction-with-the-user-interface"><span class="secno">6.2.4 </span>Interaction with the User Interface</h4>

  <p>The user interface of Web browsers that support style sheets
  should list the style sheet titles given in the
  <code title="dom-Document-styleSheetSets"><a href="#dom-document-styleSheetSets">styleSheetSets</a></code> list,
  showing the
  <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedStyleSheetSet">selectedStyleSheetSet</a></code>
  as the selected style sheet set, leaving none selected if it is
  null or the empty string, and selecting an extra option
  "Basic Page Style" (or similar) if it is the empty string and the
  <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredStyleSheetSet">preferredStyleSheetSet</a></code>
  is the empty string as well.</p>

  <p>Selecting a style sheet from this list should
  use the <a href="#select-a-style-sheet-set">select a style sheet set</a> set of steps. This
  (by definition) affects the
  <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-lastStyleSheetSet">lastStyleSheetSet</a></code>
  attribute.</p>

  <h5 id="persisting-the-selected-style-sheet-set"><span class="secno">6.2.4.1 </span>Persisting the selected style sheet set</h5>

  <p>If a user agent persist the selected style sheet set, they should use
  the value of the
  <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedStyleSheetSet">selectedStyleSheetSet</a></code>
  attribute, or if that is null, the
  <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-lastStyleSheetSet">lastStyleSheetSet</a></code>
  attribute, when leaving the page (or at some other time) to determine the
  set name to store. If that is null then the style sheet set should not be
  persisted.</p>

  <p>When re-setting the style sheet set to the persisted value (which can
  happen at any time, typically at the first time the style sheets are
  needed for styling the document, after the <code>&lt;head&gt;</code> of
  the document has been parsed, after any scripts that are not dependent on
  computed style have executed), the style sheet set
  should be set by using the
  <a href="#select-a-style-sheet-set">select a style sheet set</a> set of steps as if the user had
  selected the set manually.</p>

  <p class="note">This specification does not give any suggestions on
  how user agents should decide to persist the style sheet set or whether or
  how to persist the selected set across pages.</p>

  <!-- XXX this UI section suggests we may want to introduce a few more
       idioms -->

  <h4 id="examples"><span class="secno">6.2.5 </span>Examples</h4>

  <div class="example">
   <p>Thus, in the following HTML snippet:</p>

   <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
&lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
&lt;script&gt;

  document.selectedStyleSheetSet = 'foo';
  document.styleSheets[1].disabled = false;
&lt;/script&gt;
&lt;link rel="alternate stylesheet" title="foo" href="c"&gt;
&lt;link rel="alternate stylesheet" title="bar" href="d"&gt;</pre>

   <p>...the style sheets that end up enabled are style sheets "a", "b",
   and "c", the
   <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedStyleSheetSet">selectedStyleSheetSet</a></code>
   attribute would return null,
   <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-lastStyleSheetSet">lastStyleSheetSet</a></code>
   would return "foo", and
   <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredStyleSheetSet">preferredStyleSheetSet</a></code>
   would return the empty string.</p>

   <p>Similarly, in the following HTML snippet:</p>

   <pre>&lt;link rel="alternate stylesheet" title="foo" href="a"&gt;
&lt;link rel="alternate stylesheet" title="bar" href="b"&gt;
&lt;script&gt;
  var before = document.preferredStyleSheetSet;
  document.styleSheets[1].disabled = false;
&lt;/script&gt;
&lt;link rel="stylesheet" title="foo" href="c"&gt;

&lt;link rel="alternate stylesheet" title="bar" href="d"&gt;
&lt;script&gt;
  var after = document.preferredStyleSheetSet;
&lt;/script&gt;</pre>

   <p>...the "before" variable will be equal to the empty string, the
   "after" variable will be equal to "foo", and style sheets "a" and "c"
   will be enabled. This is the case even though the first script block
   sets style sheet "b" to be enabled, because upon parsing the
   following <code>&lt;link&gt;</code> element, the
   <code title="dom-Document-preferredStyleSheetSet"><a href="#dom-document-preferredStyleSheetSet">preferredStyleSheetSet</a></code>
   is set and the
   <code title="dom-Document-enableStyleSheetsForSet"><a href="#dom-document-enablestylesheetsforset">enableStyleSheetsForSet()</a></code>
   method is called (since
   <code title="dom-Document-selectedStyleSheetSet"><a href="#dom-document-selectedStyleSheetSet">selectedStyleSheetSet</a></code>
   was never set
   explicitly, leaving
   <code title="dom-Document-lastStyleSheetSet"><a href="#dom-document-lastStyleSheetSet">lastStyleSheetSet</a></code> at
   null throughout), which changes which style sheets are enabled and which
   are not.</p>
  </div>


  <h3 id="style-sheet-association"><span class="secno">6.3 </span>Style Sheet Association</h3>

  <p>This section defines the interface a
  <a href="#style-sheet-owner-node">style sheet owner node</a> of a <a href="#style-sheet">style sheet</a> has to
  implement and defines the requirements for
  <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet" title="xml-stylesheet processing instruction">xml-stylesheet processing instructions</a>
  and HTTP <code title="http-link">Link</code> headers when the link
  relation type is an
  <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
  "<code title="">stylesheet</code>" since nobody else was interested in
  defining this.</p>

  <p class="note">The editor is in good hope that HTML and SVG will define the
  appropriate processing in their respective specifications, in terms of
  this specification, in due course.</p>


  <h4 id="the-linkstyle-interface"><span class="secno">6.3.1 </span>The <code title="">LinkStyle</code> Interface</h4>

  <p>The <dfn id="associated-style-sheet">associated style sheet</dfn> of a
  node is the <a href="#style-sheet">style sheet</a> in the list of
  <a href="#document-style-sheets">document style sheets</a> of which the
  <a href="#style-sheet-owner-node">style sheet owner node</a>
  implements the <code><a href="#linkstyle">LinkStyle</a></code> interface.</p>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="linkstyle">LinkStyle</dfn> {
  readonly attribute <a href="#stylesheet">StyleSheet</a> <a href="#dom-linkstyle-sheet" title="dom-linkstyle-sheet">sheet</a>;
};</pre>

  <p>The <dfn id="dom-linkstyle-sheet" title="dom-LinkStyle-sheet"><code>sheet</code></dfn> attribute
  must return the <a href="#associated-style-sheet">associated style sheet</a> for the node, or null,
  if there is no <a href="#associated-style-sheet">associated style sheet</a>.</p>

  <div class="example">
   <p>In the following HTML snippet the first HTML <code>style</code>
   element has a <code>sheet</code> attribute that returns a
   <code><a href="#stylesheet">StyleSheet</a></code> object representing the style sheet, but for
   the second <code>style</code> attribute it returns null.
   (Assuming the user agent supports CSS (<code>text/css</code>) and does
   not support ExampleSheets (<code>text/example-sheets</code>).</p>

   <pre>&lt;style type=text/css&gt; body { background:lime } &lt;/style&gt;
&lt;style type=text/example-sheets&gt; $(body).background := lime &lt;/style&gt;</pre>
  </div>

  <p class="note">Whether or not the node refers to a style sheet is defined
  by the specification that defines the semantics of said node.</p>


  <h4 id="requirements-on-specifications"><span class="secno">6.3.2 </span>Requirements on specifications</h4>

  <p>Specifications introducing new ways of associating style sheets through
  the DOM should define which nodes implement the
  <code><a href="#linkstyle">LinkStyle</a></code> interface. When doing so, they
  must also define when a <a href="#style-sheet">style sheet</a> is
  <a href="#create-a-style-sheet" title="create a style sheet">created</a>.</p>


  <h4 id="requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction"><span class="secno">6.3.3 </span>Requirements on User Agents Implementing the
  <span title=""><code>xml-stylesheet</code> processing instruction</span></h4>

  <!-- XXX load/error events, reparse -->

  <pre class="idl"><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#processinginstruction">ProcessingInstruction</a> implements <a href="#linkstyle">LinkStyle</a>;</pre>

  <p>For each
  <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-xml-stylesheet"><code>xml-stylesheet</code> processing instruction</a>
  that is not part of the
  <a class="external" href="http://www.w3.org/TR/xml/#dt-doctype">document type declaration</a> and has an
  <code title="">href</code>
  <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> these steps must
  (unless otherwise stated) be run:</p>

  <ol>
   <li><p>Let <var title="">title</var> be the value of the
   <code title="">title</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> or the empty string if the
   <code title="">title</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> is not specified.</li>

   <li><p>If there is an <code title="">alternate</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
   whose value is a <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> match
   for "<code title="">yes</code>" and <var title="">title</var> is the
   empty string terminate these steps.</li>

   <li><p>If there is a <code title="">type</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> whose
   value is not a <a href="#supported-styling-language">supported styling language</a> the user agent
   may terminate these steps.</li>

   <li><p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#resolve-a-url" title="Resolve a URL">Resolve</a>
   the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#url">URL</a> specified by the
   <code title="">href</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a> and then
   <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#fetch">fetch</a> it.</li>

   <li>
    <p>When the resource is available, the document is in
    <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>
    and the
    <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#content-type">Content-Type metadata</a> of
    the resource is not a <a href="#supported-styling-language">supported styling language</a> change the
    <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#content-type">Content-Type metadata</a> of the resource
    to <code title="">text/css</code>.</p>

    <p class="note">This step might never actually happen, but is included
    here in case other specifications change, to keep things consistent.</p>
   </li>

   <li><p>If the resource is not in a
   <a href="#supported-styling-language">supported styling language</a> terminate these steps.</li>

   <li>
    <p><a href="#create-a-style-sheet">Create a style sheet</a> with the following properties:</p>

    <dl>
     <dt><a href="#style-sheet-location">style sheet location</a></dt>
     <dd><p>The <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#absolute-url">absolute URL</a> of the
     resource.</dd>

     <dt><a href="#style-sheet-parent">style sheet parent</a></dt>
     <dd><p>null</dd>

     <dt><a href="#style-sheet-owner-node">style sheet owner node</a></dt>
     <dd><p>The node.</dd>

     <dt><a href="#style-sheet-owner-css-rule">style sheet owner CSS rule</a></dt>
     <dd><p>null</dd>

     <dt><a href="#style-sheet-media">style sheet media</a></dt>
     <dd><p>The value of the <code title="">media</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
     if any, or the empty string otherwise.</dd>

     <dt><a href="#style-sheet-title">style sheet title</a></dt>
     <dd><p><var title="">title</var></dd>

     <dt><a href="#style-sheet-alternate-flag">style sheet alternate flag</a></dt>
     <dd><p>True if the <code title="">alternate</code> <a class="external" href="http://www.w3.org/TR/xml-stylesheet/#dt-pseudo-attribute">pseudo-attribute</a>
     value is a <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#case-sensitive">case-sensitive</a> match for
     "<code>yes</code>", and false otherwise.</dd>
    </dl>
   </li>
  </ol>


  <h4 id="requirements-on-user-agents-implementing-the-http-link-header"><span class="secno">6.3.4 </span>Requirements on User Agents Implementing the HTTP
  <code title="">Link</code> Header</h4>

  <!-- XXX ref, one day -->

  <!-- XXX deal with media param -->

  <p>For each HTTP <code title="http-link">Link</code> header of which one
  of the link relation types is an
  <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match
  for "<code title="">stylesheet</code>" these steps
  must be run:</p>

  <ol>
   <li><p>Let <var title="">title</var> be the value of the first of all the
   <code title="">title</code> and <code title="">title*</code> parameters.
   If there are no such parameters it is the empty string.</li>

   <li><p>If one of the (other) link relation types is an
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
   "<code title="">alternate</code>" and <var title="">title</var> is the
   empty string terminate these steps.</li>

   <li><p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#resolve-a-url" title="Resolve a URL">Resolve</a>
   the specified <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#url">URL</a> and
   <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#fetch">fetch</a> it.</li>

   <li><p>When the resource is available, the document is in
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-quirks-mode" title="concept-quirks-mode">quirks mode</a>
   and the <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#content-type">Content-Type metadata</a> of
   the resource is not a <a href="#supported-styling-language">supported styling language</a> change the
   <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#content-type">Content-Type metadata</a> of the resource
   to <code title="">text/css</code>.</li>

   <li><p>If the resource is not in a
   <a href="#supported-styling-language">supported styling language</a> terminate these steps.</li>

   <li>
    <p><a href="#create-a-style-sheet">Create a style sheet</a> with the following properties:</p>

    <dl>
     <dt><a href="#style-sheet-location">style sheet location</a></dt>
     <dd><p>The <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#absolute-url">absolute URL</a> of the
     resource.</dd>

     <dt><a href="#style-sheet-owner-node">style sheet owner node</a></dt>
     <dd><p>null</dd>

     <dt><a href="#style-sheet-parent">style sheet parent</a></dt>
     <dd><p>null</dd>

     <dt><a href="#style-sheet-owner-node">style sheet owner node</a></dt>
     <dd><p>null</dd>

     <dt><a href="#style-sheet-owner-css-rule">style sheet owner CSS rule</a></dt>
     <dd><p>null</dd>

     <dt><a href="#style-sheet-media">style sheet media</a></dt>
     <dd><p>The value of the first <code title="">media</code> parameter.</dd>
     <!-- XXX register media parameter? bah -->

     <dt><a href="#style-sheet-title">style sheet title</a></dt>
     <dd><p><var title="">title</var></dd>

     <dt><a href="#style-sheet-alternate-flag">style sheet alternate flag</a></dt>
     <dd><p>True if one of the specified link relation type for this HTTP
     <code title="http-link">Link</code> header is an
     <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
     "<code title="">alternate</code>". Otherwise, false.</dd>
    </dl>
   </li>
  </ol>


  <h3 id="css-rules"><span class="secno">6.4 </span>CSS Rules</h3>

  <p>To <dfn id="parse-a-css-rule">parse a CSS rule</dfn> ...</p>

  <p>To <dfn id="serialize-a-css-rule">serialize a CSS rule</dfn> depends on the type of CSS rule, as
  follows:</p>

  <dl class="switch">
   <dt><code><a href="#cssstylerule">CSSStyleRule</a></code></dt>
   <dd class="XXX">...</dd>

   <dt><code><a href="#cssimportrule">CSSImportRule</a></code></dt>
   <dd>
    <p>The result of concatenating these strings:</p>
    <ol>
     <li>The literal string "<code>@import</code>", followed by a space
     (U+0020), followed by the <a href="#serialize-a-url" title="serialize a URL">URL escaped</a>
     value of the <code title="dom-CSSImportRule-href"><a href="#dom-cssimportrule-href">href</a></code>
     attribute.</li>
     <li>If the associated <code><a href="#medialist">MediaList</a></code> object is not empty, a
     space (U+0020), followed by the value of the
     <code title="dom-MediaList-mediaText"><a href="#dom-medialist-mediatext">mediaText</a></code> attribute of the
     associated <code><a href="#medialist">MediaList</a></code> object.</li>
     <li>A "<code>;</code>" (U+003B).</li>
    </ol>
   </dd>

   <dt><code><a href="#cssmediarule">CSSMediaRule</a></code></dt>
   <dd class="XXX">...</dd>

   <dt><code><a href="#cssfontfacerule">CSSFontFaceRule</a></code></dt>
   <dd class="XXX">...</dd>

   <dt><code><a href="#csspagerule">CSSPageRule</a></code></dt>
   <dd class="XXX">...</dd>

   <dt><code><a href="#cssnamespacerule">CSSNamespaceRule</a></code></dt>
   <dd><p>The literal string "<code>@namespace</code>", followed by a space
   (U+0020), followed by the
   <a href="#serialize-an-identifier" title="serialize an identifier">identifier escaped</a> value of the
   <code title="dom-CSSNamespaceRule-prefix"><a href="#dom-cssnamespacerule-prefix">prefix</a></code> attribute (if
   any), followed by a space (U+0020) if there is a prefix, followed by the
   <a href="#serialize-a-url" title="serialize a URL">URL escaped</a> value of the
   <code title="dom-CSSNamespaceRule-namespaceURI"><a href="#dom-cssnamespacerule-namespaceuri">namespaceURI</a></code>
   attribute, followed the character "<code>;</code>" (U+003B).</dd>
  </dl>

  <p>To <dfn id="insert-a-css-rule">insert a CSS rule</dfn> <var title="">rule</var> into a
  CSS rule list <var title="">list</var> at location
  <var title="">index</var> follow these steps:</p>

  <ol>
   <li><p>If <var title="">index</var> is negative or greater than the
   length of the <var title="">list</var> raise an
   <code>INDEX_SIZE_ERR</code> exception and terminate these steps.</li>

   <li><p><a href="#parse-a-css-rule" title="Parse a CSS rule">Parse</a>
   <var title="">rule</var>.</li>

   <li><p>If parsing failed terminate these steps.</li>

   <li><p>If the new object can not be inserted within the
   <var title="">list</var> at the given <var title="">index</var> due to
   limitations of the CSS specification raise a
   <code>HIERARCHY_REQUEST_ERR</code> exception and terminate these
   steps.</li>

   <li><p>Insert the new object at the given <var title="">index</var>
   within the <var title="">list</var>.</li>
  </ol>

  <p>To <dfn id="remove-a-css-rule">remove a CSS rule</dfn> from CSS rule list
  <var title="">list</var> at location <var title="">index</var> follow
  these steps:</p>

  <ol>
   <li><p>If <var title="">index</var> is negative or greater than the
   length of the <var title="">list</var> raise an
   <code>INDEX_SIZE_ERR</code> exception and terminate these steps.</li>

   <li><p>Remove the object at <var title="">index</var> from
   <var title="">list</var>.</li>
  </ol>


  <h4 id="the-cssrulelist-sequence"><span class="secno">6.4.1 </span>The <code title="">CSSRuleList</code> Sequence</h4>

  <p>The <code><a href="#cssrulelist">CSSRuleList</a></code> object represents an ordered collection of
  CSS rules.</p>

  <pre class="idl">typedef sequence&lt;<a href="#cssrule">CSSRule</a>&gt; <dfn id="cssrulelist">CSSRuleList</dfn>;</pre>


  <h4 id="the-cssrule-interface"><span class="secno">6.4.2 </span>The <code title="">CSSRule</code> Interface</h4>

  <p>The <code><a href="#cssrule">CSSRule</a></code> interface is a base interface. Each unique
  CSS rule has its own interface which inherits from this one.</p>

  <!-- http://wiki.csswg.org/spec/cssom-constants -->

  <pre class="idl">interface <dfn id="cssrule">CSSRule</dfn> {
  // Types
  const unsigned short <a href="#dom-cssrule-style_rule" title="dom-CSSRule-STYLE_RULE">STYLE_RULE</a> = 1;
  const unsigned short <a href="#dom-cssrule-import_rule" title="dom-CSSRule-IMPORT_RULE">IMPORT_RULE</a> = 3;
  const unsigned short <a href="#dom-cssrule-media_rule" title="dom-CSSRule-MEDIA_RULE">MEDIA_RULE</a> = 4;
  const unsigned short <a href="#dom-cssrule-font_face_rule" title="dom-CSSRule-FONT_FACE_RULE">FONT_FACE_RULE</a> = 5;
  const unsigned short <a href="#dom-cssrule-page_rule" title="dom-CSSRule-PAGE_RULE">PAGE_RULE</a> = 6;
  const unsigned short <a href="#dom-cssrule-namespace_rule" title="dom-CSSRule-NAMESPACE_RULE">NAMESPACE_RULE</a> = 10;
  readonly attribute unsigned short <a href="#dom-cssrule-type" title="dom-CSSRule-type">type</a>;

  // Parsing and serialization
           attribute DOMString <a href="#dom-cssrule-csstext" title="dom-CSSRule-cssText">cssText</a>;

  // Context
  readonly attribute <a href="#cssrule">CSSRule</a> <a href="#dom-cssrule-parentrule" title="dom-CSSRule-parentRule">parentRule</a>;
  readonly attribute <a href="#cssstylesheet">CSSStyleSheet</a> <a href="#dom-cssrule-parentstylesheet" title="dom-CSSRule-parentStyleSheet">parentStyleSheet</a>;
};</pre>


  <p>The
  <dfn id="dom-cssrule-type" title="dom-CSSRule-type"><code>type</code></dfn>
  attribute must return the <span>CSS rule</span> type,
  as follows:</p>

  <dl class="switch">
   <dt><dfn id="dom-cssrule-style_rule" title="dom-CSSRule-STYLE_RULE"><code>STYLE_RULE</code></dfn> (numeric value 1)</dt>
   <dd>The object is a <code><a href="#cssstylerule">CSSStyleRule</a></code>.</dd>
   <dt><dfn id="dom-cssrule-import_rule" title="dom-CSSRule-IMPORT_RULE"><code>IMPORT_RULE</code></dfn> (numeric value 3)</dt>
   <dd>The object is a <code><a href="#cssimportrule">CSSImportRule</a></code>.</dd>
   <dt><dfn id="dom-cssrule-media_rule" title="dom-CSSRule-MEDIA_RULE"><code>MEDIA_RULE</code></dfn> (numeric value 4)</dt>
   <dd>The object is a <code><a href="#cssmediarule">CSSMediaRule</a></code>.</dd>
   <dt><dfn id="dom-cssrule-font_face_rule" title="dom-CSSRule-FONT_FACE_RULE"><code>FONT_FACE_RULE</code></dfn> (numeric value 5)</dt>
   <dd>The object is a <code><a href="#cssfontfacerule">CSSFontFaceRule</a></code>.</dd>
   <dt><dfn id="dom-cssrule-page_rule" title="dom-CSSRule-PAGE_RULE"><code>PAGE_RULE</code></dfn> (numeric value 6)</dt>
   <dd>The object is a <code><a href="#csspagerule">CSSPageRule</a></code>.</dd>
   <dt><dfn id="dom-cssrule-namespace_rule" title="dom-CSSRule-NAMESPACE_RULE"><code>NAMESPACE_RULE</code></dfn> (numeric value 10)</dt>
   <dd>The object is a <code><a href="#cssnamespacerule">CSSNamespaceRule</a></code>.</dd>
  </dl>

  <p class="note">Constants with values 0 and 2 have been obsoleted by this
  specification. They might be re-allocated in the future. 7 is reserved for
  <code>@color-profile</code>. 8 and 9 are reserved for CSS animation.</p>


  <p>The
  <dfn id="dom-cssrule-csstext" title="dom-CSSRule-cssText"><code>cssText</code></dfn>
  attribute, on getting, must return a
  <a href="#serialize-a-css-rule" title="serialize a CSS rule">serialization</a> of the
  <span>CSS rule</span>.</p>

  <p>On setting the <code title="dom-CSSRule-cssText"><a href="#dom-cssrule-csstext">cssText</a></code>
  attribute these steps must be run:</p>

  <ol>
   <li><p><a href="#parse-a-css-rule" title="Parse a CSS rule">Parse</a> the value.</li>

   <li><p>If parsing failed terminate this algorithm.</li>

   <li><p>If the <code title="dom-CSSRule-type"><a href="#dom-cssrule-type">type</a></code> of the new
   object does not match the <code title="dom-CSSRule-type"><a href="#dom-cssrule-type">type</a></code> of
   the current object raise an <code>INVALID_MODIFICATION_ERR</code>
   exception.</li>

   <li><p>Replace the current object with the new object.</li>
  </ol>


  <p>The
  <dfn id="dom-cssrule-parentrule" title="dom-CSSRule-parentRule"><code>parentRule</code></dfn>
  attribute must return the nearest enclosing rule of the
  current rule or null, if there is no enclosing rule.</p>

  <p class="note">E.g. <code title="">@media</code> can enclose a rule.</p>

  <p>The
  <dfn id="dom-cssrule-parentstylesheet" title="dom-CSSRule-parentStyleSheet"><code>parentStyleSheet</code></dfn>
  attribute must return the <code><a href="#cssstylesheet">CSSStyleSheet</a></code>
  object that contains the the current rule.</p>


  <h5 id="extensibility"><span class="secno">6.4.2.1 </span>Extensibility</h5>

  <p>The constant values 0-1000 are reserved for future use by the CSS WG.</p>

  <p>Vendors are encouraged to use reasonably unique values outside this range
  so that they do not clash with extensions from other vendors. For example, the
  first value for Mozilla could be <code>0x0<strong>8EC0</strong>001</code> and
  <code>0x<strong>09E8A</strong>001</code> could be the first for Opera.</p>

  <p>Vendors are encouraged to prefix the new interface names with a vendor
  specific prefix. For example, "Example company" could have an interface called
  "ExampleCSSTestRule".</p>

  <p>In general, vendors are encouraged to discuss extensions on a public forum,
  such as <code>www-style@w3.org</code>.</p>


  <h4 id="css-style-rule-rule-set"><span class="secno">6.4.3 </span>CSS Style Rule (Rule Set)</h4>

  <p>The <code><a href="#cssstylerule">CSSStyleRule</a></code> object represents a rule set.</p>
  <!-- XXX ref -->

  <pre class="idl">interface <dfn id="cssstylerule">CSSStyleRule</dfn> : <a href="#cssrule">CSSRule</a> {
           attribute DOMString <a href="#dom-cssstylerule-selectortext" title="dom-CSSStyleRule-selectorText">selectorText</a>;
  readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-cssstylerule-style" title="dom-CSSStyleRule-style">style</a>;
};</pre>

  <p>The
  <dfn id="dom-cssstylerule-selectortext" title="dom-CSSStyleRule-selectorText"><code>selectorText</code></dfn>
  attribute, on getting, must return the result of
  <a href="#serialize-a-group-of-selectors" title="serialize a group of selectors">serializing</a> the
  associated <span>group of selectors</span>.</p>

  <p>On setting the
  <code title="dom-CSSStyleRule-selectorText"><a href="#dom-cssstylerule-selectortext">selectorText</a></code> attribute
  these steps must be run:</p>

  <ol>
   <li><p>Run the <a href="#parse-a-group-of-selectors">parse a group of selectors</a> algorithm on the
   given value.</li>

   <li><p>If the algorithm returns a non-null value replace the associated
   <span>group of selectors</span> with the returned value.</li>

   <li><p>Otherwise, if the algorithm returns a null value, do
   nothing.</li>
  </ol>

  <p>The
  <dfn id="dom-cssstylerule-style" title="dom-CSSStyleRule-style"><code>style</code></dfn>
  attribute must return a
  <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object for the rule set.</p>


  <h4 id="css-import-rule"><span class="secno">6.4.4 </span>CSS <code title="">@import</code> Rule</h4>

  <p>The <code><a href="#cssimportrule">CSSImportRule</a></code> object represents an
  <code>@import</code> rule.</p>

  <pre class="idl">interface <dfn id="cssimportrule">CSSImportRule</dfn> : <a href="#cssrule">CSSRule</a> {
  readonly attribute DOMString <a href="#dom-cssimportrule-href" title="dom-CSSImportRule-href">href</a>;
  [PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <a href="#dom-cssimportrule-media" title="dom-CSSImportRule-media">media</a>;
  readonly attribute <a href="#cssstylesheet">CSSStyleSheet</a> <a href="#dom-cssimportrule-stylesheet" title="dom-CSSImportRule-styleSheet">styleSheet</a>;
};</pre>

  <p>The
  <dfn id="dom-cssimportrule-href" title="dom-CSSImportRule-href"><code>href</code></dfn>
  attribute must return the <span>URL</span> specified
  by the <code>@import</code> rule.</p>

  <p class="note">To get the resolved <span>URL</span> use the
  <code title="dom-StyleSheet-href"><a href="#dom-stylesheet-href">href</a></code> attribute of the associated
  <a href="#style-sheet">style sheet</a>.</p>

  <p>The
  <dfn id="dom-cssimportrule-media" title="dom-CSSImportRule-media"><code>media</code></dfn>
  attribute must return the value of the
  <code title="dom-StyleSheet-media"><a href="#dom-stylesheet-media">media</a></code> attribute of the
  associated <a href="#style-sheet">style sheet</a>.</p>

  <p>The
  <dfn id="dom-cssimportrule-stylesheet" title="dom-CSSImportRule-stylesheet"><code>styleSheet</code></dfn>
  attribute must return the associated
  <a href="#style-sheet">style sheet</a>.</p>

  <p class="note">If loading of the style sheet fails its
  <code title="dom-CSSStyleSheet-cssRules"><a href="#dom-cssstylesheet-cssrules">cssRules</a></code> list is simply
  empty. I.e. an <code>@import</code> rule always has an associated
  <a href="#style-sheet">style sheet</a>.</p>


  <h4 id="css-media-rule"><span class="secno">6.4.5 </span>CSS <code title="">@media</code> Rule</h4>

  <p>The <code><a href="#cssmediarule">CSSMediaRule</a></code> object represents an
  <code title="">@media</code> rule.</p>

  <pre class="idl">interface <dfn id="cssmediarule">CSSMediaRule</dfn> : <a href="#cssrule">CSSRule</a> {
  [PutForwards=<a href="#dom-medialist-mediatext" title="dom-MediaList-mediaText">mediaText</a>] readonly attribute <a href="#medialist">MediaList</a> <a href="#dom-cssmediarule-media" title="dom-CSSMediaRule-media">media</a>;
  readonly attribute <a href="#cssrulelist">CSSRuleList</a> <a href="#dom-cssmediarule-cssrules" title="dom-CSSMediaRule-cssRules">cssRules</a>;
  unsigned long <a href="#dom-cssmediarule-insertrule" title="dom-CSSMediaRule-insertRule">insertRule</a>(DOMString <var title="">rule</var>, in unsigned long <var title="">index</var>);
  void <a href="#dom-cssmediarule-deleterule" title="dom-CSSMediaRule-deleteRule">deleteRule</a>(unsigned long <var title="">index</var>);
};</pre>

  <p>The
  <dfn id="dom-cssmediarule-media" title="dom-CSSMediaRule-media"><code>media</code></dfn>
  attribute must return a
  <code><a href="#medialist">MediaList</a></code> object for the list of media queries specified
  with the <code title="">@media</code> rule.</p>

  <p>The
  <dfn id="dom-cssmediarule-cssrules" title="dom-CSSMediaRule-cssRules"><code>cssRules</code></dfn>
  attribute must return a
  <code><a href="#cssrulelist">CSSRuleList</a></code> object for the list of CSS rules specified with the
  <code title="">@media</code> rule.</p>

  <p>The
  <dfn id="dom-cssmediarule-insertrule" title="dom-CSSMediaRule-insertRule"><code>insertRule(<var title="">rule</var>,
  <var title="">index</var>)</code></dfn> method must
  <a href="#insert-a-css-rule">insert a CSS rule</a> <var title="">rule</var> into the
  CSS rule list returned by
  <code title="dom-CSSMediaRule-cssRules"><a href="#dom-cssmediarule-cssrules">cssRules</a></code> at
  <var title="">index</var>.</p>

  <p>The
  <dfn id="dom-cssmediarule-deleterule" title="dom-CSSMediaRule-deleteRule"><code>deleteRule(<var title="">index</var>)</code></dfn>
  method must <a href="#remove-a-css-rule">remove a CSS rule</a> from the
  CSS rule list returned by
  <code title="dom-CSSMediaRule-cssRules"><a href="#dom-cssmediarule-cssrules">cssRules</a></code> at
  <var title="">index</var>.</p>


  <h4 id="css-font-face-rule"><span class="secno">6.4.6 </span>CSS <code title="">@font-face</code> Rule</h4>

  <p>The <code><a href="#cssfontfacerule">CSSFontFaceRule</a></code> object represents an
  <code>@font-face</code> rule.</p>

  <pre class="idl">interface <dfn id="cssfontfacerule">CSSFontFaceRule</dfn> : <a href="#cssrule">CSSRule</a> {
  readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-cssfontfacerule-style" title="dom-CSSFontFaceRule-style">style</a>;
};</pre>

  <p>The
  <dfn id="dom-cssfontfacerule-style" title="dom-CSSFontFaceRule-style"><code>style</code></dfn>
  attribute must return a <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code>
  block that contains the property declarations specified within the
  <code>@font-face</code> rule.</p>


  <h4 id="css-page-rule"><span class="secno">6.4.7 </span>CSS <code title="">@page</code> Rule</h4>

  <p class="XXX">Need to define the rules for
  <dfn id="parse-a-css-page-selector">parse a CSS page selector</dfn> and
  <dfn id="serialize-a-css-page-selector">serialize a CSS page selector</dfn>.</p>

  <p>The <code><a href="#csspagerule">CSSPageRule</a></code> object represents an <code>@page</code>
  rule.</p>

  <pre class="idl">interface <dfn id="csspagerule">CSSPageRule</dfn> : <a href="#cssrule">CSSRule</a> {
           attribute DOMString <a href="#dom-csspagerule-selectortext" title="dom-CSSPageRule-selectorText">selectorText</a>;
  readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-csspagerule-style" title="dom-CSSPageRule-style">style</a>;
};</pre>

  <p>The
  <dfn id="dom-csspagerule-selectortext" title="dom-CSSPageRule-selectorText"><code>selectorText</code></dfn>
  attribute, on getting, must return the result of
  <a href="#serialize-a-css-page-selector" title="serialize a CSS page selector">serializing</a> the
  associated <span>CSS page selector</span>.</p>

  <p>On setting the
  <code title="dom-CSSPageRule-selectorText"><a href="#dom-csspagerule-selectortext">selectorText</a></code> attribute
  these steps must be run:</p>

  <ol>
   <li><p>Run the <a href="#parse-a-css-page-selector">parse a CSS page selector</a> algorithm on the
   given value.</li>

   <li><p>If the algorithm returns a non-null value replace the associated
   <span>CSS page selector</span> with the returned value.</li>

   <li><p>Otherwise, if the algorithm returns a null value, do
   nothing.</li>
  </ol>

  <p>The
  <dfn id="dom-csspagerule-style" title="dom-CSSPageRule-style"><code>style</code></dfn>
  attribute must return a
  <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> for the <code>@page</code> rule.</p>


  <h4 id="css-namespace-rule"><span class="secno">6.4.8 </span>CSS <code title="">@namespace</code> Rule</h4>

  <p>The <code><a href="#cssnamespacerule">CSSNamespaceRule</a></code> object represents an
  <code>@namespace</code> rule.</p>

  <pre class="idl">interface <dfn id="cssnamespacerule">CSSNamespaceRule</dfn> : <a href="#cssrule">CSSRule</a> {
  readonly attribute DOMString <a href="#dom-cssnamespacerule-namespaceuri" title="dom-CSSNamespaceRule-namespaceURI">namespaceURI</a>;
  readonly attribute DOMString? <a href="#dom-cssnamespacerule-prefix" title="dom-CSSNamespaceRule-prefix">prefix</a>;
};</pre>

  <p>The
  <dfn id="dom-cssnamespacerule-namespaceuri" title="dom-CSSNamespaceRule-namespaceURI"><code>namespaceURI</code></dfn>
  attribute must return the namespace of
  the <code>@namespace</code> rule.</p>

  <p>The
  <dfn id="dom-cssnamespacerule-prefix" title="dom-CSSNamespaceRule-prefix"><code>prefix</code></dfn>
  attribute must return the prefix of the
  <code>@namespace</code> rule or the empty string if there is no prefix.</p>


  <h3 id="css-declaration-blocks"><span class="secno">6.5 </span>CSS Declaration Blocks</h3>

  <p>A <dfn id="css-declaration-block">CSS declaration block</dfn> is an ordered collection of CSS
  properties with their associated values, also named CSS declarations. In
  the DOM a <a href="#css-declaration-block">CSS declaration block</a> is a
  <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> object. A
  <a href="#css-declaration-block">CSS declaration block</a> has two associated properties:</p>

  <dl>
   <dt><dfn id="css-declaration-block-readonly-flag">CSS declaration block readonly flag</dfn></dt>
   <dd><p>False if the object can be manipulated. True if it can not be
   manipulated. If not explicitly set its value is false.</dd>

   <dt><dfn id="css-declaration-block-declarations">CSS declaration block declarations</dfn></dt>
   <dd><p>The CSS declarations associated with the object.</dd>
  </dl>

  <p class="note">The <a href="#css-declaration-block-declarations">CSS declaration block declarations</a> are
  ordered. This matters for the
  <code title="dom-CSSStyleDeclaration-item"><a href="#dom-cssstyledeclaration-item">item()</a></code> method.</p>


  <p class="XXX">To
  <dfn id="parse-a-css-declaration-block">parse a CSS declaration block</dfn>
  ...</p>

  <p class="XXX">To
  <dfn id="serialize-a-css-declaration-block">serialize a CSS declaration block</dfn>
  ...</p>


  <h4 id="the-cssstyledeclaration-interface"><span class="secno">6.5.1 </span>The <code title="">CSSStyleDeclaration</code> Interface</h4>

  <!-- XXX review nullable DOMString more carefully (DOMString?) -->

  <pre class="idl">interface <dfn id="cssstyledeclaration">CSSStyleDeclaration</dfn> {
           attribute DOMString <a href="#dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText">cssText</a>;

  readonly attribute unsigned long <a href="#dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length">length</a>;
  DOMString <a href="#dom-cssstyledeclaration-item" title="dom-CSSStyleDeclaration-item">item</a>(unsigned long <var title="">index</var>);

  DOMString <a href="#dom-cssstyledeclaration-getpropertyvalue" title="dom-CSSStyleDeclaration-getPropertyValue">getPropertyValue</a>(DOMString <var title="">property</var>);
  DOMString <a href="#dom-cssstyledeclaration-getpropertypriority" title="dom-CSSStyleDeclaration-getPropertyPriority">getPropertyPriority</a>(DOMString <var title="">property</var>);
  void <a href="#dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty">setProperty</a>(DOMString? <var title="">property</var>, DOMString? <var title="">value</var>);
  void <a href="#dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty">setProperty</a>(DOMString? <var title="">property</var>, DOMString? <var title="">value</var>, DOMString? <var title="">priority</var>);
  DOMString <a href="#dom-cssstyledeclaration-removeproperty" title="dom-CSSStyleDeclaration-removeProperty">removeProperty</a>(DOMString <var title="">property</var>);

  readonly attribute <a href="#cssstyledeclarationvalue">CSSStyleDeclarationValue</a> <a href="#dom-cssstyledeclaration-values" title="dom-CSSStyleDeclaration-values">values</a>;

  readonly attribute <a href="#cssrule">CSSRule</a> <a href="#dom-cssstyledeclaration-parentrule" title="dom-CSSStyleDeclaration-parentRule">parentRule</a>;

  // CSS Properties
           attribute DOMString? <a href="#dom-cssstyledeclaration-azimuth" title="dom-CSSStyleDeclaration-azimuth">azimuth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-background" title="dom-CSSStyleDeclaration-background">background</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-backgroundattachment" title="dom-CSSStyleDeclaration-backgroundAttachment">backgroundAttachment</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-backgroundcolor" title="dom-CSSStyleDeclaration-backgroundColor">backgroundColor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-backgroundimage" title="dom-CSSStyleDeclaration-backgroundImage">backgroundImage</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-backgroundposition" title="dom-CSSStyleDeclaration-backgroundPosition">backgroundPosition</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-backgroundrepeat" title="dom-CSSStyleDeclaration-backgroundRepeat">backgroundRepeat</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-border" title="dom-CSSStyleDeclaration-border">border</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-bordercollapse" title="dom-CSSStyleDeclaration-borderCollapse">borderCollapse</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-bordercolor" title="dom-CSSStyleDeclaration-borderColor">borderColor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderspacing" title="dom-CSSStyleDeclaration-borderSpacing">borderSpacing</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderstyle" title="dom-CSSStyleDeclaration-borderStyle">borderStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-bordertop" title="dom-CSSStyleDeclaration-borderTop">borderTop</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderright" title="dom-CSSStyleDeclaration-borderRight">borderRight</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderbottom" title="dom-CSSStyleDeclaration-borderBottom">borderBottom</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderleft" title="dom-CSSStyleDeclaration-borderLeft">borderLeft</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-bordertopcolor" title="dom-CSSStyleDeclaration-borderTopColor">borderTopColor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderrightcolor" title="dom-CSSStyleDeclaration-borderRightColor">borderRightColor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderbottomcolor" title="dom-CSSStyleDeclaration-borderBottomColor">borderBottomColor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderleftcolor" title="dom-CSSStyleDeclaration-borderLeftColor">borderLeftColor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-bordertopstyle" title="dom-CSSStyleDeclaration-borderTopStyle">borderTopStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderrightstyle" title="dom-CSSStyleDeclaration-borderRightStyle">borderRightStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderbottomstyle" title="dom-CSSStyleDeclaration-borderBottomStyle">borderBottomStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderleftstyle" title="dom-CSSStyleDeclaration-borderLeftStyle">borderLeftStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-bordertopwidth" title="dom-CSSStyleDeclaration-borderTopWidth">borderTopWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderrightwidth" title="dom-CSSStyleDeclaration-borderRightWidth">borderRightWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderbottomwidth" title="dom-CSSStyleDeclaration-borderBottomWidth">borderBottomWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderleftwidth" title="dom-CSSStyleDeclaration-borderLeftWidth">borderLeftWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-borderwidth" title="dom-CSSStyleDeclaration-borderWidth">borderWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-bottom" title="dom-CSSStyleDeclaration-bottom">bottom</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-captionside" title="dom-CSSStyleDeclaration-captionSide">captionSide</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-clear" title="dom-CSSStyleDeclaration-clear">clear</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-clip" title="dom-CSSStyleDeclaration-clip">clip</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-color" title="dom-CSSStyleDeclaration-color">color</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-content" title="dom-CSSStyleDeclaration-content">content</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-counterincrement" title="dom-CSSStyleDeclaration-counterIncrement">counterIncrement</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-counterreset" title="dom-CSSStyleDeclaration-counterReset">counterReset</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-cue" title="dom-CSSStyleDeclaration-cue">cue</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-cueafter" title="dom-CSSStyleDeclaration-cueAfter">cueAfter</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-cuebefore" title="dom-CSSStyleDeclaration-cueBefore">cueBefore</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-cursor" title="dom-CSSStyleDeclaration-cursor">cursor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-direction" title="dom-CSSStyleDeclaration-direction">direction</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-display" title="dom-CSSStyleDeclaration-display">display</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-elevation" title="dom-CSSStyleDeclaration-elevation">elevation</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-emptycells" title="dom-CSSStyleDeclaration-emptyCells">emptyCells</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-cssfloat" title="dom-CSSStyleDeclaration-cssFloat">cssFloat</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-font" title="dom-CSSStyleDeclaration-font">font</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-fontfamily" title="dom-CSSStyleDeclaration-fontFamily">fontFamily</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-fontsize" title="dom-CSSStyleDeclaration-fontSize">fontSize</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-fontsizeadjust" title="dom-CSSStyleDeclaration-fontSizeAdjust">fontSizeAdjust</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-fontstretch" title="dom-CSSStyleDeclaration-fontStretch">fontStretch</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-fontstyle" title="dom-CSSStyleDeclaration-fontStyle">fontStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-fontvariant" title="dom-CSSStyleDeclaration-fontVariant">fontVariant</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-fontweight" title="dom-CSSStyleDeclaration-fontWeight">fontWeight</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-height" title="dom-CSSStyleDeclaration-height">height</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-left" title="dom-CSSStyleDeclaration-left">left</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-letterspacing" title="dom-CSSStyleDeclaration-letterSpacing">letterSpacing</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-lineheight" title="dom-CSSStyleDeclaration-lineHeight">lineHeight</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-liststyle" title="dom-CSSStyleDeclaration-listStyle">listStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-liststyleimage" title="dom-CSSStyleDeclaration-listStyleImage">listStyleImage</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-liststyleposition" title="dom-CSSStyleDeclaration-listStylePosition">listStylePosition</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-liststyletype" title="dom-CSSStyleDeclaration-listStyleType">listStyleType</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-margin" title="dom-CSSStyleDeclaration-margin">margin</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-margintop" title="dom-CSSStyleDeclaration-marginTop">marginTop</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-marginright" title="dom-CSSStyleDeclaration-marginRight">marginRight</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-marginbottom" title="dom-CSSStyleDeclaration-marginBottom">marginBottom</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-marginleft" title="dom-CSSStyleDeclaration-marginLeft">marginLeft</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-markeroffset" title="dom-CSSStyleDeclaration-markerOffset">markerOffset</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-marks" title="dom-CSSStyleDeclaration-marks">marks</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-maxheight" title="dom-CSSStyleDeclaration-maxHeight">maxHeight</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-maxwidth" title="dom-CSSStyleDeclaration-maxWidth">maxWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-minheight" title="dom-CSSStyleDeclaration-minHeight">minHeight</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-minwidth" title="dom-CSSStyleDeclaration-minWidth">minWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-orphans" title="dom-CSSStyleDeclaration-orphans">orphans</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-outline" title="dom-CSSStyleDeclaration-outline">outline</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-outlinecolor" title="dom-CSSStyleDeclaration-outlineColor">outlineColor</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-outlinestyle" title="dom-CSSStyleDeclaration-outlineStyle">outlineStyle</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-outlinewidth" title="dom-CSSStyleDeclaration-outlineWidth">outlineWidth</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-overflow" title="dom-CSSStyleDeclaration-overflow">overflow</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-padding" title="dom-CSSStyleDeclaration-padding">padding</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-paddingtop" title="dom-CSSStyleDeclaration-paddingTop">paddingTop</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-paddingright" title="dom-CSSStyleDeclaration-paddingRight">paddingRight</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-paddingbottom" title="dom-CSSStyleDeclaration-paddingBottom">paddingBottom</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-paddingleft" title="dom-CSSStyleDeclaration-paddingLeft">paddingLeft</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-page" title="dom-CSSStyleDeclaration-page">page</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pagebreakafter" title="dom-CSSStyleDeclaration-pageBreakAfter">pageBreakAfter</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pagebreakbefore" title="dom-CSSStyleDeclaration-pageBreakBefore">pageBreakBefore</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pagebreakinside" title="dom-CSSStyleDeclaration-pageBreakInside">pageBreakInside</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pause" title="dom-CSSStyleDeclaration-pause">pause</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pauseafter" title="dom-CSSStyleDeclaration-pauseAfter">pauseAfter</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pausebefore" title="dom-CSSStyleDeclaration-pauseBefore">pauseBefore</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pitch" title="dom-CSSStyleDeclaration-pitch">pitch</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-pitchrange" title="dom-CSSStyleDeclaration-pitchRange">pitchRange</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-playduring" title="dom-CSSStyleDeclaration-playDuring">playDuring</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-position" title="dom-CSSStyleDeclaration-position">position</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-quotes" title="dom-CSSStyleDeclaration-quotes">quotes</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-richness" title="dom-CSSStyleDeclaration-richness">richness</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-right" title="dom-CSSStyleDeclaration-right">right</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-size" title="dom-CSSStyleDeclaration-size">size</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-speak" title="dom-CSSStyleDeclaration-speak">speak</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-speakheader" title="dom-CSSStyleDeclaration-speakHeader">speakHeader</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-speaknumeral" title="dom-CSSStyleDeclaration-speakNumeral">speakNumeral</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-speakpunctuation" title="dom-CSSStyleDeclaration-speakPunctuation">speakPunctuation</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-speechrate" title="dom-CSSStyleDeclaration-speechRate">speechRate</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-stress" title="dom-CSSStyleDeclaration-stress">stress</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-tablelayout" title="dom-CSSStyleDeclaration-tableLayout">tableLayout</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-textalign" title="dom-CSSStyleDeclaration-textAlign">textAlign</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-textdecoration" title="dom-CSSStyleDeclaration-textDecoration">textDecoration</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-textindent" title="dom-CSSStyleDeclaration-textIndent">textIndent</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-textshadow" title="dom-CSSStyleDeclaration-textShadow">textShadow</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-texttransform" title="dom-CSSStyleDeclaration-textTransform">textTransform</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-top" title="dom-CSSStyleDeclaration-top">top</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-unicodebidi" title="dom-CSSStyleDeclaration-unicodeBidi">unicodeBidi</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-verticalalign" title="dom-CSSStyleDeclaration-verticalAlign">verticalAlign</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-visibility" title="dom-CSSStyleDeclaration-visibility">visibility</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-voicefamily" title="dom-CSSStyleDeclaration-voiceFamily">voiceFamily</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-volume" title="dom-CSSStyleDeclaration-volume">volume</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-whitespace" title="dom-CSSStyleDeclaration-whiteSpace">whiteSpace</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-widows" title="dom-CSSStyleDeclaration-widows">widows</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-width" title="dom-CSSStyleDeclaration-width">width</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-wordspacing" title="dom-CSSStyleDeclaration-wordSpacing">wordSpacing</a>;
           attribute DOMString? <a href="#dom-cssstyledeclaration-zindex" title="dom-CSSStyleDeclaration-zIndex">zIndex</a>;
};</pre>

  <p>The
  <dfn id="dom-cssstyledeclaration-csstext" title="dom-CSSStyleDeclaration-cssText"><code>cssText</code></dfn>
  attribute must, on getting, return the result of
  <a href="#serialize-a-css-declaration-block" title="serialize a CSS declaration block">serializing</a> the
  <a href="#css-declaration-block-declarations">CSS declaration block declarations</a>.</p>

  <p>On setting the <code title="">cssText</code> attribute these steps
  must be run:</p>

  <ol>
   <li><p>If the <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> is true
   raise a <code>NO_MODIFICATION_ALLOWED_ERR</code> and terminate this
   algorithm.</li>

   <li><p>Empty the
   <a href="#css-declaration-block-declarations">CSS declaration block declarations</a>.</li>

   <li><p><a href="#parse-a-css-declaration-block" title="Parse a CSS declaration block">Parse</a> the given
   value and, if the return value is not null, insert it into the
   <a href="#css-declaration-block-declarations">CSS declaration block declarations</a>.</li>
  </ol>


  <!-- XXX WebIDL work -->
  <p>The
  <dfn id="dom-cssstyledeclaration-length" title="dom-CSSStyleDeclaration-length"><code>length</code></dfn>
  attribute must return the number of declarations in
  the <span>collection of CSS declarations</span>.</p>

  <p>The
  <dfn id="dom-cssstyledeclaration-item" title="dom-CSSStyleDeclaration-item"><code>item(<var title="">index</var>)</code></dfn>
  method, when invoked, <span class="XXX">...</span>.</p>
  <!-- returns the name of property at position index. -->


  <p>The
  <dfn id="dom-cssstyledeclaration-getpropertyvalue" title="dom-CSSStyleDeclaration-getPropertyValue"><code>getPropertyValue(<var title="">property</var>)</code></dfn>
  method, when invoked, <span class="XXX">...</span>.</p>
  <!-- Once we have defined how everything will be canonicalized we can start
  thinking about this... --><p></p>

  <p>The
  <dfn id="dom-cssstyledeclaration-getpropertypriority" title="dom-CSSStyleDeclaration-getPropertyPriority"><code>getPropertyPriority(<var title="">property</var>)</code></dfn>
  method, when invoked, if <var title="">property</var> is an
  <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for a
  property that has a priority user agents must return the canonical
  priority of that property as given in the syntax definition. Otherwise,
  the empty string must be returned.</p>

  <p class="example">E.g. for <code>background-color:lime !IMPORTANT</code>
  the return value would be "<code title="">important</code>".</p>


  <p>When the
  <dfn id="dom-cssstyledeclaration-setproperty" title="dom-CSSStyleDeclaration-setProperty"><code>setProperty(<var title="">property</var>, <var title="">value</var>, <var title="">priority</var>)</code></dfn>
  method is invoked these steps must be run:</p>

  <ol>
   <li><p>If the <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> is true
   raise a <code>NO_MODIFICATION_ALLOWED_ERR</code> and terminate this
   algorithm.</li>

   <li><p>If <var title="">property</var> is not an
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for a
   supported property, terminate this algorithm.</li>

   <li><p>If <var title="">value</var> is null or the empty string invoke
   <code title="dom-CSSStyleDeclaration-removeProperty"><a href="#dom-cssstyledeclaration-removeproperty">removeProperty()</a></code>
   with <var title="">property</var> as argument and terminate this
   algorithm.</li>

   <li><p>If the <var title="">priority</var> argument has been omitted let
   <var title="">priority</var> be the empty string.</li>

   <li><p>If <var title="">priority</var> is neither a valid priority nor
   the empty string terminate this algorithm.</li>
   <!-- define valid priority somehow -->

   <li>
    <p>If <a href="#parse-a-css-value" title="parse a CSS value">parsing the
    <var title="">value</var></a> returns null abort this algorithm.</p>

    <p class="note"><var title="">value</var> can not include
    "<code title="">!important</code>".</p>
   </li>

   <li><p>Finally, set <var title="">property</var> to <var title="">value</var>
   with priority <var title="">priority</var> when <var title="">priority</var>
   is not the empty string. Otherwise set
   <var title="">property</var> to <var title="">value</var>.</li>
  </ol>

  <p>When the
  <dfn id="dom-cssstyledeclaration-removeproperty" title="dom-CSSStyleDeclaration-removeProperty"><code>removeProperty(<var title="">property</var>)</code></dfn>
  method is invoked these steps must be run:</p>

  <ol>
   <li><p>If the <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> is true
   raise a <code>NO_MODIFICATION_ALLOWED_ERR</code> and terminate this
   algorithm.</li>

   <li><p>If <var title="">property</var> is an
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for a
   property of a declaration in the
   <span>collection of CSS declarations</span> remove the declaration.</p>
  </ol>


  <p>The
  <dfn id="dom-cssstyledeclaration-values" title="dom-CSSStyleDeclaration-values"><code>values</code></dfn>
  attribute must return <span class="XXX">...</span></p>


  <p>The
  <dfn id="dom-cssstyledeclaration-parentrule" title="dom-CSSStyleDeclaration-parentRule"><code>parentRule</code></dfn>
  attribute must return the
  <code><a href="#cssrule">CSSrule</a></code> object the <code><a href="#cssstyledeclaration">CSSStyleDeclaration</a></code> is object is
  associated with or null if it is not associated with a
  <code><a href="#cssrule">CSSrule</a></code> object.</p>
  <!-- XXX introduce a concept for this instead -->


  <p>For the table below, the IDL attribute in the first column
  must, on getting return the result of invoking
  <code title="dom-CSSStyleDeclaration-getPropertyValue"><a href="#dom-cssstyledeclaration-getpropertyvalue">getPropertyValue()</a></code>
  with as argument the CSS property given in the second column on the same
  row.</p>

  <p>Similarly for the table below, setting the IDL attribute in the
  first column  must invoke
  <code title="dom-CSSStyleDeclaration-setProperty"><a href="#dom-cssstyledeclaration-setproperty">setProperty()</a></code> with as
  first argument the CSS property given in the second column on the same
  row, as second argument the given value, and no third argument. Any
  exceptions raised must be re-raised.</p>

  <table>
   <thead>
    <tr>
     <th>IDL attribute
     <th>CSS property
   <tbody>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-azimuth" title="dom-CSSStyleDeclaration-azimuth"><code>azimuth</code></dfn></td>
     <td>"<code>azimuth</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-background" title="dom-CSSStyleDeclaration-background"><code>background</code></dfn></td>
     <td>"<code>background</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-backgroundattachment" title="dom-CSSStyleDeclaration-backgroundAttachment"><code>backgroundAttachment</code></dfn></td>
     <td>"<code>background-attachment</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-backgroundcolor" title="dom-CSSStyleDeclaration-backgroundColor"><code>backgroundColor</code></dfn></td>
     <td>"<code>background-color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-backgroundimage" title="dom-CSSStyleDeclaration-backgroundImage"><code>backgroundImage</code></dfn></td>
     <td>"<code>background-image</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-backgroundposition" title="dom-CSSStyleDeclaration-backgroundPosition"><code>backgroundPosition</code></dfn></td>
     <td>"<code>background-position</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-backgroundrepeat" title="dom-CSSStyleDeclaration-backgroundRepeat"><code>backgroundRepeat</code></dfn></td>
     <td>"<code>background-repeat</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-border" title="dom-CSSStyleDeclaration-border"><code>border</code></dfn></td>
     <td>"<code>border</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-bordercollapse" title="dom-CSSStyleDeclaration-borderCollapse"><code>borderCollapse</code></dfn></td>
     <td>"<code>border-collapse</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-bordercolor" title="dom-CSSStyleDeclaration-borderColor"><code>borderColor</code></dfn></td>
     <td>"<code>border-color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderspacing" title="dom-CSSStyleDeclaration-borderSpacing"><code>borderSpacing</code></dfn></td>
     <td>"<code>border-spacing</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderstyle" title="dom-CSSStyleDeclaration-borderStyle"><code>borderStyle</code></dfn></td>
     <td>"<code>border-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-bordertop" title="dom-CSSStyleDeclaration-borderTop"><code>borderTop</code></dfn></td>
     <td>"<code>border-top</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderright" title="dom-CSSStyleDeclaration-borderRight"><code>borderRight</code></dfn></td>
     <td>"<code>border-right</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderbottom" title="dom-CSSStyleDeclaration-borderBottom"><code>borderBottom</code></dfn></td>
     <td>"<code>border-bottom</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderleft" title="dom-CSSStyleDeclaration-borderLeft"><code>borderLeft</code></dfn></td>
     <td>"<code>border-left</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-bordertopcolor" title="dom-CSSStyleDeclaration-borderTopColor"><code>borderTopColor</code></dfn></td>
     <td>"<code>border-top-color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderrightcolor" title="dom-CSSStyleDeclaration-borderRightColor"><code>borderRightColor</code></dfn></td>
     <td>"<code>border-right-color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderbottomcolor" title="dom-CSSStyleDeclaration-borderBottomColor"><code>borderBottomColor</code></dfn></td>
     <td>"<code>border-bottom-color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderleftcolor" title="dom-CSSStyleDeclaration-borderLeftColor"><code>borderLeftColor</code></dfn></td>
     <td>"<code>border-left-color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-bordertopstyle" title="dom-CSSStyleDeclaration-borderTopStyle"><code>borderTopStyle</code></dfn></td>
     <td>"<code>border-top-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderrightstyle" title="dom-CSSStyleDeclaration-borderRightStyle"><code>borderRightStyle</code></dfn></td>
     <td>"<code>border-right-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderbottomstyle" title="dom-CSSStyleDeclaration-borderBottomStyle"><code>borderBottomStyle</code></dfn></td>
     <td>"<code>border-bottom-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderleftstyle" title="dom-CSSStyleDeclaration-borderLeftStyle"><code>borderLeftStyle</code></dfn></td>
     <td>"<code>border-left-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-bordertopwidth" title="dom-CSSStyleDeclaration-borderTopWidth"><code>borderTopWidth</code></dfn></td>
     <td>"<code>border-top-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderrightwidth" title="dom-CSSStyleDeclaration-borderRightWidth"><code>borderRightWidth</code></dfn></td>
     <td>"<code>border-right-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderbottomwidth" title="dom-CSSStyleDeclaration-borderBottomWidth"><code>borderBottomWidth</code></dfn></td>
     <td>"<code>border-bottom-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderleftwidth" title="dom-CSSStyleDeclaration-borderLeftWidth"><code>borderLeftWidth</code></dfn></td>
     <td>"<code>border-left-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-borderwidth" title="dom-CSSStyleDeclaration-borderWidth"><code>borderWidth</code></dfn></td>
     <td>"<code>border-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-bottom" title="dom-CSSStyleDeclaration-bottom"><code>bottom</code></dfn></td>
     <td>"<code>bottom</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-captionside" title="dom-CSSStyleDeclaration-captionSide"><code>captionSide</code></dfn></td>
     <td>"<code>caption-side</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-clear" title="dom-CSSStyleDeclaration-clear"><code>clear</code></dfn></td>
     <td>"<code>clear</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-clip" title="dom-CSSStyleDeclaration-clip"><code>clip</code></dfn></td>
     <td>"<code>clip</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-color" title="dom-CSSStyleDeclaration-color"><code>color</code></dfn></td>
     <td>"<code>color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-content" title="dom-CSSStyleDeclaration-content"><code>content</code></dfn></td>
     <td>"<code>content</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-counterincrement" title="dom-CSSStyleDeclaration-counterIncrement"><code>counterIncrement</code></dfn></td>
     <td>"<code>counter-increment</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-counterreset" title="dom-CSSStyleDeclaration-counterReset"><code>counterReset</code></dfn></td>
     <td>"<code>counter-reset</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-cue" title="dom-CSSStyleDeclaration-cue"><code>cue</code></dfn></td>
     <td>"<code>cue</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-cueafter" title="dom-CSSStyleDeclaration-cueAfter"><code>cueAfter</code></dfn></td>
     <td>"<code>cue-after</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-cuebefore" title="dom-CSSStyleDeclaration-cueBefore"><code>cueBefore</code></dfn></td>
     <td>"<code>cue-before</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-cursor" title="dom-CSSStyleDeclaration-cursor"><code>cursor</code></dfn></td>
     <td>"<code>cursor</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-direction" title="dom-CSSStyleDeclaration-direction"><code>direction</code></dfn></td>
     <td>"<code>direction</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-display" title="dom-CSSStyleDeclaration-display"><code>display</code></dfn></td>
     <td>"<code>display</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-elevation" title="dom-CSSStyleDeclaration-elevation"><code>elevation</code></dfn></td>
     <td>"<code>elevation</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-emptycells" title="dom-CSSStyleDeclaration-emptyCells"><code>emptyCells</code></dfn></td>
     <td>"<code>empty-cells</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-cssfloat" title="dom-CSSStyleDeclaration-cssFloat"><code>cssFloat</code></dfn></td>
     <td>"<code>float</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-font" title="dom-CSSStyleDeclaration-font"><code>font</code></dfn></td>
     <td>"<code>font</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-fontfamily" title="dom-CSSStyleDeclaration-fontFamily"><code>fontFamily</code></dfn></td>
     <td>"<code>font-family</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-fontsize" title="dom-CSSStyleDeclaration-fontSize"><code>fontSize</code></dfn></td>
     <td>"<code>font-size</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-fontsizeadjust" title="dom-CSSStyleDeclaration-fontSizeAdjust"><code>fontSizeAdjust</code></dfn></td>
     <td>"<code>font-size-adjust</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-fontstretch" title="dom-CSSStyleDeclaration-fontStretch"><code>fontStretch</code></dfn></td>
     <td>"<code>font-stretch</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-fontstyle" title="dom-CSSStyleDeclaration-fontStyle"><code>fontStyle</code></dfn></td>
     <td>"<code>font-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-fontvariant" title="dom-CSSStyleDeclaration-fontVariant"><code>fontVariant</code></dfn></td>
     <td>"<code>font-variant</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-fontweight" title="dom-CSSStyleDeclaration-fontWeight"><code>fontWeight</code></dfn></td>
     <td>"<code>font-weight</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-height" title="dom-CSSStyleDeclaration-height"><code>height</code></dfn></td>
     <td>"<code>height</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-left" title="dom-CSSStyleDeclaration-left"><code>left</code></dfn></td>
     <td>"<code>left</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-letterspacing" title="dom-CSSStyleDeclaration-letterSpacing"><code>letterSpacing</code></dfn></td>
     <td>"<code>letter-spacing</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-lineheight" title="dom-CSSStyleDeclaration-lineHeight"><code>lineHeight</code></dfn></td>
     <td>"<code>line-height</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-liststyle" title="dom-CSSStyleDeclaration-listStyle"><code>listStyle</code></dfn></td>
     <td>"<code>list-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-liststyleimage" title="dom-CSSStyleDeclaration-listStyleImage"><code>listStyleImage</code></dfn></td>
     <td>"<code>list-style-image</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-liststyleposition" title="dom-CSSStyleDeclaration-listStylePosition"><code>listStylePosition</code></dfn></td>
     <td>"<code>list-style-position</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-liststyletype" title="dom-CSSStyleDeclaration-listStyleType"><code>listStyleType</code></dfn></td>
     <td>"<code>list-style-type</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-margin" title="dom-CSSStyleDeclaration-margin"><code>margin</code></dfn></td>
     <td>"<code>margin</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-margintop" title="dom-CSSStyleDeclaration-marginTop"><code>marginTop</code></dfn></td>
     <td>"<code>margin-top</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-marginright" title="dom-CSSStyleDeclaration-marginRight"><code>marginRight</code></dfn></td>
     <td>"<code>margin-right</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-marginbottom" title="dom-CSSStyleDeclaration-marginBottom"><code>marginBottom</code></dfn></td>
     <td>"<code>margin-bottom</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-marginleft" title="dom-CSSStyleDeclaration-marginLeft"><code>marginLeft</code></dfn></td>
     <td>"<code>margin-left</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-markeroffset" title="dom-CSSStyleDeclaration-markerOffset"><code>markerOffset</code></dfn></td>
     <td>"<code>marker-offset</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-marks" title="dom-CSSStyleDeclaration-marks"><code>marks</code></dfn></td>
     <td>"<code>marks</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-maxheight" title="dom-CSSStyleDeclaration-maxHeight"><code>maxHeight</code></dfn></td>
     <td>"<code>max-height</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-maxwidth" title="dom-CSSStyleDeclaration-maxWidth"><code>maxWidth</code></dfn></td>
     <td>"<code>max-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-minheight" title="dom-CSSStyleDeclaration-minHeight"><code>minHeight</code></dfn></td>
     <td>"<code>min-height</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-minwidth" title="dom-CSSStyleDeclaration-minWidth"><code>minWidth</code></dfn></td>
     <td>"<code>min-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-orphans" title="dom-CSSStyleDeclaration-orphans"><code>orphans</code></dfn></td>
     <td>"<code>orphans</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-outline" title="dom-CSSStyleDeclaration-outline"><code>outline</code></dfn></td>
     <td>"<code>outline</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-outlinecolor" title="dom-CSSStyleDeclaration-outlineColor"><code>outlineColor</code></dfn></td>
     <td>"<code>outline-color</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-outlinestyle" title="dom-CSSStyleDeclaration-outlineStyle"><code>outlineStyle</code></dfn></td>
     <td>"<code>outline-style</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-outlinewidth" title="dom-CSSStyleDeclaration-outlineWidth"><code>outlineWidth</code></dfn></td>
     <td>"<code>outline-width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-overflow" title="dom-CSSStyleDeclaration-overflow"><code>overflow</code></dfn></td>
     <td>"<code>overflow</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-padding" title="dom-CSSStyleDeclaration-padding"><code>padding</code></dfn></td>
     <td>"<code>padding</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-paddingtop" title="dom-CSSStyleDeclaration-paddingTop"><code>paddingTop</code></dfn></td>
     <td>"<code>padding-top</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-paddingright" title="dom-CSSStyleDeclaration-paddingRight"><code>paddingRight</code></dfn></td>
     <td>"<code>padding-right</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-paddingbottom" title="dom-CSSStyleDeclaration-paddingBottom"><code>paddingBottom</code></dfn></td>
     <td>"<code>padding-bottom</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-paddingleft" title="dom-CSSStyleDeclaration-paddingLeft"><code>paddingLeft</code></dfn></td>
     <td>"<code>padding-left</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-page" title="dom-CSSStyleDeclaration-page"><code>page</code></dfn></td>
     <td>"<code>page</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pagebreakafter" title="dom-CSSStyleDeclaration-pageBreakAfter"><code>pageBreakAfter</code></dfn></td>
     <td>"<code>page-break-after</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pagebreakbefore" title="dom-CSSStyleDeclaration-pageBreakBefore"><code>pageBreakBefore</code></dfn></td>
     <td>"<code>page-break-before</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pagebreakinside" title="dom-CSSStyleDeclaration-pageBreakInside"><code>pageBreakInside</code></dfn></td>
     <td>"<code>page-break-inside</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pause" title="dom-CSSStyleDeclaration-pause"><code>pause</code></dfn></td>
     <td>"<code>pause</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pauseafter" title="dom-CSSStyleDeclaration-pauseAfter"><code>pauseAfter</code></dfn></td>
     <td>"<code>pause-after</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pausebefore" title="dom-CSSStyleDeclaration-pauseBefore"><code>pauseBefore</code></dfn></td>
     <td>"<code>pause-before</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pitch" title="dom-CSSStyleDeclaration-pitch"><code>pitch</code></dfn></td>
     <td>"<code>pitch</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-pitchrange" title="dom-CSSStyleDeclaration-pitchRange"><code>pitchRange</code></dfn></td>
     <td>"<code>pitch-range</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-playduring" title="dom-CSSStyleDeclaration-playDuring"><code>playDuring</code></dfn></td>
     <td>"<code>play-during</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-position" title="dom-CSSStyleDeclaration-position"><code>position</code></dfn></td>
     <td>"<code>position</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-quotes" title="dom-CSSStyleDeclaration-quotes"><code>quotes</code></dfn></td>
     <td>"<code>quotes</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-richness" title="dom-CSSStyleDeclaration-richness"><code>richness</code></dfn></td>
     <td>"<code>richness</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-right" title="dom-CSSStyleDeclaration-right"><code>right</code></dfn></td>
     <td>"<code>right</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-size" title="dom-CSSStyleDeclaration-size"><code>size</code></dfn></td>
     <td>"<code>size</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-speak" title="dom-CSSStyleDeclaration-speak"><code>speak</code></dfn></td>
     <td>"<code>speak</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-speakheader" title="dom-CSSStyleDeclaration-speakHeader"><code>speakHeader</code></dfn></td>
     <td>"<code>speak-header</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-speaknumeral" title="dom-CSSStyleDeclaration-speakNumeral"><code>speakNumeral</code></dfn></td>
     <td>"<code>speak-numeral</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-speakpunctuation" title="dom-CSSStyleDeclaration-speakPunctuation"><code>speakPunctuation</code></dfn></td>
     <td>"<code>speak-punctuation</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-speechrate" title="dom-CSSStyleDeclaration-speechRate"><code>speechRate</code></dfn></td>
     <td>"<code>speech-rate</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-stress" title="dom-CSSStyleDeclaration-stress"><code>stress</code></dfn></td>
     <td>"<code>stress</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-tablelayout" title="dom-CSSStyleDeclaration-tableLayout"><code>tableLayout</code></dfn></td>
     <td>"<code>table-layout</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-textalign" title="dom-CSSStyleDeclaration-textAlign"><code>textAlign</code></dfn></td>
     <td>"<code>text-align</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-textdecoration" title="dom-CSSStyleDeclaration-textDecoration"><code>textDecoration</code></dfn></td>
     <td>"<code>text-decoration</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-textindent" title="dom-CSSStyleDeclaration-textIndent"><code>textIndent</code></dfn></td>
     <td>"<code>text-indent</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-textshadow" title="dom-CSSStyleDeclaration-textShadow"><code>textShadow</code></dfn></td>
     <td>"<code>text-shadow</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-texttransform" title="dom-CSSStyleDeclaration-textTransform"><code>textTransform</code></dfn></td>
     <td>"<code>text-transform</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-top" title="dom-CSSStyleDeclaration-top"><code>top</code></dfn></td>
     <td>"<code>top</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-unicodebidi" title="dom-CSSStyleDeclaration-unicodeBidi"><code>unicodeBidi</code></dfn></td>
     <td>"<code>unicode-bidi</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-verticalalign" title="dom-CSSStyleDeclaration-verticalAlign"><code>verticalAlign</code></dfn></td>
     <td>"<code>vertical-align</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-visibility" title="dom-CSSStyleDeclaration-visibility"><code>visibility</code></dfn></td>
     <td>"<code>visibility</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-voicefamily" title="dom-CSSStyleDeclaration-voiceFamily"><code>voiceFamily</code></dfn></td>
     <td>"<code>voice-family</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-volume" title="dom-CSSStyleDeclaration-volume"><code>volume</code></dfn></td>
     <td>"<code>volume</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-whitespace" title="dom-CSSStyleDeclaration-whiteSpace"><code>whiteSpace</code></dfn></td>
     <td>"<code>white-space</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-widows" title="dom-CSSStyleDeclaration-widows"><code>widows</code></dfn></td>
     <td>"<code>widows</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-width" title="dom-CSSStyleDeclaration-width"><code>width</code></dfn></td>
     <td>"<code>width</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-wordspacing" title="dom-CSSStyleDeclaration-wordSpacing"><code>wordSpacing</code></dfn></td>
     <td>"<code>word-spacing</code>"</td>
    <tr>
     <td><dfn id="dom-cssstyledeclaration-zindex" title="dom-CSSStyleDeclaration-zIndex"><code>zIndex</code></dfn></td>
     <td>"<code>z-index</code>"</td>
  </table>

<!--
  <h4>CSS Properties</h4>

  <p>The DOM attribute name of a CSS property can be found by using the
  following algorithm:</p>

  <ol>
   <li>Let <var title="">r</var> be the CSS property to be
   converted.</li>

   <li>Uppercase the first character after every U+002D (<code>-</code>) in
   <var title="">r</var>.</li>

   <li>Remove every U+002D (<code>-</code>) in <var title="">r</var>.</li>

   <li>Return <var title="">r</var>.</li>
  </ol>

  <p class="note">This means that
  <code>-<var title="">vendor</var>-<var title="">property</var></code>
  becomes
  <code><var title=""><strong>V</strong>endor</var><var title=""><strong>P</strong>roperty</var></code>
  for instance.</p>
-->


  <h4 id="the-cssstyledeclarationvalue-interface"><span class="secno">6.5.2 </span>The <code title="">CSSStyleDeclarationValue</code> Interface</h4>

  <pre class="idl">interface <dfn id="cssstyledeclarationvalue">CSSStyleDeclarationValue</dfn> {
  <span class="XXX">// ...</span>

  // CSS Properties
<!--CSSOM-DECLARATIONVALUEIDL-->
};</pre>

  <p class="XXX">The rought idea is that this interface exposes the full
  list of supported properties as well that each return a
  <code><a href="#csspropertyvalue">CSSPropertyValue</a></code> object. That object can implement other
  objects depending on the property involved. E.g. for '<code>width</code>'
  the object would implement <code><a href="#csslengthcomponentvalue">CSSLengthComponentValue</a></code> and
  <code><a href="#csspercentagecomponentvalue">CSSPercentageComponentValue</a></code>.</p>


  <h3 id="css-values"><span class="secno">6.6 </span>CSS Values</h3>

  <h4 id="parsing-css-values"><span class="secno">6.6.1 </span>Parsing CSS Values</h4>

  <p>To <dfn id="parse-a-css-value">parse a CSS value</dfn> for a given
  <var title="">property</var> means to a parse the given value according to
  the definition of the property that is an
  <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
  <var title="">property</var> in the CSS specification. If the given value
  is <span>ignored</span> return null. Otherwise return the CSS value for
  the given <var title="">property</var>.</p>

  <p class="note">"<code title="">!important</code>" declarations are not
  part of the property value space and will therefore cause
  <a href="#parse-a-css-value">parse a CSS value</a> to return null.</p>


  <h4 id="serializing-css-values"><span class="secno">6.6.2 </span>Serializing CSS Values</h4>

  <!-- based on http://damowmow.com/playground/canon.txt -->

  <p>To <dfn id="serialize-a-css-value">serialize a CSS value</dfn> follow
  these rules:</p>

  <ul>
   <li><p><a href="#serialize-a-css-value-component" title="Serialize a CSS component value">Serialize</a> any
   CSS component values in the value.</li>

   <li><p>Where multiple CSS component values can appear in any order
   without changing the meaning of the value (typically represented by a
   double bar <code>||</code> in the value syntax), use the order as given
   in the syntax.</li>
   <!-- <code>&lt;border-width> &lt;border-style> &lt;color></code>
   for <code>border</code> -->

   <li>
    <p>Where CSS component values of the value can be omitted without
    changing the meaning of the value (e.g. initial values in shorthand
    properties), omit them. If this would remove all the values, then
    include the first allowed value.</p>

    <p class="example">E.g. <code>margin: 20px 20px</code> becomes
    <code>margin: 20px</code>.</p>

    <p class="example">E.g. the value <code>0</code> for the
    '<code>border</code>' property.</p>
   </li>

   <li><p>If the value of a shorthand property is requested and it cannot be
   computed because the properties associated with the shorthand have values
   that cannot be represented by the shorthand the serialization is the
   empty string.</li>

   <li><p>If a value has a <a href="#whitespace">whitespace</a>-separated list of
   CSS component values,
   <a href="#serialize-a-whitespace-separated-list" title="serialize a whitespace-separated list">serialize</a> the
   value as a whitespace-separated list.</li>

   <li><p>If a value has a comma-separated list of
   CSS component values,
   <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serialize</a> the
   value as a comma-separated list.</li>
  </ul>


  <p>To
  <dfn id="serialize-a-css-value-component">serialize a CSS component value</dfn>
  depends on the component, as follows:</p>

  <dl class="switch">
   <dt>keyword</dt>
   <dd><p>The keyword
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</dd>

   <dt>&lt;angle&gt;</dt>
   <dd><p>The number of degrees serialized as per &lt;number&gt; followed by
   the literal string "<code>deg</code>".</dd>

   <dt>&lt;color&gt;</dt>
   <dd><p class="XXX">preserve system colors, maybe color keywords...</dd>
   <!--
     <dt>It is a system color</dt>

     <dd>See below (you use the representation given in the specification that
     defines the keyword).</dd>

     <dt>Alpha component is equal to 1.0</dt>

     <dd>The color is an uppercase six-digit hexadecimal value, prefixed with a
     <code>#</code> character (U+0023 NUMBER SIGN), with the first two digits
     representing the red component, the next two digits representing the green
     component, and the last two digits representing the blue component, the
     digits being in the range 0-9 A-F (U+0030 to U+0039 and U+0041 to
     U+0046).</dd>

     <dt>Alpha component is less than 1.0</dt>

     <dd>The color is in the CSS <code>rgba()</code> functional-notation format:
     the literal string <code>rgba</code> (U+0072 U+0067 U+0062 U+0061) followed
     by a U+0028 LEFT PARENTHESIS, a <span>color component integer</span>
     representing the red component, a <span>color component separator</span>, a
     <span>color component integer</span> for the green component, a <span>color
     component separator</span>, a <span>color component integer</span> for the
     blue component, another <span>color component separator</span> a U+0030
     DIGIT ZERO, a U+002E FULL STOP (representing the decimal point), one or
     more digits in the range 0-9 (U+0030 to U+0039) representing the fractional
     part of the alpha value, and finally a U+0029 RIGHT PARENTHESIS.</dd>

     <dt>The keyword <code>transparent</code> is used</dt>

     <dd>The color is <code>rgba(0, 0, 0, 0)</code>.</dd>
   -->

   <dt>&lt;counter&gt;</dt>
   <dd>
    <p>The concatenation of:</p>
    <ol>
     <li><p>If &lt;counter&gt; has three CSS component values the string
     "<code title="">counters(</code>".</li>
     <li><p>If &lt;counter&gt; has two CSS component values the string
     "<code title="">counter(</code>".</li>
     <li><p>The result of
     <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
     <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a>
     CSS component values belonging to &lt;counter&gt; as list while omitting
     the last CSS component value if it is 'decimal'.</li>
     <li><p>"<code>)</code>" (U+0029).</li>
    </ol>
   </dd>

   <dt>&lt;frequency&gt;</dt>
   <dd><p>The frequency in hertz serialized as per &lt;number&gt; followed by
   the literal string "<code>hz</code>".</dd>

   <dt>&lt;identifier&gt;</dt>
   <dd><p>The identifier
   <a href="#serialize-an-identifier" title="serialize an identifier">escaped</a>.</dd>

   <dt>&lt;integer&gt;</dt>
   <dd><p>A base-ten integer using digits 0-9 (U+0030 to U+0039) in the
   shortest form possible, preceded by "<code>-</code>" (U+002D) if it is
   negative.</dd>

   <dt>&lt;length&gt;</dt>
   <dd>
    <p>A length of zero is represented by the literal string
    "<code>0px</code>".</p>

    <p>Absolute lengths: the number of millimeters serialized as per
    &lt;number&gt; followed by the literal string "<code>mm</code>".
    <span class="XXX">Rumor has it absolute lengths will become relative
    lengths. Centimeters would be compatible with &lt;resolution&gt;...</span></p>

    <p>Relative lengths: the &lt;number&gt; component serialized as per
    &lt;number&gt; followed by the unit in its canonical form as defined in its
    respective specification.</p>
   </dd>

   <dt>&lt;number&gt;</dt>
   <dd><p class="XXX">Browsers seem to use ToString(), but that might give a
   significand which according to some is teh evil (and also currently does
   not parse correctly).</dd>

   <dt>&lt;percentage&gt;</dt>
   <dd><p>The &lt;number&gt; component serialized as per &lt;number&gt; followed
   by the literal string "<code>%</code>" (U+0025).</dd>

   <dt>&lt;resolution&gt;</dt>
   <dd><p>The resolution in dots per centimeter serialized as per
   &lt;number&gt; followed by the literal string "<code>dpcm</code>".</dd>

   <dt>&lt;shape&gt;</dt>
   <dd><p>The string "<code title="">rect(</code>", followed by the result
   of <a href="#serialize-a-comma-separated-list" title="serialize a comma-separated list">serializing</a> the
   <a href="#serialize-a-css-value-component" title="serialize a CSS component value">serialized</a>
   CSS component values belonging to &lt;shape&gt; as list, followed by
   "<code>)</code>" (U+0029).</dd>

   <dt>&lt;string&gt;</dt>
   <dt>&lt;family-name&gt;</dt>
   <dt>&lt;specific-voice&gt;</dt>
   <dd><p>The string
   <a href="#serialize-a-string" title="serialize a string">string escaped</a>.</dd>

   <dt>&lt;time&gt;</dt>
   <dd><p>The time in seconds serialized as per &lt;number&gt; followed by
   the literal string "<code>s</code>".</dd>

   <dt>&lt;uri&gt;</dt>
   <dd><p>The <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#absolute-url">absolute URL</a>
   <a href="#serialize-a-url" title="serialize a URL">URL escaped</a>.</dd>
  </dl>

  <p>
   &lt;absolute-size&gt;,
   &lt;border-width&gt;,
   &lt;border-style&gt;,
   &lt;bottom&gt;,
   &lt;generic-family&gt;,
   &lt;generic-voice&gt;,
   &lt;left&gt;,
   &lt;margin-width&gt;,
   &lt;padding-width&gt;,
   &lt;relative-size&gt;,
   &lt;right&gt;, and
   &lt;top&gt;,
   are considered macros by this specification. They all represent instances
   of components outlined above.</p>

  <p class="XXX">One idea is that we can remove this section somewhere in
  the CSS3/CSS4 timeline by moving the above definitions to the drafts that
  define the CSS components.</p>


  <h5 id="examples-0"><span class="secno">6.6.2.1 </span>Examples</h5>

  <p>Here are some examples of before and after results on specified values.
  The before column could be what the author wrote in a style sheet, while
  the after column shows what querying the DOM would return.</p>

  <div class="example">
   <table>
    <thead>
     <tr><th>Before<th>After
    <tbody>
     <tr><td><code>background: none</code><td><code>background: rgba(0, 0, 0, 0)</code>
     <tr><td><code>outline: none</code><td><code>outline: invert</code>
     <tr><td><code>border: none</code><td><code>border: medium</code>
     <tr><td><code>list-style: none</code><td><code>list-style: disc</code>
     <tr><td><code>margin: 0 1px 1px 1px</code><td><code>margin: 0px 1px 1px</code>
     <tr><td><code>azimuth: behind left</code><td><code>azimuth: 220deg</code>
     <tr><td><code>font-family: a, 'b"', serif</code><td><code>font-family: "a", "b\"", serif</code>
     <tr><td><code>content: url('h)i') '\[\]'</code><td><code>content: url("h)i") "[]"</code>
     <tr><td><code>azimuth: leftwards</code><td><code>azimuth: leftwards</code>
     <tr><td><code>color: rgb(18, 52, 86)</code><td><code>color: #123456</code>
     <tr><td><code>color: rgba(000001, 0, 0, 1)</code><td><code>color: #000000</code>
   </table>

   <p class="XXX">Some of these need to be updated per the new rules.</p>
  </div>


  <h4 id="the-csspropertyvalue-interface"><span class="secno">6.6.3 </span>The <code title="">CSSPropertyValue</code> Interface</h4>

  <pre class="idl">interface <dfn id="csspropertyvalue">CSSPropertyValue</dfn> {
           attribute DOMString <span title="dom-CSSPropertyValue-cssText">cssText</span>;
};</pre>

  <p class="XXX">...</p>

  <!--
   what does the CSSValue represent
    "map"
    "list"
    "space-list"
    "component"

   if it is a CSSComponentValue

  -->


  <h4 id="the-cssmapvalue-interface"><span class="secno">6.6.4 </span>The <code title="">CSSMapValue</code> Interface</h4>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="cssmapvalue">CSSMapValue</dfn> {
  getter <span>CSSValue</span> (DOMString <var title="">name</var>);
};</pre>
  <!-- see HTML5 DOMStringMap -->

  <p class="XXX">This seems the simplest we can get away with.</p>


  <h4 id="the-csspropertyvaluelist-interface"><span class="secno">6.6.5 </span>The <code title="">CSSPropertyValueList</code> Interface</h4>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="csspropertyvaluelist">CSSPropertyValueList</dfn> {
  readonly attribute <span>CSSValue</span>[] <span title="dom-CSSPropertyValue-list">list</span>;
};</pre>

  <p class="XXX">Ideally this attribute just returns a mutable array.</p>


  <h4 id="the-csscomponentvalue-interface"><span class="secno">6.6.6 </span>The <code title="">CSSComponentValue</code> Interface</h4>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="csscomponentvalue">CSSComponentValue</dfn> {
  readonly attribute DOMString <span title="dom-CSSComponentValue-type">type</span>;
           attribute any <span title="dom-CSSComponentValue-value">value</span>;
};</pre>

  <p class="XXX">type returns "string", "keyword", "identifier", "color", "em", "ex", "px", "url".</p>


  <pre class="idl">[NoInterfaceObject] interface <dfn id="cssstringcomponentvalue">CSSStringComponentValue</dfn> {
           attribute DOMString <span title="dom-CSSStringComponentValue-string">string</span>;
};</pre>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="csskeywordcomponentvalue">CSSKeywordComponentValue</dfn> {
           attribute DOMString <span title="dom-CSSStringComponentValue-keyword">keyword</span>;
};</pre>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="cssidentifiercomponentvalue">CSSIdentifierComponentValue</dfn> {
           attribute DOMString <span title="dom-CSSStringComponentValue-identifier">identifier</span>;
};</pre>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="csscolorcomponentvalue">CSSColorComponentValue</dfn> {
           attribute short <span title="dom-CSSColorComponentValue-red">red</span>;
           attribute short <span title="dom-CSSColorComponentValue-green">green</span>;
           attribute short <span title="dom-CSSColorComponentValue-blue">blue</span>;
           attribute float <span title="dom-CSSColorComponentValue-alpha">alpha</span>;
};</pre>

  <p class="XXX">We can make this more complex later. This will probably move into the CSS Color Level 4.</p>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="csslengthcomponentvalue">CSSLengthComponentValue</dfn> {
           attribute float <span title="dom-CSSLengthComponentValue-em">em</span>;
           attribute float <span title="dom-CSSLengthComponentValue-ex">ex</span>;
           attribute float <span title="dom-CSSLengthComponentValue-px">px</span>;
           <span class="XXX">// figure out what to do with absolute lengths</span>
};</pre>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="csspercentagecomponentvalue">CSSPercentageComponentValue</dfn> {
           attribute float <span title="dom-CSSPercentageComponentValue">percent</span>;
};</pre>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="cssurlcomponentvalue">CSSURLComponentValue</dfn> {
           attribute DOMString? <span title="dom-CSSURLComponentValue-url">url</span>;
};</pre>


  <h2 id="dom-access-to-css-declaration-blocks"><span class="secno">7 </span>DOM Access to CSS Declaration Blocks</h2>

  <h3 id="the-elementcssinlinestyle-interface"><span class="secno">7.1 </span>The <code><a href="#elementcssinlinestyle">ElementCSSInlineStyle</a></code> Interface</h3>

  <pre class="idl">[NoInterfaceObject] interface <dfn id="elementcssinlinestyle">ElementCSSInlineStyle</dfn> {
  readonly attribute <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <span>style</span>;
};</pre>

  <p class="XXX">...</p>

  <!-- XXX
    how does this interact with the markup attribute
  -->


  <h3 id="extensions-to-the-window-interface"><span class="secno">7.2 </span>Extensions to the <code title="">Window</code> Interface</h3>

  <pre class="idl">partial interface <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#window">Window</a> {
  <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-window-getcomputedstyle" title="dom-Window-getComputedStyle">getComputedStyle</a>(<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#element">Element</a> <var title="">elt</var>);
  <a href="#cssstyledeclaration">CSSStyleDeclaration</a> <a href="#dom-window-getcomputedstyle" title="dom-Window-getComputedStyle">getComputedStyle</a>(<a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#element">Element</a> <var title="">elt</var>, DOMString <var title="">pseudoElt</var>);
};</pre>

  <p>The
  <dfn id="dom-window-getcomputedstyle" title="dom-Window-getComputedStyle"><code>getComputedStyle(<var title="">elt</var>, <var title="">pseudoElt</var>)</code></dfn>
  method must run these steps:</p>

  <ol>
   <li><p>Let <var title="">doc</var> be the
   <code class="external"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#document">Document</a></code>
   associated with the <code class="external"><a href="http://www.whatwg.org/specs/web-apps/current-work/#window">Window</a></code> object on
   which the method was invoked.</li>

   <li><p>Let <var title="">obj</var> be <var title="">elt</var>.</li>

   <li><p>If <var title="">pseudoElt</var> is as an
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
   either "<code>:before</code>" or "<code>::before</code>" let
   <var title="">obj</var> be the '::before' pseudo-element of
   <var title="">elt</var>.</li>

   <li><p>If <var title="">pseudoElt</var> is as an
   <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#ascii-case-insensitive">ASCII case-insensitive</a> match for
   either "<code>:after</code>" or "<code>::after</code>" let
   <var title="">obj</var> be the '::after' pseudo-element of
   <var title="">elt</var>.</li>

   <li>
    <p>Return a <a href="#css-declaration-block">CSS declaration block</a> with the
    <a href="#css-declaration-block-readonly-flag">CSS declaration block readonly flag</a> set to true and the
    <a href="#css-declaration-block-declarations">CSS declaration block declarations</a> set to all properties
    the user agent supports with as value the <a href="#resolved-value">resolved value</a>
    computed for <var title="">obj</var> using the style rules associated
    with <var title="">doc</var>.</p>

    <p class="note">This means that even if <var title="">obj</var> is in a
    different document (e.g. one fetched via <code>XMLHttpRequest</code>) it
    will still use the style rules associated with the document that is
    associated with the global object on which
    <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> was
    invoked to compute the <a href="#css-declaration-block">CSS declaration block</a>.</p>
   </li>

   <!-- https://bugs.webkit.org/show_bug.cgi?id=14563 has reasons for why
        this is slightly crazy -->
  </ol>

  <p class="note">Because of historical IDL limitations the
  <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> method
  used to be on a separate interface, <code title="">ViewCSS</code>.</p>


  <h2 id="resolved-values"><span class="secno">8 </span>Resolved Values</h2>

  <p><code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> was
  historically defined to return the "computed value" of an element or
  pseudo-element. However, the concept of "computed value" changed between
  revisions of CSS while the implementation of
  <code title="dom-Window-getComputedStyle"><a href="#dom-window-getcomputedstyle">getComputedStyle()</a></code> had to
  remain the same for compatibility with deployed scripts. To address this
  issue this specification introduces the concept of a
  <dfn id="resolved-value">resolved value</dfn>.</p>

  <p>The <a href="#resolved-value">resolved value</a> for a given property can be determined
  as follows:</p>

  <dl class="switch">
   <!--
   We want to treat shorthand properties like any other value basically.

   <dt>'<code>background</code>'
   <dt>'<code>border</code>'
   <dt>'<code>border-collapse</code>'
   <dt>'<code>border-color</code>'
   <dt>'<code>border-spacing</code>'
   <dt>'<code>border-style</code>'
   <dt>'<code>border-top</code>'
   <dt>'<code>border-right</code>'
   <dt>'<code>border-bottom</code>'
   <dt>'<code>border-left</code>'
   <dt>'<code>border-width</code>'
   <dt>'<code>font</code>'
   <dt>'<code>list-style</code>'
   <dt>'<code>margin</code>'
   <dt>'<code>outline</code>'
   <!- - overflow is not - ->
   <dt>'<code>padding</code>'
   <dt>'<code>pause</code>'
   <dd>
    <p>There is no <span>resolved value</span>.</p>
   </dd>
   -->

   <dt>'<code>line-height</code>'</dt>
   <dd><p>The <a href="#resolved-value">resolved value</a> is the used value.</dd>

   <dt>'<code>height</code>'</dt>
   <dt>'<code>margin</code>'</dt>
   <dt>'<code>margin-bottom</code>'</dt>
   <dt>'<code>margin-left</code>'</dt>
   <dt>'<code>margin-right</code>'</dt>
   <dt>'<code>margin-top</code>'</dt>
   <dt>'<code>padding</code>'</dt>
   <dt>'<code>padding-bottom</code>'</dt>
   <dt>'<code>padding-left</code>'</dt>
   <dt>'<code>padding-right</code>'</dt>
   <dt>'<code>padding-top</code>'</dt>
   <dt>'<code>width</code>'</dt>
   <dd><p>If the property applies to the element or pseudo-element and the
   <a href="#resolved-value">resolved value</a> of the '<code>display</code>' property is not
   <code>none</code>, the <a href="#resolved-value">resolved value</a> is the
   <span>used value</span>. Otherwise the <a href="#resolved-value">resolved value</a> is the
   computed value.</dd>

   <dt>Any other property</dt>
   <dd><p>The <a href="#resolved-value">resolved value</a> is the computed value.</dd>
  </dl>


  <h2 id="iana-considerations"><span class="secno">9 </span>IANA Considerations</h2>

  <h3 id="default-style"><span class="secno">9.1 </span><dfn title="http-default-style"><code>Default-Style</code></dfn></h3>

  <p>This section describes a header field for registration in the Permanent
  Message Header Field Registry.
  <!--<a href="XXX">[RFC3864]</a>--></p>

  <dl>
   <dt>Header field name</dt>
   <dd>Default-Style</dd>
   <dt>Applicable protocol</dt>
   <dd>http</dd>
   <dt>Status</dt>
   <dd>standard</dd>
   <dt>Author/Change controller</dt>
   <dd>W3C</dd>
   <dt>Specification document(s)</dt>
   <dd>This document is the relevant specification.</dd>
   <dt>Related information</dt>
   <dd>None.</dd>
  </dl>


<h2 class="no-num" id="references">References</h2>
<h3 class="no-num" id="normative-references">Normative references</h3>
<div id="anolis-references-normative"><dl><dt id="refsDOMCORE">[DOMCORE]
<dd><cite><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM Core</a></cite>, A. van Kesteren and Ms2ger. W3C.
(Work in progress.)

<dt id="refsHTML">[HTML]
<dd><cite><a href="http://www.whatwg.org/html">HTML</a></cite>, I. Hickson. WHATWG.
(Work in progress.)

<dt id="refsRFC2119">[RFC2119]
<dd><cite><a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF.

<dt id="refsXML">[XML]
<dd><cite><a href="http://www.w3.org/TR/xml/">Extensible Markup Language</a></cite>, T. Bray, J. Paoli, C. Sperberg-McQueen et al.. W3C.

<dt id="refsXMLSS">[XMLSS]
<dd><cite><a href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML documents 1.0 (Second Edition)</a></cite>, J. Clark, S. Pieters and H. S. Thompson. W3C.

</dl></div>

<h3 class="no-num" id="informative-references">Informative references</h3>
<div id="anolis-references-informative"></div>


  <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>

  <p>The editor would like to thank

  Alexey Feldgendler,
  Björn Höhrmann,
  Christian Krebs,
  Daniel Glazman,
  David Baron,
  <i>fantasai</i>,
  Hallvord R. M. Steen,
  Ian Hickson,
  Lachlan Hunt,
  Morten Stenshorne,
  Philip Taylor,
  Robert O'Callahan,
  Sjoerd Visscher,
  Simon Pieters,
  Sylvain Galineau, and
  Tarquin Wilton-Jones

  for contributing to this specification.</p>

  <p>And additional bonus thanks to Ian Hickson for writing up the the
  initial version of the alternative style sheets API and canonicalization
  (now serialization) rules for CSS values.</p>

  <!-- XXX NOTES

  <style type=text/css;charset=utf-8> does create a StyleSheet in Firefox
  and Opera, but does not create a StyleSheet in IE. I prefer IE.

  <style type=TEXT/CSS> sets the style sheet type to text/css in Firefox and
  TEXT/CSS in Opera and IE. I prefer Firefox.

  <style> sets the style sheet location to the document location Firefox,
  the empty string in IE, and null in Opera. I prefer Opera

  <style media="x"> invokes .sheet.media.mediaText = "x"

  <style title=""> does not "have" a title

  .cascadedStyle that returns less keywords than currentStyle, no inherit,
  etc.

  Markup style: http://krijnhoetmer.nl/irc-logs/whatwg/20100204#l-529
  -->