Mercurial > drafts / file revision

 <pre class='metadata'>

 Title: CSS Object Model (CSSOM)

 ED: https://drafts.csswg.org/cssom/

 TR: http://www.w3.org/TR/cssom/

 Previous Version: http://www.w3.org/TR/2013/WD-cssom-20131205/

 Previous Version: http://www.w3.org/TR/2011/WD-cssom-20110712/

 Previous Version: http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/

 Group: CSSWG

 Status: ED

 Work Status: Exploring

 Shortname: cssom

 Level: 1

 Editor: Simon Pieters, Opera Software ASA http://www.opera.com, [email protected]

 Editor: Daniel Glazman, Disruptive Innovations http://disruptive-innovations.com/, [email protected]

 Former Editor: Glenn Adams, Cox Communications, Inc. http://www.cox.com, [email protected], http://www.w3.org/wiki/User:Gadams

 Former Editor: Anne van Kesteren, Opera Software ASA http://www.opera.com, [email protected], https://annevankesteren.nl/

 !Issues list: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=CSSOM&amp;resolution=---">Bugzilla</a> (<a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&amp;component=CSSOM">file a bug</a>)

 Abstract: CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and of course CSS itself.

 Ignored Terms: EmptyString, mediaText, cssText, InvalidCharacterError, SecurityError, SyntaxError, IndexSizeError, HierarchyRequestError, InvalidStateError, InvalidModificationError, NoModificationAllowedError, CORS-same-origin, group of selectors, list of css page selectors, CSSCharsetRule, ProcessingInstruction, EventTarget, EventListener, Event, EventInit, Element, Range, Node, Text, style, CSSFontFaceRule, -webkit-transform

 Ignored Vars: m1, m2, camel_cased_attribute, webkit_cased_attribute, dashed_attribute

 </pre>

 <pre class='anchors'>

 urlPrefix: https://html.spec.whatwg.org/multipage/

     urlPrefix: infrastructure.html

         type: dfn

             text: html elements

             text: tree order

             text: document base url

             text: content-type metadata; url: #content-type

     urlPrefix: browsers.html

         type: interface; text: WindowProxy

         type: dfn

             text: browsing context

             text: auxiliary browsing context

             text: familiar with

             text: same origin

     urlPrefix: webappapis.html

         type: dfn

             text: responsible browsing context

             text: incumbent settings object

             text: event loop

             text: event handler

             text: event handler event type

             text: event handler IDL attributes

     urlPrefix: infrastructure.html

         type: dfn

             text: split a string on commas

             text: skip whitespace

             text: collect a sequence of characters

             text: space character

             text: rules for parsing integers

     urlPrefix: xhtml.html

         type: dfn

             text: xml parser

     urlPrefix: semantics.html

         type: dfn

             text: a style sheet that is blocking scripts

             text: style sheet ready

 urlPrefix: https://dom.spec.whatwg.org/#concept-

     type: dfn

         text: context object

         text: dispatch; url: event-dispatch

         text: event

         text: event listener

         text: quirks mode; url: document-quirks

         text: fire an event; url: event-fire

         text: node document

         text: document url

 urlPrefix: http://www.w3.org/TR/CSS21/visuren.html

     type: dfn; text: anonymous block box; url: #anonymous-block-level

 urlPrefix: http://heycam.github.io/webidl/#

     type: interface; urlPrefix: idl-

         text: double

         text: long

     type: dfn; urlPrefix: dfn-

         text: converted to an IDL value

         text: throw

         text: supported property indices

 urlPrefix: https://encoding.spec.whatwg.org/#; spec: ENCODING

     type: dfn; text: get an encoding; url: concept-encoding-get

 urlPrefix: https://url.spec.whatwg.org/#concept-

     type: dfn

         text: absolute url

         text: URL

         text: URL parser

         text: URL serializer

 urlPrefix: http://www.w3.org/TR/xml-stylesheet/#

     type: dfn; text: xml-stylesheet processing instruction

     type: dfn; text: pseudo-attribute

 urlPrefix: https://fetch.spec.whatwg.org/#concept-

     type: dfn;

         text: fetch

         text: request

         for: request

             text: url

             text: origin

             text: referrer

         text: network error

 </pre>

 <pre class='link-defaults'>

 spec:css-display-3; type:value; for:display; text:table

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

 spec:css-position-3; type:property; text:left

 spec:html5; type:element; text:style

 spec:css-namespaces-3; type:dfn; text:namespace prefix

 spec:dom-ls; type:interface; text:Document

 </pre>

 <script src=https://resources.whatwg.org/file-bug.js async></script>

 Introduction {#introduction}

 ============================

 This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications

 as well as other CSS related specifications define extensions to these core features.

 The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to

 and manipulation of style related state information and processes.

 The features defined below are fundamentally based on prior specifications of the W3C DOM Working Group, primarily

 [[DOM-LEVEL-2-STYLE]]. The purposes of the present document are (1) to improve on that prior work by providing

 more technical specificity (so as to improve testability and interoperability), (2) to deprecate or remove certain less-widely implemented

 features no longer considered to be essential in this context, and (3) to newly specify certain extensions that have been

 or expected to be widely implemented.

 <!--A full list of the changes to API signatures can be found in <a href="#changes-from-dom-2-style"><cite>Changes from DOM-2 Style</cite></a>.-->

 Terminology {#terminology}

 ==========================

 This specification employs certain terminology from the following documents:

 <cite>DOM</cite>,

 <cite>HTML</cite>,

 <cite>CSS Syntax</cite>,

 <cite>Encoding</cite>,

 <cite>URL</cite>,

 <cite>Fetch</cite>,

 <cite>Associating Style Sheets with XML documents</cite>

 and

 <cite>XML</cite>.

 [[!DOM]]

 [[!HTML]]

 [[!CSS3SYN]]

 [[!ENCODING]]

 [[!URL]]

 [[!FETCH]]

 [[!XML-STYLESHEET]]

 [[!XML]]

 When this specification talks about object

 <code><var>A</var></code> where <code><var>A</var></code> is actually an interface, it generally means an object implementing interface

 <code><var>A</var></code>.

 The terms <dfn>set</dfn> and <dfn>unset</dfn> to refer to the true and

 false values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to

 mutating some value to make it true or false, respectively.

 The term <dfn export>supported styling language</dfn> refers to CSS.

 Note: If another styling language becomes supported in user agents, this specification is expected to be updated as necessary.

 The term <dfn export>supported CSS property</dfn> refers to a CSS property that the user agent implements,

 and that is defined to be a case-insensitive property in the CSS specification.

 A <a>supported CSS property</a> must be in its lowercase form for the purpose of comparisons this specification.

 In this specification the ''::before'' and ''::after'' pseudo-elements

 are assumed to exist for all elements even if no box is generated for them.

 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.

 Unless otherwise stated, string comparisons are done in a <a>case-sensitive</a> manner.

 Common Serializing Idioms {#common-serializing-idioms}

 ------------------------------------------------------

 To <dfn>escape a character</dfn> means to create a string of

 "<code>\</code>" (U+005C), followed by the character.

 To <dfn lt="escape a character as code point|escaped as code point">escape 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 single SPACE (U+0020).

 To <dfn export>serialize an identifier</dfn> means to create a string represented

 by the concatenation of, for each character of the identifier:

 <ul>

  <li>If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).

  <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, then the character

  <a>escaped as code point</a>.

  <li>If the character is the first character and is in the range \[0-9]

  (U+0030 to U+0039), then the character

  <a>escaped as code point</a>.

  <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), then the character

  <a>escaped as code point</a>.

  <li>If the character is the first character and is a "<code>-</code>" (U+002D),

  and there is no second character,

  then the <a lt="escape a character">escaped</a> character.

  <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), then the character

  itself.

  <li>Otherwise, the <a lt="escape a character">escaped</a>

  character.

 </ul>

 To <dfn export>serialize a string</dfn> means to create a string represented

 by '"' (U+0022), followed by the result of applying the rules

 below to each character of the given string, followed by

 '"' (U+0022):

 <ul>

  <li>If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD)

  <a>escaped as code point</a>.

  <li>If the character is in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, the character

  <a>escaped as code point</a>.

  <li>If the character is '"' (U+0022) or "<code>\</code>"

  (U+005C), the <a lt="escape a character">escaped</a> character.

  <li>Otherwise, the character itself.

 </ul>

 Note: "<code>'</code>" (U+0027) is not escaped because strings

 are always serialized with '"' (U+0022).

 To <dfn export>serialize a URL</dfn> means to create a string represented by

 "<code>url(</code>", followed by the

 <a lt="serialize a string">string escaped</a> value of the given

 string, followed by "<code>)</code>".

 To <dfn export>serialize a comma-separated list</dfn> concatenate all items of

 the list in list order while separating them by "<code>, </code>", i.e.,

 COMMA (U+002C) followed by a single SPACE (U+0020).

 To <dfn export>serialize a whitespace-separated list</dfn> concatenate all

 items of the list in list order while separating them by "<code> </code>", i.e.,

 a single SPACE (U+0020).

 Note: When serializing a list according to the above rules,

 extraneous whitespace is not inserted prior to the first item or subsequent to

 the last item. Unless otherwise specified, an empty list is serialized as the

 empty string.

 Media Queries {#media-queries}

 ==============================

 Media queries are defined by the Media Queries specification. This

 section defines various concepts around media queries, including their API

 and serialization form.

 <!-- XXX ref -->

 Parsing Media Queries {#parsing-media-queries}

 ----------------------------------------------

 To <dfn export>parse a media query list</dfn> for a

 given string <var>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. <!-- XXX ref -->

 Note: A media query that ends up being "ignored" will turn

 into "<code>not all</code>".

 To <dfn export>parse a media query</dfn> for a given string

 <var>s</var> means to follow the

 <a>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.

 Note: Again, a media query that ends up being "ignored" will

 turn into "<code>not all</code>".

 Serializing Media Queries {#serializing-media-queries}

 ------------------------------------------------------

 To

 <dfn export>serialize a media query list</dfn>

 run these steps:

 <ol>

  <li>If the media query list is empty return the empty string and

  terminate these steps.

  <li><a lt="serialize a media query">Serialize</a> each media query in the list of media queries, in the same order as they appear in the list of

  media queries, and then <a lt="serialize a comma-separated list">serialize</a> the list.

 </ol>

 To

 <dfn export>serialize a media query</dfn> let

 <var>s</var> be the empty string, run the steps below, and

 finally return <var>s</var>:

 <ol>

  <li>If the media query is negated append "<code>not</code>", followed

  by a single SPACE (U+0020), to <var>s</var>.

  <li>Let <var>type</var> be the media type of the media query,

  <a lt="serialize an identifier">escaped</a> and

  <a>converted to ASCII lowercase</a>.

  <li>If the media query does not contain media features append

  <var>type</var>, to <var>s</var>,

  then return <var>s</var> and terminate this algorithm.

  <li>If <var>type</var> is not "<code>all</code>" or if the

  media query is negated append <var>type</var>, followed by a

  single SPACE (U+0020), followed by "<code>and</code>", followed by a single SPACE

  (U+0020), to <var>s</var>.

  <li>Sort the media features in lexicographical order.

  <li>

   Then, for each media feature:

   <ol>

    <li>Append a "<code>(</code>" (U+0028), followed by the media feature

    name, <a>converted to ASCII lowercase</a>,

    to <var>s</var>.

    <li>If a value is given append a "<code>:</code>" (U+003A), followed

    by a single SPACE (U+0020), followed by the

    <a lt="serialize a media feature value">serialized media feature value</a>,

    to <var>s</var>.

    <li>Append a "<code>)</code>" (U+0029) to

    <var>s</var>.

    <li>If this is not the last media feature append a single SPACE (U+0020),

    followed by "<code>and</code>", followed by a single SPACE (U+0020), to

    <var>s</var>.

   </ol>

 </ol>

 <div class="example">

  Here are some examples of input (first column) and output (second

  column):

  <table class="complex data">

   <thead>

    <tr><th>Input<th>Output

   <tbody>

    <tr>

     <td><pre>not screen and (min-WIDTH:5px) AND (max-width:40px)</pre>

     <td><pre>not screen and (max-width: 40px) and (min-width: 5px)</pre>

    <tr>

     <td><pre>all and (color) and (color)</pre>

     <td><pre>(color)</pre>

  </table>

 </div>

 ### Serializing Media Feature Values ### {#serializing-media-feature-values}

 Issue: 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.

 To <dfn export>serialize a media feature value</dfn>

 named <var>v</var> locate <var>v</var> in the first

 column of the table below and use the serialization format described in

 the second column:

 <table class="complex data" spec=mediaqueries-4>

  <thead>

   <tr>

    <th>Media Feature

    <th>Serialization

  <tbody>

   <tr>

    <td>'width'

    <td>...

   <tr>

    <td>'height'

    <td>...

   <tr>

    <td>'device-width'

    <td>...

   <tr>

    <td>'device-height'

    <td>...

   <tr>

    <td>'orientation'

    <td>

     If the value is ''portrait'': "<code>portrait</code>".

     If the value is ''landscape'': "<code>landscape</code>".

   <tr>

    <td>'aspect-ratio'

    <td>...

   <tr>

    <td>'device-aspect-ratio'

    <td>...

   <tr>

    <td>'color'

    <td>...

   <tr>

    <td>'color-index'

    <td>...

   <tr>

    <td>'monochrome'

    <td>...

   <tr>

    <td>'resolution'

    <td>...

   <tr>

    <td>'scan'

    <td>

     If the value is ''progressive'': "<code>progressive</code>".

     If the value is ''interlace'': "<code>interlace</code>".

   <tr>

    <td>'grid'

    <td>...

 </table>

 Other specifications can extend this table and vendor-prefixed media

 features can have custom serialization formats as well.

 Comparing Media Queries {#comparing-media-queries}

 --------------------------------------------------

 To

 <dfn export>compare media queries</dfn>

 <var>m1</var> and <var>m2</var> means to

 <a lt="serialize a media query">serialize</a> them both and

 return true if they are a

 <a>case-sensitive</a> match and false if they

 are not.

 The {{MediaList}} Interface {#the-medialist-interface}

 ------------------------------------------------------

 <!--

 //

 // All members defined since DOM-2 Style. The only differences are:

 //

 //   1. addition of stringifier qualifier on mediaText

 //   2. addition of getter qualifier on item

 //   3. removal of raises(DOMException) from {append,delete}Medium

 //

 -->

 An object that implements the <code>MediaList</code> interface has an associated <dfn export for=MediaList>collection of media queries</dfn>.

 <pre class=idl>

 [ArrayClass]

 interface MediaList {

   [TreatNullAs=EmptyString] stringifier attribute DOMString mediaText;

   readonly attribute unsigned long length;

   getter DOMString? item(unsigned long index);

   void appendMedium(DOMString medium);

   void deleteMedium(DOMString medium);

 };

 </pre>

 The object's <a>supported property indices</a> are the numbers in the range zero to one less than the number of media queries

 in the <a>collection of media queries</a> represented by the collection. If there are no such media queries, then there are no

 <a>supported property indices</a>.

 To <dfn export>create a <code>MediaList</code> object</dfn> with a string <var>text</var>, run the following steps:

 <ol>

  <li>Create a new <code>MediaList</code> object.

  <li>Set its {{MediaList/mediaText}} attribute to <var>text</var>.

  <li>Return the newly created <code>MediaList</code> object.

 </ol>

 The <dfn attribute for=MediaList>mediaText</dfn> attribute, on getting, must return a

 <a lt="serialize a media query list">serialization</a> of the <a>collection of media queries</a>.

 Setting the {{MediaList/mediaText}} attribute must run these steps:

 <ol>

  <li>Empty the <a>collection of media queries</a>.

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

  <li>Append all the media queries as a result of <a lt="parse a media query list">parsing</a> the given

  value to the <a>collection of media queries</a>.

 </ol>

 The <dfn method for=MediaList>item(<var>index</var>)</dfn> method must return the media query in the <a>collection of media

 queries</a> given by <var>index</var>, or null, if <var>index</var> is greater than or equal to the number of media queries in the

 <a>collection of media queries</a>.

 The <dfn attribute for=MediaList>length</dfn> attribute must return the number of media queries in the <a>collection of media

 queries</a>.

 The <dfn method for=MediaList>appendMedium(<var>medium</var>)</dfn> method must run these steps:

 <ol>

  <li>Let <var>m</var> be the result of <a lt="parse a media query">parsing</a> the given value.

  <li>If <var>m</var> is null terminate these steps.

  <li>If <a lt="compare media queries">comparing</a> <var>m</var> with any of the media queries in the

  <a>collection of media queries</a> returns true terminate these steps.

  <li>Append <var>m</var> to the <a>collection of media queries</a>.

 </ol>

 The <dfn method for=MediaList>deleteMedium(<var>medium</var>)</dfn> method must run these steps:

 <ol>

  <li>Let <var>m</var> be the result of <a lt="parse a media query">parsing</a> the given value.

  <li>If <var>m</var> is null terminate these steps.

  <li>Remove any media query from the <a>collection of media queries</a> for which

  <a lt="compare media queries">comparing</a> the media query with <var>m</var> returns true.

 </ol>

 Selectors {#selectors}

 ======================

 Selectors are defined in the Selectors specification. This section

 mainly defines how to serialize them. <!-- XXX ref -->

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

 Parsing Selectors {#parsing-selectors}

 --------------------------------------

 To

 <dfn export>parse a group of selectors</dfn>

 means to parse the value using the <code>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. <!-- XXX ref -->

 Serializing Selectors {#serializing-selectors}

 ----------------------------------------------

 <!-- http://dump.testsuite.org/2009/cssom/serializing-selectors.htm -->

 To

 <dfn export>serialize a group of selectors</dfn>

 <a lt="serialize a selector">serialize</a> each selector in the

 group of selectors and then

 <a lt="serialize a comma-separated list">serialize</a> the

 group.

 To <dfn export>serialize a selector</dfn> let

 <var>s</var> be the empty string, run the steps below for each

 part of the chain of the selector, and finally return

 <var>s</var>:

 <ol>

  <li>If there is only one <a>simple selector</a> in the

  <a>compound selectors</a> which is a

  <a>universal selector</a>, append the result of

  <a lt="serialize a simple selector">serializing</a> the

  <a>universal selector</a> to <var>s</var>.

  <li>Otherwise, for each <a>simple selector</a> in the

  <a>compound selectors</a> that is not a

  universal selector of which the

  <a>namespace prefix</a> maps to a namespace that is not the

  <a>default namespace</a>

  <a lt="serialize a simple selector">serialize</a> the

  <a>simple selector</a> and append the result to

  <var>s</var>.

  <li>If this is not the last part of the chain of the selector append a

  single SPACE (U+0020), followed by the combinator

  "<code>></code>",

  "<code>+</code>",

  "<code>~</code>",

  "<code>>></code>",

  "<code>||</code>",

  as appropriate, followed by another single SPACE (U+0020) if the combinator was

  not whitespace, to <var>s</var>.

  <li>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-element, to <var>s</var>.

 </ol>

 To

 <dfn export>serialize a simple selector</dfn>

 let <var>s</var> be the empty string, run the steps below, and

 finally return <var>s</var>:

 <dl class="switch">

  <dt>type selector

  <dt>universal selector

  <dd>

   <ol>

    <li>If the <a>namespace prefix</a> maps to a namespace that is

    not the <a>default namespace</a> and is not the

    null namespace (not in a namespace) append the

    <a lt="serialize an identifier">escaped</a>

    <a>namespace prefix</a>, followed by a "<code>|</code>" (U+007C)

    to <var>s</var>.

    <li>If the <a>namespace prefix</a> maps to a namespace that is

    the null namespace (not in a namespace) append

    "<code>|</code>" (U+007C) to <var>s</var>.

    <!-- This includes |* -->

    <li>If this is a type selector append the

    <a lt="serialize an identifier">escaped</a> element name to

    <var>s</var>.

    <li>If this is a universal selector append "<code>*</code>" (U+002A)

    to <var>s</var>.

   </ol>

  <dt>attribute selector

  <dd>

   <ol>

    <li>Append "<code>[</code>" (U+005B) to

    <var>s</var>.

    <li>If the <a>namespace prefix</a> maps to a namespace that is

    not the null namespace (not in a namespace) append the

    <a lt="serialize an identifier">escaped</a>

    <a>namespace prefix</a>, followed by a "<code>|</code>" (U+007C)

    to <var>s</var>.

    <li>Append the <a lt="serialize an identifier">escaped</a>

    attribute name to <var>s</var>.

    <li>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 lt="serialize a string">string escaped</a>

    attribute value, to <var>s</var>.

    <li>If the attribute selector has the case-sensitivity flag present,

    append "<code> i</code>" (U+0020 U+0069) to <var>s</var>.

    <li>Append "<code>]</code>" (U+005D) to

    <var>s</var>.

   </ol>

  <dt>class selector

  <dd>Append a "<code>.</code>" (U+002E), followed by the

  <a lt="serialize an identifier">escaped</a> class name to

  <var>s</var>.

  <dt>ID selector

  <dd>Append a "<code>#</code>" (U+0023), followed by the

  <a lt="serialize an identifier">escaped</a> ID to

  <var>s</var>.

  <dt>pseudo-class

  <dd>

   If the pseudo-class does not accept arguments append

   "<code>:</code>" (U+003A), followed by the name of the pseudo-class, to

   <var>s</var>.

   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(s) determined as per below, followed by

   "<code>)</code>" (U+0029), to <var>s</var>.

   <dl class="switch">

    <dt><code>:lang()</code>

    <dd>The value of each argument <a lt="serialize a string">string escaped</a>,

    preserving relative order,

    separated by "<code>, </code>" (U+002C U+0020).

    <dt><code>:nth-child()</code>

    <dt><code>:nth-last-child()</code>

    <dt><code>:nth-of-type()</code>

    <dt><code>:nth-last-of-type()</code>

    <dd>The result of serializing the value using the rules to <a>serialize an &lt;an+b> value</a>.

    <dt><code>:not()</code>

    <dd>The result of serializing the value using the rules for

    <a lt="serialize a group of selectors">serializing a group of selectors</a>.

   </dl>

 </dl>

 CSS {#css-object-model}

 =======================

 CSS Style Sheets {#css-style-sheets}

 ------------------------------------

 A <dfn export>CSS style sheet</dfn> is an abstract concept that

 represents a style sheet as defined by the CSS specification. In the CSSOM a

 <a>CSS style sheet</a> is represented as a {{CSSStyleSheet}} object. A

 <a>CSS style sheet</a> has a number of associated state items:

 <dl dfn-for="CSSStyleSheet">

  <dt><dfn id=concept-css-style-sheet-type>type</dfn>

  <dd>The literal string "<code>text/css</code>".

  <dt><dfn id=concept-css-style-sheet-location>location</dfn>

  <dd>Specified when created. The <a>absolute URL</a> of the first request of the

  <a>CSS style sheet</a> or null if the <a>CSS style sheet</a> was

  embedded. Does not change during the lifetime of the <a>CSS style sheet</a>.

  <dt><dfn id=concept-css-style-sheet-parent-css-style-sheet>parent CSS style sheet</dfn>

  <dd>Specified when created. The <a>CSS style sheet</a> that is the parent of the

  <a>CSS style sheet</a> or null if there is no associated parent.

  <dt><dfn id=concept-css-style-sheet-owner-node>owner node</dfn>

  <dd>Specified when created. The DOM node associated with the <a>CSS style sheet</a> or

  null if there is no associated DOM node.

  <dt><dfn id=concept-css-style-sheet-owner-css-rule>owner CSS rule</dfn>

  <dd>Specified when created. The <a for=/>CSS rule</a>

  in the <a for=CSSStyleSheet>parent CSS style sheet</a>

  that caused the inclusion of the <a>CSS style sheet</a> or null if

  there is no associated rule.

  <dt><dfn id=concept-css-style-sheet-media>media</dfn>

  <dd>

   Specified when created. The {{MediaList}} object associated with the

   <a>CSS style sheet</a>.

   If this property is specified to a string, the <a>media</a> must be set to the return value of invoking

   <a>create a <code>MediaList</code> object</a> steps for that string.

   If this property is specified to an attribute of the <a for=CSSStyleSheet>owner node</a>, the

   <a>media</a> must be set to the return value of invoking <a>create a <code>MediaList</code> object</a> steps

   for the value of that attribute. Whenever the attribute is set, changed or removed, the <a>media</a>'s

   {{MediaList/mediaText}} attribute must be set to the new value of the attribute, or to null if the attribute is absent.

   Note: Changing the <a>media</a>'s {{MediaList/mediaText}} attribute does not

   change the corresponding attribute on the <a for=CSSStyleSheet>owner node</a>.

  <dt><dfn id=concept-css-style-sheet-title>title</dfn>

  <dd>

   Specified when created. The title of the <a>CSS style sheet</a>, which can be the empty string.

   <div class="example">

    In the following, the <a>title</a> is non-empty

    for the first style sheet, but is empty for the second and third style sheets.

    <pre>

    <style lt="papaya whip">

      body { background: #ffefd5; }

    </style>

    </pre>

    <pre>

    <style lt="">

      body { background: orange; }

    </style>

    </pre>

    <pre>

    <style>

      body { background: brown; }

    </style>

    </pre>

   </div>

   If this property is specified to an attribute of the <a for=CSSStyleSheet>owner node</a>, the

   <a>title</a> must be set to the value of that attribute. Whenever the attribute is set, changed or removed, the

   <a>title</a> must be set to the new value of the attribute, or to the empty string if the attribute is absent.

  <dt><dfn id=concept-css-style-sheet-alternate-flag>alternate flag</dfn>

  <dd>

   Specified when created. Either set or unset. Unset by default.

   <div class="example">

    The following <a>CSS style sheets</a> have

    their <a>alternate flag</a> set:

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

    <pre>&lt;link rel="alternate stylesheet" lt="x" href="data:text/css,&hellip;"></pre>

   </div>

  <dt><dfn id=concept-css-style-sheet-disabled-flag>disabled flag</dfn>

  <dd>

   Either set or unset. Unset by default.

   Note: Even when unset it does not necessarily mean that the

   <a>CSS style sheet</a> is actually used for rendering.

  <dt><dfn id=concept-css-style-sheet-css-rules>CSS rules</dfn>

  <dd>The CSS rules associated with the

  <a>CSS style sheet</a>.

  <dt><dfn id=concept-css-style-sheet-origin-clean-flag>origin-clean flag</dfn>

  <dd>Specified when created. Either set or unset. If it is set, the API allows reading and modifying of the <a for=CSSStyleSheet>CSS rules</a>.

 </dl>

 ### The {{StyleSheet}} Interface ### {#the-stylesheet-interface}

 <!--

 //

 // All members defined since DOM-2 Style. Only difference

 // is addition of [PutForwards=mediaText], which is presently

 // not defined in CSSOM draft.

 //

 -->

 The {{StyleSheet}} interface represents an abstract, base style sheet.

 <pre class=idl>

 interface StyleSheet {

   readonly attribute DOMString type;

   readonly attribute DOMString? href;

   readonly attribute (Element or ProcessingInstruction)? ownerNode;

   readonly attribute StyleSheet? parentStyleSheet;

   readonly attribute DOMString? title;

   [SameObject, PutForwards=mediaText] readonly attribute MediaList media;

   attribute boolean disabled;

 };

 </pre>

 The <dfn attribute for=StyleSheet>type</dfn> attribute must return the <a for=CSSStyleSheet>type</a>.

 The <dfn attribute for=StyleSheet>href</dfn> attribute must return the <a>location</a>.

 The <dfn attribute for=StyleSheet>ownerNode</dfn> attribute must return the <a for=CSSStyleSheet>owner node</a>.

 The <dfn attribute for=StyleSheet>parentStyleSheet</dfn> attribute must return the

 <a for=CSSStyleSheet>parent CSS style sheet</a>.

 The <dfn attribute for=StyleSheet>title</dfn> attribute must return the <a>title</a> or null if

 <a>title</a> is the empty string.

 The <dfn attribute for=StyleSheet>media</dfn> attribute must return the <a>media</a>.

 The <dfn attribute for=StyleSheet>disabled</dfn> attribute, on getting, must return true if the

 <a>disabled flag</a>

 is set, or false otherwise. On setting, the {{StyleSheet/disabled}} attribute must set the

 <a>disabled flag</a> if the new value is true, or unset the

 <a>disabled flag</a> otherwise.

 ### The {{CSSStyleSheet}} Interface ### {#the-cssstylesheet-interface}

 <!--

 //

 // All members defined since DOM-2 Style. The only differences are:

 //

 //   1. removal of raises(DOMException) on {insert,delete}Rule operations.

 //

 -->

 The {{CSSStyleSheet}} interface represents a <a>CSS style sheet</a>.

 <pre class=idl>

 interface CSSStyleSheet : StyleSheet {

   readonly attribute CSSRule? ownerRule;

   [SameObject] readonly attribute CSSRuleList cssRules;

   unsigned long insertRule(DOMString rule, unsigned long index);

   void deleteRule(unsigned long index);

 };

 </pre>

 The <dfn attribute for=CSSStyleSheet>ownerRule</dfn> attribute must return the <a for=CSSStyleSheet>owner CSS rule</a>.

 If a value other than null is ever returned, then that same value must always be returned on each get access.

 The <dfn attribute for=CSSStyleSheet>cssRules</dfn> attribute must follow these steps:

 <ol>

  <li>If the <a>origin-clean flag</a> is unset,

  <a>throw</a> a {{SecurityError}} exception.

  <li>Return a read-only, live {{CSSRuleList}} object representing

  the <a for=CSSStyleSheet>CSS rules</a>.

  Note: Even though the returned {{CSSRuleList}} object is read-only (from the perspective of

  client-authored script), it can nevertheless change over time due to its liveness status. For example, invoking

  the {{CSSStyleSheet/insertRule()}} or {{CSSStyleSheet/deleteRule()}} methods can result in

  mutations reflected in the returned object.

 </ol>

 The <dfn method for=CSSStyleSheet>insertRule(<var>rule</var>, <var>index</var>)</dfn> method must run the following steps:

 <ol>

  <li>If the <a>origin-clean flag</a> is unset,

  <a>throw</a> a {{SecurityError}} exception.

  <li>Return the result of invoking <a>insert a CSS rule</a> <var>rule</var> in the <a for=CSSStyleSheet>CSS rules</a>

  at <var>index</var>.

 </ol>

 The <dfn method for=CSSStyleSheet>deleteRule(<var>index</var>)</dfn> method must run the following steps:

 <ol>

  <li>If the <a>origin-clean flag</a> is unset,

  <a>throw</a> a {{SecurityError}} exception.

  <li><a>Remove a CSS rule</a> in the <a for=CSSStyleSheet>CSS rules</a> at <var>index</var>.

 </ol>

 CSS Style Sheet Collections {#css-style-sheet-collections}

 ----------------------------------------------------------

 Below various new concepts are defined that are associated with each

 {{Document}} object.

 Each {{Document}} has an associated list of zero or more

 <a>CSS style sheets</a>, named the

 <dfn>document CSS style sheets</dfn>. This is

 an ordered list that contains all

 <a>CSS style sheets</a> associated with the

 {{Document}}, in

 <a>tree order</a>, with

 <a>CSS style sheets</a> created from HTTP

 <code>Link</code> headers first, if any, in header

 order.

 To <dfn>create a CSS style sheet</dfn>, run these

 steps:

 <ol>

  <li>Create a new <a>CSS style sheet</a> object and set its

  properties as specified.

  <li>

   Then run the <a>add a CSS style sheet</a> steps for the newly created <a>CSS style sheet</a>.

   <p class=warning>If the <a>origin-clean flag</a> is unset, this can expose information from the user's

   intranet.

 </ol>

 To <dfn>add a CSS style sheet</dfn>, run these

 steps:

 <ol>

  <li>Add the <a>CSS style sheet</a> to the list of

  <a>document CSS style sheets</a> at the appropriate location. The

  remainder of these steps deal with the

  <a>disabled flag</a>.

  <li>If the <a>disabled flag</a> is set, terminate

  these steps.

  <li>If the <a>title</a> is not the empty string, the

  <a>alternate flag</a> is unset, and

  <a>preferred CSS style sheet set name</a> is the empty string

  <a>change the preferred CSS style sheet set name</a> to the

  <a>title</a>.

  <li>

   If any of the following is true unset the

   <a>disabled flag</a> and terminate these steps:

   <ul>

    <li>The <a>title</a> is the empty string.

    <li>The <a>last CSS style sheet set name</a> is null and the

    <a>title</a> is a

    <a>case-sensitive</a> match

    for the <a>preferred CSS style sheet set name</a>.

    <li>The <a>title</a> is a

    <a>case-sensitive</a> match for the

    <a>last CSS style sheet set name</a>.

   </ul>

  <li>Set the <a>disabled flag</a>.

 </ol>

 To <dfn>remove a CSS style sheet</dfn>, run these steps:

 <ol>

  <li>Remove the <a>CSS style sheet</a> from the list of <a>document CSS style sheets</a>.

  <li>Set the <a>CSS style sheet</a>'s <a for=CSSStyleSheet>parent CSS style sheet</a>,

  <a for=CSSStyleSheet>owner node</a> and <a for=CSSStyleSheet>owner CSS rule</a> to null.

  <!-- "associated CSS style sheet" is defined in terms of owner node, so we don't need to set it to null explicitly -->

  <!-- XXX does anything need to happen wrt alternate style sheets? what if the last style sheet with the preferred style sheet set name is removed? -->

 </ol>

 A <dfn>persistent CSS style sheet</dfn> is a

 <a>CSS style sheet</a> from the <a>document CSS style sheets</a>

 whose <a>title</a> is the empty string and whose

 <a>alternate flag</a> is unset.

 A <dfn>CSS style sheet set</dfn> is an ordered

 collection of one or more <a>CSS style sheets</a>

 from the <a>document CSS style sheets</a> which have an identical

 <a>title</a> that is not the empty string.

 A <dfn>CSS style sheet set name</dfn> is the

 <a>title</a> the <a>CSS style sheet set</a> has in

 common.

 An <dfn>enabled CSS style sheet set</dfn> is a

 <a>CSS style sheet set</a> of which each <a>CSS style sheet</a> has

 its <a>disabled flag</a> unset.

 To <dfn>enable a CSS style sheet set</dfn>

 with name <var>name</var>, run these steps:

 <ol>

  <li>If <var>name</var> is the empty string, set the

  <a>disabled flag</a> for each <a>CSS style sheet</a>

  that is in a <a>CSS style sheet set</a> and terminate these steps.

  <li>Unset the <a>disabled flag</a> for each

  <a>CSS style sheet</a> in a <a>CSS style sheet set</a> whose

  <a>CSS style sheet set name</a> is a

  <a>case-sensitive</a> match for

  <var>name</var> and set it for all other

  <a>CSS style sheets</a> in a

  <a>CSS style sheet set</a>.

 </ol>

 To <dfn>select a CSS style sheet set</dfn>

 with name <var>name</var>, run these steps:

 <ol>

  <li><a>enable a CSS style sheet set</a> with name

  <var>name</var>.

  <li>Set <a>last CSS style sheet set name</a> to

  <var>name</var>.

 </ol>

 A <dfn>last CSS style sheet set name</dfn>

 is a concept to determine what <a>CSS style sheet set</a> was last

 <a lt="select a CSS style sheet set">selected</a>. Initially its

 value is null.

 A

 <dfn>preferred CSS style sheet set name</dfn>

 is a concept to determine which

 <a>CSS style sheets</a> need to have their

 <a>disabled flag</a> unset. Initially its value

 is the empty string.

 To

 <dfn>change the preferred CSS style sheet set name</dfn>

 with name <var>name</var>, run these steps:

 <ol>

  <li>Let <var>current</var> be the <a>preferred CSS style sheet set name</a>.

  <li>Set <a>preferred CSS style sheet set name</a> to

  <var>name</var>.

  <li>If <var>name</var> is not a

  <a>case-sensitive</a> match for

  <var>current</var> and

  <a>last CSS style sheet set name</a> is null

  <a>enable a CSS style sheet set</a> with name

  <var>name</var>.

 </ol>

 <!-- XXX ought to define "applied"

 thoughts:

   depends on disabled flag, alternate flag, media queries, sheesh

  -->

 ### The HTTP Default-Style Header ### {#the-http-default-style-header}

 The HTTP <code lt="http-default-style">Default-Style</code> header

 can be used to set the <a>preferred CSS style sheet set name</a>

 influencing which <a>CSS style sheet set</a> is (initially) the

 <a>enabled CSS style sheet set</a>.

 For each HTTP <code lt="http-default-style">Default-Style</code>

 header, in header order, the user agent must

 <a>change the preferred CSS style sheet set name</a> with name being the

 value of the header.

 ### The {{StyleSheetList}} Interface ### {#the-stylesheetlist-interface}

 The {{StyleSheetList}} interface represents an ordered collection of <a>CSS style sheets</a>.

 <pre class=idl>

 [ArrayClass]

 interface StyleSheetList {

   getter StyleSheet? item(unsigned long index);

   readonly attribute unsigned long length;

 };

 </pre>

 The object's <a>supported property indices</a> are the numbers in the range zero to one less than the number of

 <a>CSS style sheets</a> represented by the collection. If there are no such <a>CSS style sheets</a>,

 then there are no <a>supported property indices</a>.

 The <dfn method for=StyleSheetList>item(<var>index</var>)</dfn> method must return the <var>index</var>th <a>CSS style

 sheet</a> in the collection. If there is no <var>index</var>th object in the collection, then the method must return null.

 The <dfn attribute for=StyleSheetList>length</dfn> attribute must return the number of <a>CSS style sheets</a>

 represented by the collection.

 ### Extensions to the {{Document}} Interface ### {#extensions-to-the-document-interface}

 <!--

 //

 // Significant changes since DOM-2 Style:

 //

 //   1. move styleSheets from separate interface (DocumentStyle) to Document

 //   2. addition of selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, and enableStyleSheetsForSet members

 //

 // N.B. HTML4 Section 14.3 "External Style Sheets" introduces the concept of a "group [of] alternate style sheets ... under a single style [sheet set] name",

 // but does not actually use the term "style sheet set". See http://www.w3.org/TR/html401/present/styles.html#h-14.3 for details.

 //

 // N.B. According to HTML4 Section 14.3, a "persistent style sheet ... must apply in addition to any alternate style sheet".

 //

 // N.B. HTML4 Section 14.3 distinguishes the three categories of style sheets as follows:

 //

 //   * persistent - @rel='stylesheet', @title is missing (or empty string?)

 //   * preferred  - @rel='stylesheet', @title is present (and non-empty?)

 //   * alternate  - @rel='alternate stylesheet', @title is present (and non-empty?)

 //

 // Also, HTML5 effectively defines:

 //

 //   * ignored    - @rel='alternate stylesheet', @title is missing (or is empty string?) - in this case, LinkStyle.style must evaluate to null

 //

 // N.B. HTML4 Section 4.3 allows author to specify the default preferred style sheet [set]... [presumably in the case that there are multiple preferred style

 // sheet sets]:

 //

 //   * in content - <META http-equiv="Default-Style" content="compact">

 //   * in http - e.g., using response header - "Default-Style: compact"

 //   * if multiple of the above forms are present, then the LAST one [seen or parsed] takes precedence; HOWEVER, if two or more LINK elements specify preferred

 //     style [sheet sets], the FIRST one present in the document takes precedence;

 //   * preferred style sheets specified using the above (META or HTTP header equivalent) take precedence over those specified with LINK

 //

 // N.B. CSSOM Draft presently employs the term "Style Sheet Collection"

 //

 // Spec Issues:

 //

 //   1. need to specify which style sheets are included in styleSheets, and in which order:

 //

 //      * from Link HTTP header reference

 //      * from <?xml-stylesheet ...?>

 //      * from LINK element, @rel='stylesheet'|'alternate stylesheet'

 //      * from STYLE element

 //

 //   2. for purpose of comparing two titled (named) style sheets, is title (name) compared on case-sensitive or case-insensitive basis

 //

 //   3. CSSOM 6.2 appears to imply that one can create a CSSStyleSheet (or StyleSheet) object and add it to a Document. However, that is not the case; rather

 //      it is necessary to create an HTMLLinkElement or HTMLStyleElement element to indirectly create an empty StyleSheet, then this element can be added to the

 //      Document.

 //

 -->

 <pre class=idl>

 partial interface Document {

   [SameObject] readonly attribute StyleSheetList styleSheets;

   attribute DOMString? selectedStyleSheetSet;

   readonly attribute DOMString? lastStyleSheetSet;

   readonly attribute DOMString? preferredStyleSheetSet;

   readonly attribute FrozenArray<DOMString> styleSheetSets;

   void enableStyleSheetsForSet(DOMString? name);

 };

 </pre>

 The <dfn attribute for=Document>styleSheets</dfn> attribute must return a {{StyleSheetList}} collection representing

 the <a>document CSS style sheets</a>.

 Note: Because of historical IDL limitations the {{Document/styleSheets}} attribute

 used to be on a separate interface, <code>DocumentStyle</code>.

 The <dfn attribute for=Document>selectedStyleSheetSet</dfn> attribute, on getting, must run these steps:

 <ol>

  <li>If there is a single <a>enabled CSS style sheet set</a> and no

  other <a>document CSS style sheets</a> with a

  <a>title</a> that is not the empty string have the

  <a>disabled flag</a> unset, return the

  <a>CSS style sheet set name</a> of the

  <a>enabled CSS style sheet set</a> and terminate these steps.

  <li>Otherwise, if <a>CSS style sheets</a> from

  different <a lt="CSS style sheet set">CSS style sheet sets</a> have

  their <a>disabled flag</a> unset, return

  null and terminate these steps.

  <li>

   Otherwise, return the empty string.

   Note: At this point either all

   <a>CSS style sheets</a> with a

   <a>title</a> that is not the empty string have the

   <a>disabled flag</a> set, or there are no such

   <a>CSS style sheets</a>.

 </ol>

 On setting the

 {{Document/selectedStyleSheetSet}}

 attribute these steps must be run:

 <ol>

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

  <li>Otherwise, <a>select a CSS style sheet set</a> with the name being the

  value passed.

 </ol>

 From the DOM's perspective, all views have the same

 {{Document/selectedStyleSheetSet}}.

 If a user agent supports multiple views with different selected

 alternative style sheets, then this attribute (and the

 {{StyleSheet}} interface's

 {{StyleSheet/disabled}} attribute)

 must return and set the value for the default

 view.

 The <dfn attribute for=Document>lastStyleSheetSet</dfn> attribute must return the <a>last CSS style sheet set name</a>.

 Note: This attribute is initially null.

 The <dfn attribute for=Document>preferredStyleSheetSet</dfn> attribute must return the <a>preferred CSS style sheet set

 name</a>.

 Note: Unlike {{Document/lastStyleSheetSet}},

 this attribute is initially the empty string.

 The <dfn attribute for=Document>styleSheetSets</dfn> attribute must return a frozen array of the

 <a lt="CSS style sheet set name">CSS style sheet set names</a> of the <a lt="CSS style sheet set">CSS style sheet sets</a>, in order of the

 <a>document CSS style sheets</a>. The array is live; if the <a>document CSS style sheets</a> change, the array must be updated as appropriate.

 The <dfn method for=Document>enableStyleSheetsForSet(<var>name</var>)</dfn> method must, when invoked, run these

 steps:

 <ol>

  <li>If <var>name</var> is null terminate these steps.

  <li><a>enable a CSS style sheet set</a> with name <var>name</var>.

 </ol>

 Note: <a>CSS style sheets</a> with a

 <a>title</a> that is the empty string are never affected by this method.

 This method does not change the values of the

 {{Document/lastStyleSheetSet}} or

 {{Document/preferredStyleSheetSet}} attributes.

 ### Interaction with the User Interface ### {#interaction-with-the-user-interface}

 The user interface of Web browsers that support style sheets

 should list the style sheet titles given in the

 <code lt="dom-Document-styleSheetSets">styleSheetSets</code> list,

 showing the

 <code lt="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</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 lt="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>

 is the empty string as well.

 Selecting a style sheet from this list should

 use the <a>select a CSS style sheet set</a> set of steps. This

 (by definition) affects the

 <code lt="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>

 attribute.

 #### Persisting the selected CSS style sheet set #### {#persisting-the-selected-css-style-sheet-set}

 If a user agent persist the <a lt="select a CSS style sheet set">selected</a> <a>CSS style sheet set</a>, it should use

 the value of the

 <code lt="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>

 attribute, or if that is null, the

 <code lt="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>

 attribute, when leaving the page (or at some other time) to determine the

 set name to store. If that is null then the <a>CSS style sheet set</a> should not be

 persisted.

 When re-setting the <a>CSS style sheet set</a> to the persisted value (which can

 happen at any time, typically at the first time the <a>CSS style sheets</a> 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 <a>CSS style sheet set</a>

 should be set by using the

 <a>select a CSS style sheet set</a> set of steps as if the user had

 selected the <a>CSS style sheet set</a> manually.

 Note: This specification does not give any suggestions on

 how user agents are to decide to persist the <a>CSS style sheet set</a> or whether or

 how to persist the <a lt="select a CSS style sheet set">selected</a> <a>CSS style sheet set</a> across pages.

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

      idioms -->

 ### Examples ### {#css-style-sheet-collections-examples}

 <div class="example">

  Thus, in the following HTML snippet:

  <pre>

  <link rel="alternate stylesheet" lt="foo" href="a">

  <link rel="alternate stylesheet" lt="bar" href="b">

  <script>

    document.selectedStyleSheetSet = 'foo';

    document.styleSheets[1].disabled = false;

  </script>

  <link rel="alternate stylesheet" lt="foo" href="c">

  <link rel="alternate stylesheet" lt="bar" href="d">

  </pre>

  ...the style sheets that end up enabled are style sheets "a", "b",

  and "c", the

  <code lt="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>

  attribute would return null,

  <code lt="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code>

  would return "foo", and

  <code lt="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>

  would return the empty string.

  Similarly, in the following HTML snippet:

  <pre>

  <link rel="alternate stylesheet" lt="foo" href="a">

  <link rel="alternate stylesheet" lt="bar" href="b">

  <script>

    var before = document.preferredStyleSheetSet;

    document.styleSheets[1].disabled = false;

  </script>

  <link rel="stylesheet" lt="foo" href="c">

  <link rel="alternate stylesheet" lt="bar" href="d">

  <script>

    var after = document.preferredStyleSheetSet;

  </script>

  </pre>

  ...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 lt="dom-Document-preferredStyleSheetSet">preferredStyleSheetSet</code>

  is set and the

  <code lt="dom-Document-enableStyleSheetsForSet()">enableStyleSheetsForSet()</code>

  method is called (since

  <code lt="dom-Document-selectedStyleSheetSet">selectedStyleSheetSet</code>

  was never set

  explicitly, leaving

  <code lt="dom-Document-lastStyleSheetSet">lastStyleSheetSet</code> at

  null throughout), which changes which style sheets are enabled and which

  are not.

 </div>

 Style Sheet Association {#style-sheet-association}

 --------------------------------------------------

 This section defines the interface an

 <a for=CSSStyleSheet>owner node</a> of a <a>CSS style sheet</a> has to

 implement and defines the requirements for

 <a>xml-stylesheet processing instructions</a>

 and HTTP <code>Link</code> headers when the link

 relation type is an

 <a>ASCII case-insensitive</a> match for

 "<code>stylesheet</code>" since nobody else was interested in

 defining this.

 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.

 ### Fetching CSS style sheets ### {#fetching-css-style-sheets}

 To <dfn>fetch a CSS style sheet</dfn> with parsed URL <var>parsed URL</var>, referrer <var>referrer</var>, document

 <var>document</var>, optionally a set of parameters <var>parameters</var> (used as input to creating a

 <a>request</a>), follow these steps:

 <ol>

  <li>Let <var>origin</var> be <var>document</var>'s <a>origin</a>.

  <li>Let <var>request</var> be a new <a>request</a>, with the

  <a for=request>url</a> <var>parsed URL</var>,

  <a for=request>origin</a> <var>origin</var>,

  <a for=request>referrer</a> <var>referrer</var>, and if specified the set of parameters <var>parameters</var>.

  <li>Let <var>response</var> be the result of <a>fetching</a> <var>request</var>.

  <li>Wait until <var>response</var> is available.

  <li>If <var>response</var> is a <a>network error</a>, return an error.

  <li>If <var>document</var> is in <a>quirks mode</a>, <var>response</var> is

  <a>CORS-same-origin</a><!--XXX xref--> and the <a>Content-Type metadata</a> of <var>response</var> is not a

  <a>supported styling language</a> change the <a>Content-Type metadata</a> of <var>response</var> to

  <code>text/css</code>.

  <li>If <var>response</var> is not in a <a>supported styling language</a> return an error.

  <li>Return <var>response</var>.

 </ol>

 ### The {{LinkStyle}} Interface ### {#the-linkstyle-interface}

 The <dfn>associated CSS style sheet</dfn> of a node is the <a>CSS style sheet</a> in the list of

 <a>document CSS style sheets</a> of which the <a for=CSSStyleSheet>owner node</a> implements the {{LinkStyle}}

 interface.

 <pre class=idl>

 [NoInterfaceObject]

 interface LinkStyle {

   readonly attribute StyleSheet? sheet;

 };

 </pre>

 The <dfn attribute for=LinkStyle>sheet</dfn> attribute must return the <a>associated CSS style sheet</a> for the node or null

 if there is no <a>associated CSS style sheet</a>.

 <div class="example">

  In the following fragment, the first <{style}>

  element has a {{LinkStyle/sheet}} attribute that returns a

  {{StyleSheet}} object representing the style sheet, but for

  the second <{style}> element, the {{LinkStyle/sheet}} attribute returns null,

  assuming the user agent supports CSS (<code>text/css</code>), but does

  not support the (hypothetical) ExampleSheets (<code>text/example-sheets</code>).

  <pre>

  <style type="text/css">

    body { background:lime }

  </style>

  </pre>

  <pre>

  <style type="text/example-sheets">

    $(body).background := lime

  </style>

  </pre>

 </div>

 Note: Whether or not the node refers to a style sheet is defined

 by the specification that defines the semantics of said node.

 ### Requirements on specifications ### {#requirements-on-specifications}

 Specifications introducing new ways of associating style sheets through

 the DOM should define which nodes implement the

 {{LinkStyle}} interface. When doing so, they

 must also define when a <a>CSS style sheet</a> is

 <a lt="create a CSS style sheet">created</a>.

 ### Requirements on User Agents Implementing the xml-stylesheet processing instruction ### {#requirements-on-user-agents-implementing-the-xml-stylesheet-processing-instruction}

 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

 <pre class="idl">ProcessingInstruction implements LinkStyle;</pre>

 The <dfn>prolog</dfn> refers to <a>nodes</a> that are children of the

 <a>document</a> and are not <a>following</a> the

 {{Element}} child of the <a>document</a>, if any.

 When a <code>ProcessingInstruction</code> <a>node</a> <var>node</var> becomes part of the

 <a>prolog</a>, is no longer part of the <a>prolog</a>, or has its <a>data</a> changed, these steps

 must be run:

 <ol>

  <li>If an instance of this algorithm is currently running for <var>node</var>, abort that instance, and stop the associated

  <a>fetching</a> if applicable.

  <li>If <var>node</var> has an <a>associated CSS style sheet</a>, <a lt="remove a CSS style sheet">remove</a> it.

  <li>If <var>node</var> is not an <a>xml-stylesheet processing instruction</a>, terminate these steps.

  <li>If <var>node</var> does not have an <code>href</code> <a>pseudo-attribute</a>, terminate these steps.

  <li>Let <var>title</var> be the value of the

  <code>title</code> <a>pseudo-attribute</a> or the empty string if the

  <code>title</code> <a>pseudo-attribute</a> is not specified.

  <li>If there is an <code>alternate</code> <a>pseudo-attribute</a>

  whose value is a <a>case-sensitive</a> match

  for "<code>yes</code>" and <var>title</var> is the

  empty string terminate these steps.

  <li>If there is a <code>type</code> <a>pseudo-attribute</a> whose

  value is not a <a>supported styling language</a> the user agent

  may terminate these steps.

  <li>Let <var>input URL</var> be the value specified by the

  <code>href</code> <a>pseudo-attribute</a>.

  <li>Let <var>document</var> be <var>node</var>'s <a>node document</a>

  <li>Let <var>base URL</var> be <var>document</var>'s <a>document base URL</a>.

  <li>Let <var>referrer</var> be <var>document</var>'s <a lt="document URL">address</a>.

  <li>Let <var>parsed URL</var> be the return value of invoking the <a>URL parser</a> with the

  string <var>input URL</var> and the base URL <var>base URL</var>.

  <li>If <var>parsed URL</var> is failure, terminate these steps.

  <li>Let <var>response</var> be the result of <a lt="fetch a CSS style sheet">fetching a CSS style sheet</a> with parsed URL <var>parsed URL</var>,

  referrer <var>referrer</var> and document <var>document</var>.

  <li>If <var>response</var> is an error, terminate these steps.

  <li>

   <a>Create a CSS style sheet</a> with the following properties:

   <dl>

    <dt><a>location</a>

    <dd>The result of invoking the <a>URL serializer</a> with <var>parsed URL</var>.

    <dt><a for=CSSStyleSheet>parent CSS style sheet</a>

    <dd>null.

    <dt><a for=CSSStyleSheet>owner node</a>

    <dd><var>node</var>.

    <dt><a for=CSSStyleSheet>owner CSS rule</a>

    <dd>null.

    <dt><a>media</a>

    <dd>The value of the <code>media</code> <a>pseudo-attribute</a>

    if any, or the empty string otherwise.

    <dt><a>title</a>

    <dd><var>title</var>.

    <dt><a>alternate flag</a>

    <dd>Set if the <code>alternate</code> <a>pseudo-attribute</a>

    value is a <a>case-sensitive</a> match for

    "<code>yes</code>", or unset otherwise.

    <dt><a>origin-clean flag</a>

    <dd>Set if <var>response</var> is <a>CORS-same-origin</a><!--XXX xref-->, or unset otherwise.

   </dl>

   The CSS <a>environment encoding</a> is the result of running the following steps:

   <ol>

    <li>If the element has a <code>charset</code>

    <a>pseudo-attribute</a>,

    <a>get an encoding</a> from that pseudo-attribute's value.

    If that succeeds, return the resulting encoding and abort these steps.

    <li>Otherwise, return the <a lt="encoding" for="Document">document's character encoding</a>.

    [[!DOM]]

   </ol>

 </ol>

 A style sheet referenced by an <a>xml-stylesheet processing instruction</a> using the rules in this section, in the context of

 the {{Document}} of an <a>XML parser</a> is said to be

 <a>a style sheet that is blocking scripts</a> if the <code>ProcessingInstruction</code>

 <a>node</a> was created by that {{Document}}'s parser, and the style sheet was

 enabled when the node was created by the parser, and the <a>style sheet ready</a> flag is not yet set, and, the last time the

 <a>event loop</a> reached step 1, the node was in that Document, and the user agent hasn't given up on that particular style sheet

 yet. A user agent may give up on such a style sheet at any time.

 ### Requirements on User Agents Implementing the HTTP Link Header ### {#requirements-on-user-agents-implementing-the-http-link-header}

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

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

 <p class=atrisk>For each HTTP <code>Link</code> header of which one

 of the link relation types is an

 <a>ASCII case-insensitive</a> match

 for "<code>stylesheet</code>" these steps

 must be run:

 <ol>

  <li>Let <var>title</var> be the value of the first of all the

  <code>title</code> parameters.

  If there are no such parameters it is the empty string.

  <li>If one of the (other) link relation types is an

  <a>ASCII case-insensitive</a> match for

  "<code>alternate</code>" and <var>title</var> is the

  empty string terminate these steps.

  <li>Let <var>input URL</var> be the value specified.

  Issue: Be more specific

  <li>Let <var>base URL</var> be the document's <a>document base URL</a>.

  Issue: Is there a document at this point?

  <li>Let <var>referrer</var> be the document's <a lt="document URL">address</a>.

  <li>Let <var>origin</var> be the document's <a>origin</a>.

  <li>Let <var>parsed URL</var> be the return value of invoking the <a>URL parser</a> with the

  string <var>input URL</var> and the base URL <var>base URL</var>.

  <li>If <var>parsed URL</var> is failure, terminate these steps.

  <li>Let <var>response</var> be the result of <a lt="fetch a CSS style sheet">fetching a CSS style sheet</a> with parsed URL <var>parsed URL</var>,

  referrer <var>referrer</var> and document being the document.

  Issue: What if the HTML parser hasn't decided on quirks/non-quirks yet?

  <li>

   <a>Create a CSS style sheet</a> with the following properties:

   <dl>

    <dt><a>location</a>

    <dd>The result of invoking the <a>URL serializer</a> with <var>parsed URL</var>.

    <dt><a for=CSSStyleSheet>owner node</a>

    <dd>null.

    <dt><a for=CSSStyleSheet>parent CSS style sheet</a>

    <dd>null.

    <dt><a for=CSSStyleSheet>owner CSS rule</a>

    <dd>null.

    <dt><a>media</a>

    <dd>The value of the first <code>media</code> parameter.

    <!-- XXX register media parameter? bah -->

    <dt><a>title</a>

    <dd><var>title</var>.

    <dt><a>alternate flag</a>

    <dd>Set if one of the specified link relation type for this HTTP

    <code>Link</code> header is an

    <a>ASCII case-insensitive</a> match for

    "<code>alternate</code>", or false otherwise.

    <dt><a>origin-clean flag</a>

    <dd>Set if <var>response</var> is <a>CORS-same-origin</a><!--XXX xref-->, or unset otherwise.

   </dl>

 </ol>

 A style sheet referenced by a HTTP <code>Link</code> header using the rules in this section is said to be <a>a style sheet

 that is blocking scripts</a> if the style sheet was enabled when created, and the <a>style sheet ready</a> flag is not yet set,

 and the user agent hasn't given up on that particular style sheet yet. A user agent may give up on such a style sheet at any time.

 CSS Rules {#css-rules}

 ----------------------

 A <dfn>CSS rule</dfn> is an abstract concept that

 denotes a rule as defined by the CSS specification. A

 <a for=/>CSS rule</a> is represented as an object that implements a subclass of

 the {{CSSRule}} interface, and which has the following

 associated state items:

 <dl dfn-for="CSSRule">

 <dt><dfn id=concept-css-rule-type>type</dfn>

 <dd>A non-negative integer associated with a particular type of rule.

 This item is initialized when a rule is created and cannot change.

 <dt><dfn id=concept-css-rule-text>text</dfn>

 <dd>A text representation of the rule suitable for direct use in a style sheet.

 This item is initialized when a rule is created and can be changed.

 <dt><dfn id=concept-css-rule-parent-css-rule>parent CSS rule</dfn>

 <dd>A reference to an enclosing <a for=/>CSS rule</a> or null.

 If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null. It can be changed to

 null.

 <dt><dfn id=concept-css-rule-parent-css-style-sheet>parent CSS style sheet</dfn>

 <dd>A reference to a parent <a>CSS style sheet</a> or null.

 This item is initialized to reference an associated style sheet when the rule is created. It can be changed to null.

 <dt><dfn id=concept-css-rule-child-css-rules>child CSS rules</dfn>

 <dd>A list of child <a for=/>CSS rules</a>. The list can be mutated.

 </dl>

 In addition to the above state, each <a for=/>CSS rule</a> may be associated

 with other state in accordance with its <a for=CSSRule>type</a>.

 To <dfn>parse a CSS rule</dfn> from a string <var>string</var>, run the following steps:

 <ol>

  <li>Let <var>rule</var> be the return value of invoking <a>parse a rule</a> with <var>string</var>.

  <li>If <var>rule</var> is a syntax error, return <var>rule</var>.

  <li>Let <var>parsed rule</var> be the result of parsing <var>rule</var> according to the appropriate CSS specifications, dropping parts that are said to be

  ignored. If the whole style rule is dropped, return a syntax error.

  <li>Return <var>parsed rule</var>.

 </ol>

 To <dfn>serialize a CSS rule</dfn>, perform one of the following in accordance with the <a for=/>CSS rule</a>'s

 <a for=CSSRule>type</a>:

 <dl class="switch">

  <dt>{{CSSStyleRule}}

  <dd>

   The result of concatenating the following:

   <ol>

    <li>The result of performing <a>serialize a group of selectors</a> on the rule's associated selectors.

    <li>The string "<code> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),

    followed by a single SPACE (U+0020).

    <li>The result of performing <a>serialize a CSS declaration block</a> on the rule's associated declarations.

    <li>If the rule is associated with one or more declarations, the string "<code> </code>", i.e., a single SPACE (U+0020).

    <li>The string "<code>}</code>", RIGHT CURLY BRACKET (U+007D).

   </ol>

  <dt>{{CSSImportRule}}

  <dd>

   The result of concatenating the following:

   <ol>

    <li>The string "<code>@import</code>" followed by a single SPACE (U+0020).

    <li>The result of performing <a>serialize a URL</a> on the rule's location.

    <li>If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the

    result of performing <a>serialize a media query list</a> on the media list.

    <li>The string "<code>;</code>", i.e., SEMICOLON (U+003B).

   </ol>

   <div class="example">

   <pre>@import url("import.css");</pre>

   <pre>@import url("print.css") print;</pre>

   </div>

  <dt>{{CSSMediaRule}}

  <dd>Issue: ...

  <dt>{{CSSFontFaceRule}}

  <dd>Issue: ...

  <dt>{{CSSPageRule}}

  <dd>Issue: ...

  <dt>{{CSSNamespaceRule}}

  <dd>The literal string "<code>@namespace</code>", followed by a single SPACE

  (U+0020), followed by the

  <a lt="serialize an identifier">identifier escaped</a> value of the

  <code lt="dom-CSSNamespaceRule-prefix">prefix</code> attribute (if

  any), followed by a single SPACE (U+0020) if there is a prefix, followed by the

  <a lt="serialize a URL">URL escaped</a> value of the

  <code lt="dom-CSSNamespaceRule-namespaceURI">namespaceURI</code>

  attribute, followed the character "<code>;</code>" (U+003B).

 </dl>

 To <dfn>insert a CSS rule</dfn> <var>rule</var> in a CSS rule list <var>list</var> at index <var>index</var>, follow these steps:

 <ol>

  <li>Set <var>new rule</var> to the results of performing <a>parse a CSS rule</a>

  on argument <var>rule</var>.

  <li>If <var>new rule</var> is a syntax error, <a>throw</a>

  a {{SyntaxError}} exception.

  <li>Set <var>length</var> to the number of items in <var>list</var>.

  <li>If <var>index</var> is greater than <var>length</var>, then <a>throw</a>

  an {{IndexSizeError}} exception.

  <li>If <var>new rule</var> cannot be inserted into <var>list</var> at the zero-index position <var>index</var> due to constraints

  specified by CSS, then <a>throw</a>

  a {{HierarchyRequestError}} exception. [[!CSS21]]

  Note: For example, a CSS style sheet cannot contain an <code>@import</code> at-rule after a style rule.

  <li>If <var>new rule</var> is an <code>@namespace</code> at-rule, and <var>list</var> contains anything other than

  <code>@import</code> at-rules, and <code>@namespace</code> at-rules,

  <a>throw</a> an {{InvalidStateError}} exception.

  <li>Insert <var>new rule</var> into <var>list</var> at the zero-indexed position <var>index</var>.

  <li>Return <var>index</var>.

 </ol>

 To <dfn>remove a CSS rule</dfn> from a CSS rule list <var>list</var> at index <var>index</var>, follow these steps:

 <ol>

  <li>Set <var>length</var> to the number of items in <var>list</var>.

  <li>If <var>index</var> is greater than or equal to <var>length</var>, then <a>throw</a>

  an {{IndexSizeError}} exception.

  <li>Set <var>old rule</var> to the <var>index</var>th item in <var>list</var>.

  <li>If <var>old rule</var> is an <code>@namespace</code> at-rule, and <var>list</var> contains anything other than

  <code>@import</code> at-rules, and <code>@namespace</code> at-rules,

  <a>throw</a> an {{InvalidStateError}} exception.

  <li>Remove rule <var>old rule</var> from <var>list</var> at the zero-indexed position <var>index</var>.

  <li>Set <var>old rule</var>'s <a for=CSSRule>parent CSS rule</a> and

  <a for=CSSRule>parent CSS style sheet</a> to null.

 </ol>

 ### The {{CSSRuleList}} Interface ### {#the-cssrulelist-interface}

 The {{CSSRuleList}} interface represents an ordered collection of CSS style rules.

 <pre class=idl>

 [ArrayClass]

 interface CSSRuleList {

   getter CSSRule? item(unsigned long index);

   readonly attribute unsigned long length;

 };

 </pre>

 The object's <a>supported property indices</a> are the numbers in the range zero to one less than the number of

 {{CSSRule}} objects represented by the collection. If there are no such {{CSSRule}} objects, then there are no

 <a>supported property indices</a>.

 The <dfn method for=CSSRuleList>item(<var>index</var>)</dfn> method must return the <var>index</var>th {{CSSRule}}

 object in the collection. If there is no <var>index</var>th object in the collection, then the method must return null.

 The <dfn attribute for=CSSRuleList>length</dfn> attribute must return the number of {{CSSRule}} objects represented by the

 collection.

 ### The {{CSSRule}} Interface ### {#the-cssrule-interface}

 <!--

 //

 // All members defined since DOM-2 Style. The only differences are:

 //

 //   1. removal of UNKNOWN_RULE = 0 constant

 //   2. addition of NAMESPACE_RULE = 10 constant

 //   3. removal of commented raises(DOMException) on setting cssText

 //

 -->

 The {{CSSRule}} interface represents an abstract, base CSS style rule. Each

 distinct CSS style rule type is represented by a distinct interface that

 inherits from this interface.

 <pre class=idl>

 interface CSSRule {

   const unsigned short STYLE_RULE = 1;

   const unsigned short CHARSET_RULE = 2; // historical

   const unsigned short IMPORT_RULE = 3;

   const unsigned short MEDIA_RULE = 4;

   const unsigned short FONT_FACE_RULE = 5;

   const unsigned short PAGE_RULE = 6;

   const unsigned short MARGIN_RULE = 9;

   const unsigned short NAMESPACE_RULE = 10;

   readonly attribute unsigned short type;

   attribute DOMString cssText;

   readonly attribute CSSRule? parentRule;

   readonly attribute CSSStyleSheet? parentStyleSheet;

 };

 </pre>

 The <dfn attribute for=CSSRule>type</dfn> attribute must return the CSS rule type, as follows:

 <dl class=switch>

  <dt>If the object is a {{CSSStyleRule}}

  <dd>Return <dfn const for=CSSRule>STYLE_RULE</dfn> (numeric value 1).

  <dt>If the object is a {{CSSImportRule}}

  <dd>Return <dfn const for=CSSRule>IMPORT_RULE</dfn> (numberic value 3).

  <dt>If the object is a {{CSSMediaRule}}

  <dd>Return <dfn const for=CSSRule>MEDIA_RULE</dfn> (numeric value 4).

  <dt>If the object is a {{CSSFontFaceRule}}

  <dd>Return <dfn const for=CSSRule>FONT_FACE_RULE</dfn> (numeric value 5).

  <dt>If the object is a {{CSSPageRule}}

  <dd>Return <dfn const for=CSSRule>PAGE_RULE</dfn> (numeric value 6).

  <dt>If the object is a {{CSSMarginRule}}

  <dd>Return <dfn const for=CSSRule>MARGIN_RULE</dfn> (numeric value 9).

  <dt>If the object is a {{CSSNamespaceRule}}

  <dd>Return <dfn const for=CSSRule>NAMESPACE_RULE</dfn> (numeric value 10).

  <dt>Otherwise

  <dd>Return a value defined on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSOM Constants</a> wiki page.

 </dl>

 Note: The value 0, formerly known as <code>UNKNOWN_RULE</code>, is made

 obsolete by this specification. This value will not be re-allocated in the future and will remain reserved.

 The <dfn attribute for=CSSRule>cssText</dfn> attribute must return a <a lt="serialize a CSS rule">serialization</a> of the

 <a for=/>CSS rule</a>.

 On setting the {{CSSRule/cssText}} attribute these steps must be run:

 <ol>

  <li>Let <var>new rule</var> be the returned value of <a lt="parse a CSS rule">parsing</a> the value.

  <li>If <var>new rule</var> is a syntax error, terminate this algorithm.

  <li>If the <a for=CSSRule>type</a> of <var>new rule</var> does not match the <a for=CSSRule>type</a> of

  the current object

  <a>throw</a> an

  {{InvalidModificationError}} exception.

  <li>Replace the current object with <var>new rule</var>.

 </ol>

 The <dfn attribute for=CSSRule>parentRule</dfn> attribute must return the <a for=CSSRule>parent CSS

 rule</a>.

 Note: For example, <code>@media</code> can enclose a rule, in which case {{CSSRule/parentRule}} would

 be non-null; in cases where there is no enclosing rule, {{CSSRule/parentRule}} will be null.

 The <dfn attribute for=CSSRule>parentStyleSheet</dfn> attribute must return the

 <a for=CSSRule>parent CSS style sheet</a>.

 Note: The only circumstance where null is returned when a rule has been <a lt="remove a CSS rule">removed</a>.

 Note: Removing a <code>Node</code> that implements the <code>LinkStyle</code> interface from a

 {{Document}} instance does not (by itself) cause the <code>CSSStyleSheet</code> referenced by a <code>CSSRule</code> to be

 unreachable.

 ### The {{CSSStyleRule}} Interface ### {#the-cssstylerule-interface}

 <!--

 //

 // All members defined since DOM-2 Style. The only differences are:

 //

 //   1. removal of commented raises(DOMException) on setting selectorText

 //

 -->

 The <code>CSSStyleRule</code> interface represents a style rule.

 Note: CSS 2.1 calls style rule <a href="http://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule sets</a>.

 <pre class=idl>

 interface CSSStyleRule : CSSRule {

   attribute DOMString selectorText;

   [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;

 };

 </pre>

 The <dfn attribute for=CSSStyleRule>selectorText</dfn> attribute, on getting, must return the result of

 <a lt="serialize a group of selectors">serializing</a> the associated <a>group of selectors</a>.

 On setting the {{CSSStyleRule/selectorText}} attribute these steps must be run:

 <ol>

  <li>Run the <a>parse a group of selectors</a> algorithm on the given value.

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

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

 </ol>

 The <dfn attribute for=CSSStyleRule>style</dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the style rule, with the

 following properties:

 <dl>

  <dt><a for="CSSStyleDeclaration">readonly flag</a>

  <dd>Unset.

  <dt><a for="CSSStyleDeclaration">declarations</a>

  <dd>The declared declarations in the rule, in <a>specified order</a>.

  <dt><a for="CSSStyleDeclaration">parent CSS rule</a>

  <dd>The <a>context object</a>.

  <dt><a for="CSSStyleDeclaration">owner node</a>

  <dd>Null.

 </dl>

 The <dfn id=concept-declarations-specified-order>specified order</dfn> for declarations is the same as specified, but with shorthand properties

 expanded into their longhand properties, in canonical order. If a property is specified more than once (after shorthand expansion), only the

 one with greatest cascading order must be represented, at the same relative position as it was specified. [[!CSS3CASCADE]]

 ### The {{CSSImportRule}} Interface ### {#the-cssimportrule-interface}

 The <code>CSSImportRule</code> interface represents an <code>@import</code> at-rule.

 <pre class=idl>

 interface CSSImportRule : CSSRule {

   readonly attribute DOMString href;

   [SameObject, PutForwards=mediaText] readonly attribute MediaList media;

   [SameObject] readonly attribute CSSStyleSheet styleSheet;

 };

 </pre>

 The <dfn attribute for=CSSImportRule>href</dfn> attribute must return the <a for="/">URL</a> specified by

 the <code>@import</code> at-rule.

 Note: To get the resolved <a for="/">URL</a> use the {{StyleSheet/href}}

 attribute of the associated <a>CSS style sheet</a>.

 The <dfn attribute for=CSSImportRule>media</dfn> attribute must return the value of the {{StyleSheet/media}}

 attribute of the associated <a>CSS style sheet</a>.

 The <dfn attribute for=CSSImportRule>styleSheet</dfn> attribute must return the associated <a>CSS style sheet</a>.

 Note: If loading of the style sheet fails its <a for=CSSStyleSheet>CSS rules</a>

 list is simply empty, i.e., an <code>@import</code> at-rule always has an associated <a>CSS style sheet</a>.

 ### The {{CSSGroupingRule}} Interface ### {#the-cssgroupingrule-interface}

 The <code>CSSGroupingRule</code> interface represents an at-rule that contains other rules nested inside itself.

 <pre class=idl>

 interface CSSGroupingRule : CSSRule {

   [SameObject] readonly attribute CSSRuleList cssRules;

   unsigned long insertRule(DOMString rule, unsigned long index);

   void deleteRule(unsigned long index);

 };

 </pre>

 The <dfn attribute for=CSSGroupingRule>cssRules</dfn> attribute must return a <code>CSSRuleList</code> object for the

 <a for=CSSRule>child CSS rules</a>.

 The <dfn method for=CSSGroupingRule>insertRule(<var>rule</var>, <var>index</var>)</dfn> method must return the result of

 invoking <a>insert a CSS rule</a> <var>rule</var> into the <a for=CSSRule>child CSS rules</a> at

 <var>index</var>.

 The <dfn method for=CSSGroupingRule>deleteRule(<var>index</var>)</dfn> method must <a>remove a CSS rule</a> from the

 <a for=CSSRule>child CSS rules</a> at <var>index</var>.

 ### The {{CSSMediaRule}} Interface ### {#the-cssmediarule-interface}

 The <code>CSSMediaRule</code> interface represents an <code>@media</code> at-rule.

 <pre class=idl>

 interface CSSMediaRule : CSSGroupingRule {

   [SameObject, PutForwards=mediaText] readonly attribute MediaList media;

 };

 </pre>

 The <dfn attribute for=CSSGroupingRule>media</dfn> attribute must return a <code>MediaList</code> object for the list of media queries specified

 with the <code>@media</code> at-rule.

 ### The {{CSSPageRule}} Interface ### {#the-csspagerule-interface}

 The <code>CSSPageRule</code> interface represents an <code>@page</code> at-rule.

 Issue: Need to define the rules for

 <dfn>parse a list of CSS page selectors</dfn> and

 <dfn>serialize a list of CSS page selectors</dfn>.

 <pre class=idl>

 interface CSSPageRule : CSSGroupingRule {

            attribute DOMString selectorText;

   [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;

 };

 </pre>

 The <dfn attribute for=CSSGroupingRule>selectorText</dfn> attribute, on getting, must return the result of

 <a lt="serialize a list of CSS page selectors">serializing</a> the associated <a>list of CSS page selectors</a>.

 On setting the {{CSSPageRule/selectorText}} attribute  these steps must be run:

 <ol>

  <li>Run the <a>parse a list of CSS page selectors</a> algorithm on the given value.

  <li>If the algorithm returns a non-null value replace the associated <a>list of CSS page selectors</a> with the returned value.

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

 </ol>

 The <dfn attribute for=CSSGroupingRule>style</dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the

 <code>@page</code> at-rule, with the following properties:

 <dl>

  <dt><a for="CSSStyleDeclaration">readonly flag</a>

  <dd>Unset.

  <dt><a for="CSSStyleDeclaration">declarations</a>

  <dd>The declared declarations in the rule, in <a>specified order</a>.

  <dt><a for="CSSStyleDeclaration">parent CSS rule</a>

  <dd>The <a>context object</a>.

  <dt><a for="CSSStyleDeclaration">owner node</a>

  <dd>Null.

 </dl>

 ### The {{CSSMarginRule}} Interface ### {#the-cssmarginrule-interface}

 The <code>CSSMarginRule</code> interface represents a margin at-rule (e.g. <code>@top-left</code>) in an <code>@page</code> at-rule.

 [[!CSS3PAGE]]

 <pre class=idl>

 interface CSSMarginRule : CSSRule {

   readonly attribute DOMString name;

   [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;

 };

 </pre>

 The <dfn attribute for=CSSMarginRule>name</dfn> attribute must return the name of the margin at-rule. The <code>@</code> character is not

 included in the name. [[!CSS3SYN]]

 The <dfn attribute for=CSSMarginRule>style</dfn> attribute must return a <code>CSSStyleDeclaration</code> object for the

 margin at-rule, with the following properties:

 <dl>

  <dt><a for="CSSStyleDeclaration">readonly flag</a>

  <dd>Unset.

  <dt><a for="CSSStyleDeclaration">declarations</a>

  <dd>The declared declarations in the rule, in <a>specified order</a>.

  <dt><a for="CSSStyleDeclaration">parent CSS rule</a>

  <dd>The <a>context object</a>.

  <dt><a for="CSSStyleDeclaration">owner node</a>

  <dd>Null.

 </dl>

 ### The {{CSSNamespaceRule}} Interface ### {#the-cssnamespacerule-interface}

 The <code>CSSNamespaceRule</code> interface represents an <code>@namespace</code> at-rule.

 <pre class=idl>

 interface CSSNamespaceRule : CSSRule {

   readonly attribute DOMString namespaceURI;

   readonly attribute DOMString prefix;

 };

 </pre>

 The <dfn attribute for=CSSNamespaceRule>namespaceURI</dfn> attribute must return the namespace of the

 <code>@namespace</code> at-rule.

 The <dfn attribute for=CSSNamespaceRule>prefix</dfn> attribute must return the prefix of the <code>@namespace</code> at-rule or the

 empty string if there is no prefix.

 CSS Declarations {#css-declarations}

 ------------------------------------

 A <dfn>CSS declaration</dfn> is an abstract concept that is not exposed as an object in the DOM. A <a>CSS declaration</a> has the following associated

 properties:

 <dl>

  <dt><dfn for="CSS declaration">property name</dfn>

  <dd>The property name of the declaration.

  <dt><dfn for="CSS declaration">value</dfn>

  <dd>The value of the declaration represented as a list of component values.

  <dt><dfn for="CSS declaration">important flag</dfn>

  <dd>Either set or unset. Can be changed.

  <dt><dfn for="CSS declaration">case-sensitive flag</dfn>

  <dd>Set if the <a for="CSS declaration">property name</a> is defined to be case-sensitive according to its specification,

  otherwise unset.

 </dl>

 CSS Declaration Blocks {#css-declaration-blocks}

 ------------------------------------------------

 A <dfn>CSS declaration block</dfn> is an ordered collection of CSS

 properties with their associated values, also named <a>CSS declarations</a>. In

 the DOM a <a>CSS declaration block</a> is a

 <code>CSSStyleDeclaration</code> object. A

 <a>CSS declaration block</a> has the following associated properties:

 <dl dfn-for="CSSStyleDeclaration">

  <dt><dfn>readonly flag</dfn>

  <dd>Unset if the object can be manipulated. Set if it can not be

  manipulated. Unless otherwise stated it is unset.

  <dt><dfn>declarations</dfn>

  <dd>The <a>CSS declarations</a> associated with the object.

  <dt><dfn>parent CSS rule</dfn>

  <dd>The <a for=/>CSS rule</a> that the <a>CSS declaration block</a> is associated with, if any, or null otherwise.

  <dt><dfn>owner node</dfn>

  <dd>The {{Element}} or {{PseudoElement}} that the <a>CSS declaration block</a> is associated with, if any, or

  null otherwise.

 </dl>

 To <dfn>parse a CSS declaration block</dfn> from a string <var>string</var>, follow these steps:

 <ol>

  <li>Let <var>declarations</var> be the return value of invoking <a>parse a list of declarations</a> with <var>string</var>.

  <li>Let <var>parsed declarations</var> be a new empty list.

  <li>For each item <var>declaration</var> in <var>declarations</var>, follow these substeps:

   <ol>

    <li>Let <var>parsed declaration</var> be the result of parsing <var>declaration</var> according to the appropriate CSS specifications, dropping parts that

    are said to be ignored. If the whole declaration is dropped, let <var>parsed declaration</var> be null.

    <li>If <var>parsed declaration</var> is not null, append it to <var>parsed declarations</var>.

   </ol>

  <li>Return <var>parsed declarations</var>.

 </ol>

 To <dfn>serialize a CSS declaration</dfn> with property name <var>property</var>, value <var>value</var> and optionally an <i>important</i> flag set, follow

 these steps:

 <ol>

  <li>Let <var>s</var> be the empty string.

  <li>Append <var>property</var> to <var>s</var>.

  <li>Append "<code>: </code>" (U+003A U+0020) to <var>s</var>.

  <li>Append <var>value</var> to <var>s</var>.

  <li>If the <i>important</i> flag is set, append "<code> !important</code>" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E

  U+0074) to <var>s</var>.

  <li>Append "<code>;</code>" (U+003B) to <var>s</var>.

  <li>Return <var>s</var>.

 </ol>

 To <dfn>serialize a CSS declaration block</dfn> <var>declaration block</var> means to run the steps below:

 <ol>

  <li>Let <var>list</var> be an empty array.

  <li>Let <var>already serialized</var> be an empty array.

  <li><i>Declaration loop</i>: For each <a>CSS declaration</a> <var>declaration</var> in <var>declaration block</var>'s

  <a for="CSSStyleDeclaration">declarations</a>, follow these substeps:

   <ol>

    <li>Let <var>property</var> be <var>declaration</var>'s <a for="CSS declaration">property name</a>.

    <li>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>.

    <li>If <var>property</var> maps to one or more shorthand properties, let <var>shorthands</var> be an array of those shorthand properties, in

    <a>preferred order</a>, and follow these substeps:

     <ol>

      <li>Let <var>longhands</var> be an array consisting of all <a>CSS declarations</a> in <var>declaration block</var>'s

      <a for="CSSStyleDeclaration">declarations</a> that that are not in <var>already serialized</var> and have a

      <a for="CSS declaration">property name</a> that

      maps to one of the shorthand properties in <var>shorthands</var>.

      <li><i>Shorthand loop</i>: For each <var>shorthand</var> in <var>shorthands</var>, follow these substeps:

       <ol>

        <li>If all properties that map to <var>shorthand</var> are not present in <var>longhands</var>, continue with the steps labeled <i>shorthand loop</i>.

        <li>Let <var>current longhands</var> be an empty array.

        <li>Append all <a>CSS declarations</a> in <var>longhands</var> have a

        <a for="CSS declaration">property name</a> that maps to <var>shorthand</var> to <var>current longhands</var>.

        <li>If there is one or more <a>CSS declarations</a> in <var>current longhands</var> have their

        <a for="CSS declaration">important flag</a> set and one or more with it unset, continue with

        the steps labeled <i>shorthand loop</i>.

        <li>Let <var>value</var> be the result of invoking <a>serialize a CSS value</a> of <var>current longhands</var>.

        <li>If <var>value</var> is the empty string, continue with the steps labeled <i>shorthand loop</i>.

        <li>Let <var>serialized declaration</var> be the result of invoking <a>serialize a CSS declaration</a> with property name

        <var>shorthand</var>, value <var>value</var>, and the <i>important</i> flag set if the <a>CSS declarations</a> in

        <var>current longhands</var> have their <a for="CSS declaration">important flag</a> set.

        <li>Append <var>serialized declaration</var> to <var>list</var>.

        <li>Append the property names of all items of <var>current longhands</var> to <var>already serialized</var>.

        <li>Remove the items present in <var>current longhands</var> from <var>longhands</var>.

       </ol>

     </ol>

    <li>If <var>property</var> is in <var>already serialized</var>, continue with the steps labeled <i>declaration loop</i>.

    <li>Let <var>value</var> be the result of invoking <a>serialize a CSS value</a> of <var>declaration</var>.

    <li>Let <var>serialized declaration</var> be the result of invoking <a>serialize a CSS declaration</a> with property name <var>property</var>, value

    <var>value</var>, and the <i>important</i> flag set if <var>declaration</var> has its <a for="CSS declaration">important

    flag</a> set.

    <li>Append <var>serialized declaration</var> to <var>list</var>.

    <li>Append <var>property</var> to <var>already serialized</var>.

   </ol>

  <li>Return <var>list</var> joined with "<code> </code>" (U+0020).

 </ol>

 Note: The serialization of an empty CSS declaration block is the empty string.

 Note: The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitepsace appears

 before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.

 The <dfn id=concept-shorthands-preferred-order>preferred order</dfn> of a list of shorthand properties <var>shorthands</var> is as follows:

 <ol>

  <li>Order <var>shorthands</var> lexicographically.

  <li>Move all items in <var>shorthands</var> that begin with "<code>-</code>" (U+002D) last in the list, retaining their relative order.

  <li>Move all items in <var>shorthands</var> that begin with "<code>-</code>" (U+002D) but do not begin with "<code>-webkit-</code>" last in the

  list, retaining their relative order.

  <li>Order <var>shorthands</var> by the number of longhand properties that map to it, with the greatest number first.

 </ol>

 ### The {{CSSStyleDeclaration}} Interface ### {#the-cssstyledeclaration-interface}

 The <code>CSSStyleDeclaration</code> interface represents a <a>CSS declaration block</a>, including its underlying state, where this

 underlying state depends upon the source of the <code>CSSStyleDeclaration</Code> instance.

 <!--

 //

 // All members defined since DOM-2 Style. The only differences are:

 //

 //   1. removal of commented raises(DOMException) on setting cssText

 //   2. removal of raises(DOMException) on {set,remove}Property

 //   3. removal of getPropertyCSSValue() method

 //

 -->

 <pre class=idl>

 interface CSSStyleDeclaration {

   attribute DOMString cssText;

   readonly attribute unsigned long length;

   getter DOMString item(unsigned long index);

   DOMString getPropertyValue(DOMString property);

   DOMString getPropertyPriority(DOMString property);

   void setProperty(DOMString property, [TreatNullAs=EmptyString] DOMString value, [TreatNullAs=EmptyString] optional DOMString priority = "");

   void setPropertyValue(DOMString property, [TreatNullAs=EmptyString] DOMString value);

   void setPropertyPriority(DOMString property, [TreatNullAs=EmptyString] DOMString priority);

   DOMString removeProperty(DOMString property);

   readonly attribute CSSRule? parentRule;

   [TreatNullAs=EmptyString] attribute DOMString cssFloat;

 };

 </pre>

 The object's <a>supported property indices</a> are the numbers in the range zero to one less than the number of

 <a>CSS declarations</a> in the <a for="CSSStyleDeclaration">declarations</a>. If there are no such

 <a>CSS declarations</a>, then there are no <a>supported property indices</a>.

 The <dfn attribute for=CSSStyleDeclaration>cssText</dfn> attribute must return the result of

 <a lt="serialize a CSS declaration block">serializing</a> the <a for="CSSStyleDeclaration">declarations</a>.

 Setting the {{CSSStyleDeclaration/cssText}} attribute must run these steps:

 <ol>

  <li>If the <a for="CSSStyleDeclaration">readonly flag</a> is set, <a>throw</a>

  a {{NoModificationAllowedError}} exception and terminate these steps.

  <li>Empty the <a for="CSSStyleDeclaration">declarations</a>.

  <li><a lt="Parse a CSS declaration block">Parse</a> the given value and, if the return value is not the empty list, insert the items in the list

  into the <a for="CSSStyleDeclaration">declarations</a>, in <a>specified order</a>.

 </ol>

 The <dfn attribute for=CSSStyleDeclaration>length</dfn> attribute must return the number of <a lt="CSS declaration">CSS

 declarations</a> in the <a for="CSSStyleDeclaration">declarations</a>.

 The <dfn method for=CSSStyleDeclaration>item(<var>index</var>)</dfn> method must return the

 <a for="CSS declaration">property name</a> of the <a>CSS declaration</a> at position <var>index</var>.

 The <dfn method for=CSSStyleDeclaration>getPropertyValue(<var>property</var>)</dfn> method must run these steps:

 <ol>

  <li>Let <var>property</var> be <var>property</var> <a>converted to ASCII lowercase</a>.

  <li>If <var>property</var> is a shorthand property, then follow these substeps:

   <ol>

    <li>Let <var>list</var> be a new empty array.

    <li>For each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical order, follow these substeps:

     <ol>

      <li>If <var>longhand</var> is a <a>case-sensitive</a> match for a <a for="CSS declaration">property

      name</a> of a <a>CSS declaration</a> in the <a for="CSSStyleDeclaration">declarations</a>, let <var>declaration</var>

      be that <a>CSS declaration</a>, or null otherwise.

      <li>If <var>declaration</var> is null, return the empty string and terminate these steps.

      <li>Append the <var>declaration</var> to <var>list</var>.

     </ol>

    <li>Return the <a lt="serialize a CSS value">serialization</a> of <var>list</var> and terminate these steps.

   </ol>

  <li>If <var>property</var> is a <a>case-sensitive</a>

  match for a <a for="CSS declaration">property name</a> of a <a>CSS declaration</a> in the

  <a for="CSSStyleDeclaration">declarations</a>, return the result of invoking

  <a>serialize a CSS value</a> of that declaration and terminate these steps.

  <li>Return the empty string.

 </ol>

 The <dfn method for=CSSStyleDeclaration>getPropertyPriority(<var>property</var>)</dfn> method must run these steps:

 <ol>

  <li>Let <var>property</var> be <var>property</var> <a>converted to ASCII lowercase</a>.

  <li>If <var>property</var> is a shorthand property, follow these substeps:

   <ol>

    <li>Let <var>list</var> be a new array.

    <li>For each longhand property <var>longhand</var> that <var>property</var> maps to, append the result of invoking

    {{CSSStyleDeclaration/getPropertyPriority()}} with <var>longhand</var> as argument to <var>list</var>.

    <li>If all items in <var>list</var> are the string "<code>important</code>", return the string "<code>important</code>" and terminate these

    steps.

   </ol>

  <li>Otherwise, follow these substeps:

   <ol>

    <li>If <var>property</var> is a

    <a>case-sensitive</a> match for a <a for="CSS declaration">property name</a> of a <a>CSS

    declaration</a> in the <a for="CSSStyleDeclaration">declarations</a> that has the

    <a for="CSS declaration">important flag</a> set, return the string "<code>important</code>".

   </ol>

  <li>Return the empty string.

 </ol>

 <div class=example>E.g. for <code>background-color:lime !IMPORTANT</code> the return

 value would be "<code>important</code>".</div>

 The <dfn method for=CSSStyleDeclaration>setProperty(<var>property</var>, <var>value</var>, <var>priority</var>)</dfn> method must run these steps:

 <ol>

  <li>If the <a for="CSSStyleDeclaration">readonly flag</a> is set, <a>throw</a>

  a {{NoModificationAllowedError}} exception and terminate these steps.

  <li>Let <var>property</var> be <var>property</var> <a>converted to ASCII lowercase</a>.

  <li>If <var>property</var> is not a <a>case-sensitive</a> match for a <a>supported CSS property</a>, terminate this

  algorithm.

  <li>If <var>value</var> is the empty string, invoke {{CSSStyleDeclaration/removeProperty()}}

  with <var>property</var> as argument and terminate this algorithm.

  <li>If <var>priority</var> is not the empty string and is not an <a>ASCII case-insensitive</a> match for the string

  "<code>important</code>", terminate this algorithm.

  <li>

   Let <var>component value list</var> be the result of <a lt="parse a CSS value">parsing</a> <var>value</var> for property <var>property</var>.

   Note: <var>value</var> can not include "<code>!important</code>".

  <li>If <var>component value list</var> is null terminate these steps.

  <li>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical

  order, <a lt="set a CSS declaration">set the CSS declaration</a> <var>longhand</var> with the appropriate value(s) from <var>component value

  list</var>, with the <i>important</i> flag set if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the

  <a for="CSSStyleDeclaration">declarations</a>.

  <li>Otherwise, <a lt="set a CSS declaration">set the CSS declaration</a> <var>property</var> with value <var>component value list</var>, with

  the <i>important</i> flag set if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the

  <a for="CSSStyleDeclaration">declarations</a>.

 </ol>

 To <dfn>set a CSS declaration</dfn> <var>property</var> with a value <var>component value list</var> and optionally with an <i>important</i> flag set, in

 a list of declarations <var>declarations</var>, follow these steps:

 <ol>

  <li>If <var>property</var> is a <a>case-sensitive</a> match for a <a for="CSS declaration">property

  name</a> of a <a>CSS declaration</a> in <var>declarations</var>, let <var>declaration</var> be that <a>CSS declaration</a>.

  <li>Otherwise, append a new <a>CSS declaration</a> with the <a for="CSS declaration">property name</a> <var>property</var>

  to <var>declarations</var> and let <var>declaration</var> be that <a>CSS declaration</a>.

  <li>Set <var>declaration</var>'s <a for="CSS declaration">value</a> to <var>component value list</var>.

  <li>If the <i>important</i> flag is set, set <var>declaration</var>'s <a for="CSS declaration">important flag</a>.

  Otherwise, unset <var>declaration</var>'s <a for="CSS declaration">important flag</a>.

 </ol>

 The <dfn method for=CSSStyleDeclaration>setPropertyValue(<var>property</var>, <var>value</var>)</dfn> method must run these

 steps:

 <ol>

  <li>If the <a for="CSSStyleDeclaration">readonly flag</a> is set, <a>throw</a>

  a {{NoModificationAllowedError}} exception and terminate these steps.

  <li>Let <var>property</var> be <var>property</var> <a>converted to ASCII lowercase</a>.

  <li>If <var>property</var> is not a <a>case-sensitive</a> match for a <a>supported CSS property</a>, terminate this

  algorithm.

  <li>If <var>value</var> is the empty string, invoke {{CSSStyleDeclaration/removeProperty()}}

  with <var>property</var> as argument and terminate this algorithm.

  <li>

   Let <var>component value list</var> be the result of <a lt="parse a CSS value">parsing</a> <var>value</var> for property <var>property</var>.

   Note: <var>value</var> can not include "<code>!important</code>".

  <li>If <var>component value list</var> is null terminate these steps.

  <li>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical

  order, <a lt="set a CSS declaration value">set the CSS declaration value</a> <var>longhand</var> to the appropriate value(s) from <var>component

  value list</var>, and with the list of declarations being the <a for="CSSStyleDeclaration">declarations</a>.

  <li>Otherwise, <a lt="set a CSS declaration value">set the CSS declaration value</a> <var>property</var> to the value <var>component value

  list</var>, and with the list of declarations being the <a for="CSSStyleDeclaration">declarations</a>.

 </ol>

 To <dfn>set a CSS declaration value</dfn> to a value <var>component value list</var> in a list of declarations <var>declarations</var>, follow these steps:

 <ol>

  <li>If <var>property</var> is a <a>case-sensitive</a> match for a <a for="CSS declaration">property

  name</a> of a <a>CSS declaration</a> in <var>declarations</var>, let <var>declaration</var> be that <a>CSS declaration</a>.

  <li>Otherwise, append a new <a>CSS declaration</a> with the <a for="CSS declaration">property name</a> <var>property</var>

  to <var>declarations</var> and let <var>declaration</var> be that <a>CSS declaration</a>.

  <li>Set <var>declaration</var>'s <a for="CSS declaration">value</a> to <var>component value list</var>.

 </ol>

 The <dfn method for=CSSStyleDeclaration>setPropertyPriority(<var>property</var>, <var>priority</var>)</dfn> method must run

 these steps:

 <ol>

  <li>If the <a for="CSSStyleDeclaration">readonly flag</a> is set, <a>throw</a>

  a {{NoModificationAllowedError}} exception and terminate these steps.

  <li>Let <var>property</var> be <var>property</var> <a>converted to ASCII lowercase</a>.

  <li>If <var>property</var> is not a <a>case-sensitive</a> match for a <a>supported CSS property</a>, terminate this

  algorithm.

  <li>If <var>priority</var> is not the empty string and is not an <a>ASCII case-insensitive</a> match for the string

  "<code>important</code>", terminate this algorithm.

  <li>If <var>property</var> is a shorthand property, then for each longhand property <var>longhand</var> that <var>property</var> maps to, in canonical

  order, <a lt="set a CSS declaration priority">set the CSS declaration priority</a> <var>longhand</var> with the <i>important</i> flag set if

  <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the

  <a for="CSSStyleDeclaration">declarations</a>.

  <li>Otherwise, <a lt="set a CSS declaration priority">set the CSS declaration priority</a> <var>property</var> with the <i>important</i> flag set

  if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the

  <a for="CSSStyleDeclaration">declarations</a>.

 </ol>

 To <dfn>set a CSS declaration priority</dfn> <var>property</var> optionally with an <i>important</i> flag set, in a list of declarations

 <var>declarations</var>, follow these steps:

 <ol>

  <li>If <var>property</var> is a <a>case-sensitive</a> match for a <a for="CSS declaration">property

  name</a> of a <a>CSS declaration</a> in <var>declarations</var>, let <var>declaration</var> be that <a>CSS declaration</a>.

  <li>Otherwise, terminate these steps.

  <li>If the <i>important</i> flag is set, set <var>declaration</var>'s <a for="CSS declaration">important flag</a>. Otherwise,

  unset <var>declaration</var>'s <a for="CSS declaration">important flag</a>.

 </ol>

 The <dfn method for=CSSStyleDeclaration>removeProperty(<var>property</var>)</dfn> method must run these steps:

 <ol>

  <li>If the <a for="CSSStyleDeclaration">readonly flag</a> is set, <a>throw</a>

  a {{NoModificationAllowedError}} exception and terminate these steps.

  <li>Let <var>property</var> be <var>property</var> <a>converted to ASCII lowercase</a>.

  <li>Let <var>value</var> be the return value of invoking {{CSSStyleDeclaration/getPropertyValue()}}

  with <var>property</var> as argument.

  <li>If <var>property</var> is a shorthand property, for each longhand property <var>longhand</var> that <var>property</var> maps to, invoke

  {{CSSStyleDeclaration/removeProperty()}} with <var>longhand</var> as argument.

  <li>Otherwise, if <var>property</var> is a <a>case-sensitive</a> match for a

  <a for="CSS declaration">property name</a> of a <a>CSS declaration</a> in the

  <a for="CSSStyleDeclaration">declarations</a>, remove that <a>CSS declaration</a>.

  <li>Return <var>value</var>.

 </ol>

 The <dfn attribute for=CSSStyleDeclaration>parentRule</dfn> attribute must return the

 <a for="CSSStyleDeclaration">parent CSS rule</a>.

 The <dfn attribute for=CSSStyleDeclaration>cssFloat</dfn>

 attribute, on getting, must return the result of invoking

 {{CSSStyleDeclaration/getPropertyValue()}} with

 <code>float</code> as argument. On setting, the attribute must invoke

 {{CSSStyleDeclaration/setProperty()}} with

 <code>float</code> as first argument, as second argument the given value, and no third argument.

 Any exceptions thrown must be re-thrown.

 For each CSS property <var>property</var> that is a <a>supported CSS property</a>,

 the following partial interface applies where <var>camel-cased attribute</var>

 is obtained by running the <a>CSS property to IDL attribute</a> algorithm for

 <var>property</var>.

 <pre class="idl extract">

 partial interface CSSStyleDeclaration {

   [TreatNullAs=EmptyString] attribute DOMString _<var>camel_cased_attribute</var>;

 };

 </pre>

 The <dfn attribute for=CSSStyleDeclaration><var>camel-cased attribute</var></dfn> attribute, on getting, must return the

 result of invoking {{CSSStyleDeclaration/getPropertyValue()}} with the

 argument being the result of running the <a>IDL attribute to CSS property</a>

 algorithm for <var>camel-cased attribute</var>.

 Setting the <code attribute for=CSSStyleDeclaration><var>camel-cased attribute</var></code> attribute must invoke

 {{CSSStyleDeclaration/setProperty()}} with the

 first argument being the result of running the <a>IDL attribute to CSS property</a>

 algorithm for <var>camel-cased attribute</var>, as second argument the given value, and no third argument. Any

 exceptions thrown must be re-thrown.

 <div class=example>For example, for the 'font-size' property there would be a <code>fontSize</code> IDL attribute.</div>

 For each CSS property <var>property</var> that is a <a>supported CSS property</a> and that begins

 with the string <code>-webkit-</code>, the following partial interface applies where

 <var>webkit-cased attribute</var> is obtained by running the <a>CSS property to IDL attribute</a>

 algorithm for <var>property</var>, with the <i>lowercase first</i> flag set.

 <pre class="idl extract">

 partial interface CSSStyleDeclaration {

   [TreatNullAs=EmptyString] attribute DOMString _<var>webkit_cased_attribute</var>;

 };

 </pre>

 The <dfn attribute for=CSSStyleDeclaration><var>webkit-cased attribute</var></dfn> attribute, on

 getting, must return the result of invoking {{CSSStyleDeclaration/getPropertyValue()}} with the

 argument being the result of running the <a>IDL attribute to CSS property</a> algorithm for

 <var>webkit-cased attribute</var>, with the <i>dash prefix</i> flag set.

 Setting the <code attribute for=CSSStyleDeclaration><var>webkit-cased attribute</var></code>

 attribute must invoke {{CSSStyleDeclaration/setProperty()}} with the first argument being the result

 of running the <a>IDL attribute to CSS property</a> algorithm for <var>webkit-cased attribute</var>,

 with the <i>dash prefix</i> flag set, as second argument the given value, and no third argument.

 Any exceptions thrown must be re-thrown.

 <div class=example>For example, if the user agent supports the '-webkit-transform' property, there

 would be a <code>webkitTransform</code> IDL attribute. There would also be a

 <code>WebkitTransform</code> IDL attribute because of the rules for camel-cased attributes.</div>

 For each CSS property <var>property</var> that is a <a>supported CSS property</a>,

 except for properties that have no "<code>-</code>" (U+002D) in the property name,

 the following partial interface applies where <var>dashed attribute</var> is <var>property</var>.

 <pre class="idl">

 partial interface CSSStyleDeclaration {

   [TreatNullAs=EmptyString] attribute DOMString _<var>dashed_attribute</var>;

 };

 </pre>

 The <dfn attribute for=CSSStyleDeclaration><var>dashed attribute</var></dfn> attribute, on getting, must return the

 result of invoking {{CSSStyleDeclaration/getPropertyValue()}} with the

 argument being <var>dashed attribute</var>.

 Setting the <code attribute for=CSSStyleDeclaration><var>dashed attribute</var></code> attribute must invoke

 {{CSSStyleDeclaration/setProperty()}} with the

 first argument being <var>dashed attribute</var>, as second argument the given value, and no third argument. Any

 exceptions thrown must be re-thrown.

 <div class=example>

  For example, for the 'font-size' property there would be a <code>font-size</code> IDL attribute. In JavaScript, the property can be accessed as

  follows, assuming <var>element</var> is an <a lt="HTML elements">HTML element</a>:

  <pre><var>element</var>.style['font-size'];</pre>

 </div>

 The <dfn>CSS property to IDL attribute</dfn> algorithm for <var>property</var>, optionally with a

 <i>lowercase first</i> flag set, is as follows:

 <ol>

  <li>Let <var>output</var> be the empty string.

  <li>Let <var>uppercase next</var> be unset.

  <li>If the <i>lowercase first</i> flag is set, remove the first character from <var>property</var>.

  <li>For each character <var>c</var> in <var>property</var>:

   <ol>

    <li>If <var>c</var> is "<code>-</code>" (U+002D), let <var>uppercase next</var> be set.

    <li>Otherwise, if <var>uppercase next</var> is set, let <var>uppercase next</var> be unset and append <var>c</var>

    <a>converted to ASCII uppercase</a> to <var>output</var>.

    <li>Otherwise, append <var>c</var> to <var>output</var>.

   </ol>

  <li>Return <var>output</var>.

 </ol>

 The <dfn>IDL attribute to CSS property</dfn> algorithm for <var>attribute</var>, optionally with a

 <i>dash prefix</i> flag set, is as follows:

 <ol>

  <li>Let <var>output</var> be the empty string.

  <li>If the <i>dash first</i> flag is set, append "<code>-</code>" (U+002D) to <var>output</var>.

  <li>For each character <var>c</var> in <var>attribute</var>:

   <ol>

    <li>If <var>c</var> is in the range U+0041 to U+005A (ASCII uppercase), append "<code>-</code>" (U+002D) followed by <var>c</var>

    <a>converted to ASCII lowercase</a> to <var>output</var>.

    <li>Otherwise, append <var>c</var> to <var>output</var>.

   </ol>

  <li>Return <var>output</var>.

 </ol>

 CSS Values {#css-values}

 ------------------------

 ### Parsing CSS Values ### {#parsing-css-values}

 To <dfn>parse a CSS value</dfn> <var>value</var> for a given

 <var>property</var> means to follow these steps:

 <ol>

  <li>Let <var>list</var> be the value returned by invoking <a>parse a list of component values</a> from <var>value</var>.

  <li>Match <var>list</var> against the grammar for the property <var>property</var> in the CSS specification.

  <li>If the above step failed, return null.

  <li>Return <var>list</var>.

 </ol>

 Note: "<code>!important</code>" declarations are not

 part of the property value space and will therefore cause

 <a>parse a CSS value</a> to return null.

 ### Serializing CSS Values ### {#serializing-css-values}

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

 To <dfn>serialize a CSS value</dfn> of a <a>CSS declaration</a> <var>declaration</var> or a list of longhand <a lt="CSS declaration">CSS

 declarations</a> <var>list</var>, follow these rules:

 <ol>

  <li>If this algorithm is invoked with a list <var>list</var>, follow these substeps:

   <ol>

    <li>Let <var>shorthand</var> be the shorthand property that exactly maps to all the longhand properties in <var>list</var>. If there are multiple such

    shorthand properties, use the first in <a>preferred order</a>.

    <li>If <var>shorthand</var> cannot represent the values of <var>list</var> in its grammar, return the empty string and terminate these steps.

    <li>Let <var>trimmed list</var> be a new empty array.

    <li>For each <a>CSS declaration</a> <var>declaration</var> in <var>list</var>, if <var>declaration</var>'s

    <a for="CSS declaration">value</a> is not the initial value, or if

    <var>declaration</var> is a required component of the <var>shorthand</var> property, append <var>declaration</var> to <var>trimmed list</var>.

    <li>If <var>trimmed list</var> is empty, append the value of the first item in <var>list</var> to <var>trimmed list</var>.

    <li>Let <var>values</var> be a new empty array.

    <li>For each <a>CSS declaration</a> <var>declaration</var> in <var>trimmed list</var>, invoke <a>serialize a CSS value</a> of

    <var>declaration</var>, and append the result to <var>values</var>.

    <li>Return the result of joining <var>values</var> as appropriate according to the grammar of <var>shorthand</var> and terminate these steps.

   </ol>

  <li>Let <var>values</var> be a new empty array.

  <li>Append the result of invoking <a>serialize a CSS component value</a> of <var>declaration</var>'s

  <a for="CSS declaration">value</a> to <var>values</var>.

  <li>If the grammar of the <a for="CSS declaration">property name</a> of <var>declaration</var> is defined to be

  whitespace-separated, return the result of invoking <a>serialize a whitespace-separated list</a> of <var>values</var> and terminate these steps.

  <li>If the grammar of the <a for="CSS declaration">property name</a> of <var>declaration</var> is defined to be comma-separated,

  return the result of invoking <a>serialize a comma-separated list</a> of <var>values</var>.

 </ol>

 To

 <dfn>serialize a CSS component value</dfn>

 depends on the component, as follows:

 <dl class="switch">

  <dt>keyword

  <dd>The keyword

  <a>converted to ASCII lowercase</a>.

  <dt>&lt;angle>

  <dd>The &lt;number> component serialized as per &lt;number> followed by the unit in canonical form as defined in its respective specification.

  <dt>&lt;color>

  <dd>

  If <color> is a component of a resolved or computed value, then

  return the color using the <code>rgb()</code> or <code>rgba()</code> functional

  notation as follows:

  <ol>

  <li>If the alpha component of the color is equal to one, then return the serialization of the

  <code>rgb()</code> functional equivalent of the opaque color.

  <li>If the alpha component of the color is not equal to one, then return the serialization of the

  <code>rgba()</code> functional equivalent of the non-opaque color.

  </ol>

  The serialization of the <code>rgb()</code> functional equivalent is the concatenation of the following:

  <ol>

  <li>The string "<code>rgb(</code>".

  <li>The shortest base-ten integer serialization of the color's red component.

  <li>The string "<code>, </code>".

  <li>The shortest base-ten serialization of the color's green component.

  <li>The string "<code>, </code>".

  <li>The shortest base-ten serialization of the color's blue component.

  <li>The string "<code>)</code>".

  </ol>

  The serialization of the <code>rgba()</code> functional equivalent is the concatenation of the following:

  <ol>

  <li>The string "<code>rgba(</code>".

  <li>The shortest base-ten serialization of the color's red component.

  <li>The string "<code>, </code>".

  <li>The shortest base-ten serialization of the color's green component.

  <li>The string "<code>, </code>".

  <li>The shortest base-ten serialization of the color's blue component.

  <li>The string "<code>, </code>".

  <li>The serialization of the color's alpha component as an &lt;alphavalue>.

  <li>The string "<code>)</code>".