CSS Object Model (CSSOM)

Abstract

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

Status of this Document

This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C or by the CSS Working Group. Don't cite this document other than as work in progress.

Implementers should note well that this specification is an ongoing effort to sort out what has been widely implemented and deployed from [DOM2STYLE] as well as common extensions thereto, some details of which are currently interoperable and others which are not currently interoperable. As this specification moves forward, it is hoped that these differences will be resolved and an unambiguous and adequate consensus-based specification will emerge.

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This is the 26 April 2013 Editor's Draft of CSSOM. Please send comments to www-style@w3.org (archived) with [cssom] at the start of the subject line.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

Table of Contents

1. 1 Introduction
2. 2 Conformance
3. 3 Terminology
   1. 3.1 Common Serializing Idioms
4. 4 Media Queries
   1. 4.1 Parsing Media Queries
   2. 4.2 Serializing Media Queries
      1. 4.2.1 Serializing Media Feature Values
   3. 4.3 Comparing Media Queries
   4. 4.4 The MediaList Interface
5. 5 Selectors
   1. 5.1 Parsing Selectors
   2. 5.2 Serializing Selectors
6. 6 CSS
   1. 6.1 CSS Style Sheets
      1. 6.1.1 The StyleSheet Interface
      2. 6.1.2 The CSSStyleSheet Interface
   2. 6.2 Style Sheet Collections
      1. 6.2.1 The HTTP Default-Style Header
      2. 6.2.2 The StyleSheetList Sequence
      3. 6.2.3 Extensions to the Document Interface
      4. 6.2.4 Interaction with the User Interface
         1. 6.2.4.1 Persisting the selected style sheet set
      5. 6.2.5 Examples
   3. 6.3 Style Sheet Association
      1. 6.3.1 The LinkStyle Interface
      2. 6.3.2 Requirements on specifications
      3. 6.3.3 Requirements on User Agents Implementing the xml-stylesheet processing instruction
      4. 6.3.4 Requirements on User Agents Implementing the HTTP Link Header
   4. 6.4 CSS Rules
      1. 6.4.1 The CSSRuleList Sequence
      2. 6.4.2 The CSSRule Interface
      3. 6.4.3 The CSSStyleRule Interface
      4. 6.4.4 The CSSCharsetRule Interface
      5. 6.4.5 The CSSImportRule Interface
      6. 6.4.6 The CSSMediaRule Interface
      7. 6.4.7 The CSSFontFaceRule Interface
      8. 6.4.8 The CSSPageRule Interface
      9. 6.4.9 The CSSNamespaceRule Interface
   5. 6.5 CSS Declaration Blocks
      1. 6.5.1 The CSSStyleDeclaration Interface
   6. 6.6 CSS Values
      1. 6.6.1 Parsing CSS Values
      2. 6.6.2 Serializing CSS Values
         1. 6.6.2.1 Examples
7. 7 DOM Access to CSS Declaration Blocks
   1. 7.1 The ElementCSSInlineStyle Interface
   2. 7.2 Extensions to the Window Interface
8. 8 Resolved Values
9. 9 IANA Considerations
   1. 9.1 Default-Style
10. References
    1. Normative references
    2. Informative references
11. Change History
    1. Changes From DOM-2 Style
12. Acknowledgments

1 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 [DOM2STYLE]. 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 Changes from DOM-2 Style.

2 Conformance

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

The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC2119. For readability, these words do not appear in all uppercase letters in this specification. [RFC2119]

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

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

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

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 case-sensitive manner.

3 Terminology

This specification employs certain terminology from the following documents: DOM4, HTML, Associating Style Sheets with XML documents and XML [DOM] [HTML] [XMLSS] [XML].

When this specification talks about object A where A is actually an interface, it generally means an object implementing interface A.

The term whitespace is used as defined in [CSS].

The terms set and clear 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.

3.1 Common Serializing Idioms

To escape a character means to create a string of "\" (U+005C), followed by the character.

To escape a character as code point means to create a string of "\" (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 serialize an identifier means to create a string represented by the concatenation of, for each character of the identifier:

• If the character is NULL (U+0000), then throw an InvalidCharacterError exception and terminate these steps.
• If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to U+009F), then the character escaped as code point.
• If the character is the first character and is in the range [0-9] (U+0030 to U+0039), then the character escaped as code point.
• 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 "-" (U+002D), then the character escaped as code point.
• If the character is the second character and is "-" (U+002D) and the first character is "-" as well, then the escaped character.
• If the character is not handled by one of the above rules and is greater than or equal to U+0080, is "-" (U+002D) or "_" (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.
• Otherwise, the escaped character.

To serialize a string 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):

• If the character is NULL (U+0000), then throw an InvalidCharacterError exception and terminate these steps.
• If the character is in the range [\1-\1f] (U+0001 to U+001F) or [\7f-\9f] (U+007F to U+009F), the character escaped as code point.
• If the character is '"' (U+0022) or '\' (U+005C), the escaped character.
• Otherwise, the character itself.

"'" (U+0027) is not escaped because strings are always serialized with '"' (U+0022).

To serialize a URL means to create a string represented by "url(", followed by the string escaped value of the given string, followed by ")".

To serialize a comma-separated list concatenate all items of the list in list order while separating them by ", ", i.e., COMMA (U+002C) followed by a single SPACE (U+0020).

To serialize a whitespace-separated list concatenate all items of the list in list order while separating them by " ", i.e., a single SPACE (U+0020).

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.

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

4.1 Parsing Media Queries

To parse a media query list for a given string s 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.

A media query that ends up being "ignored" will turn into "not all".

To parse a media query for a given string s means to follow the parse a media query list steps and return null if more than one media query is returned or a media query if a single media query is returned.

Again, a media query that ends up being "ignored" will turn into "not all".

4.2 Serializing Media Queries

To serialize a media query list run these steps:

1. If the media query list is empty return the empty string and terminate these steps.

2. Serialize each media query in the list of media queries, sort them in lexicographical order, and then serialize the list.

To serialize a media query let s be the empty string, run the steps below, and finally return s:

1. If the media query is negated append "not", followed by a single SPACE (U+0020), to s.

2. Let type be the media type of the media query, escaped and converted to ASCII lowercase.

3. If the media query does not contain media features append type, to s, then return s and terminate this algorithm.

4. If type is not "all" or if the media query is negated append type, followed by a single SPACE (U+0020), followed by "and", followed by a single SPACE (U+0020), to s.

5. Sort the media features in lexicographical order.

6. Then, for each media feature:

   1. Append a "(" (U+0028), followed by the media feature name, converted to ASCII lowercase, to s.

   2. If a value is given append a ":" (U+003A), followed by a single SPACE (U+0020), followed by the serialized media feature value, to s.

   3. Append a ")" (U+0029) to s.

   4. If this is not the last media feature append a single SPACE (U+0020), followed by "and", followed by a single SPACE (U+0020), to s.

not screen and (min-WIDTH:5px) AND (max-width:40px)

not screen and (max-width: 40px) and (min-width: 5px)

all and (color) and (color)

(color)

4.2.1 Serializing Media Feature Values

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 serialize a media feature value named v locate v in the first column of the table below and use the serialization format described in the second column:

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

4.3 Comparing Media Queries

To compare media queries m1 and m2 means to serialize them both and return true if they are a case-sensitive match and false if they are not.

4.4 The MediaList Interface

An object that implements the MediaList interface has an associated collection of media queries.

[Constructor(DOMString text)]
interface MediaList {
    stringifier attribute DOMString mediaText;
    readonly attribute unsigned long length;
    DOMString item (unsigned long index);
    void appendMedium (DOMString medium);
    void deleteMedium (DOMString medium);
};

MediaList (DOMString text)

To create a MediaList object from a string text, run these steps:

1. Create a new MediaList object.

2. Set its mediaText attribute to text.

3. Return the newly created MediaList object.

mediaText of type DOMString

The mediaText attribute must return a serialization of the collection of media queries.

Setting the mediaText attribute must run these steps:

1. Empty the collection of media queries.

2. If the given value is the empty string terminate these steps.

3. Append all the media queries as a result of parsing the given value to the collection of media queries.

length of type unsigned long, readonly

The length attribute must return the number of media queries in the collection of media queries.

item (unsigned long index), returns DOMString

The item method must return the media query in the collection of media queries given by index, or null, if index is greater than or equal to the number of media queries in the collection of media queries.

appendMedium (DOMString medium), returns void

The appendMedium method must run these steps:

1. Let m be the result of parsing the given value.

2. If m is null terminate these steps.

3. If comparing m with any of the media queries in the collection of media queries returns true terminate these steps.

4. Append m to the collection of media queries.

deleteMedium (DOMString medium), returns void

The deleteMedium method must run these steps:

1. Let m be the result of parsing the given value.

2. If m is null terminate these steps.

3. Remove any media query from the collection of media queries for which comparing the media query with m returns true.

5 Selectors

Selectors are defined in the Selectors specification. This section mainly defines how to serialize them.

5.1 Parsing Selectors

To parse a group of selectors means to parse the value using the selectors_group production defined in the Selectors specification and return either a group of selectors if parsing did not fail or null if parsing did fail.

5.2 Serializing Selectors

To serialize a group of selectors serialize each selector in the group of selectors and then serialize the group.

To serialize a selector let s be the empty string, run the steps below for each part of the chain of the selector, and finally return s:

1. If there is only one simple selector in the sequence of simple selectors which is a universal selector, append the result of serializing the universal selector to s.

2. Otherwise, for each simple selector in the sequence of simple selectors that is not a universal selector of which the namespace prefix maps to the null namespace (not in a namespace) or of which the namespace prefix maps to a namespace that is not the default namespace serialize the simple selector and append the result to s.

3. If this is not the last part of the chain of the selector append a single SPACE (U+0020), followed by the combinator ">", "+", or "~" as appropriate, followed by another single SPACE (U+0020) if the combinator was not whitespace, to s.

4. If this is the last part of the chain of the selector and there is a pseudo-element, append "::" followed by the name of the pseudo-class, to s.

To serialize a simple selector let s be the empty string, run the steps below, and finally return s:

type selector

universal selector

1. If the namespace prefix maps to a namespace that is not the default namespace and is not the null namespace (not in a namespace) append the escaped namespace prefix, followed by a "|" (U+007C) to s.

2. If the namespace prefix maps to a namespace that is the null namespace (not in a namespace) append "|" (U+007C) to s.

3. If this is a type selector append the escaped element name to s.

4. If this is a universal selector append "*" (U+002A) to s.

attribute selector

1. Append "[" (U+005B) to s.

2. If the namespace prefix maps to a namespace that is not the null namespace (not in a namespace) append the escaped namespace prefix, followed by a "|" (U+007C) to s.

3. If the namespace prefix maps to a namespace that is the null namespace (not in a namespace) append "|" (U+007C) to s.

4. Append the escaped attribute name to s.

5. If there is an attribute value specified, append "=", "~=", "|=", "^=", "$=", or "*=" as appropriate (depending on the type of attribute selector), followed by the string escaped attribute value, to s.

6. Append "]" (U+005D) to s.

class selector

Append a "." (U+002E), followed by the escaped class name to s.

ID selector

Append a "#" (U+0023), followed by the escaped ID to s.

pseudo-class

If the pseudo-class does not accept arguments append ":" (U+003A), followed by the name of the pseudo-class, to s.

Otherwise, append ":" (U+003A), followed by the name of the pseudo-class, followed by "(" (U+0028), followed by the value of the pseudo-class argument determined as per below, followed by ")" (U+0029), to s.

:lang()

The escaped value.

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

1. If the value is odd let the value be "2n+1".

2. If the value is even let the value be "2n".

3. If a is zero let the value be b serialized as <integer>.

4. If a is one or minus one and b is zero let the value be "n" (U+006E).

5. If a is one or minus one let the value be "n" (U+006E), followed by "+" (U+002B) if b is positive, followed by b serialized as <integer>.

6. If b is zero let the value be a serialized as <integer>, followed by "n" (U+006E).

7. Otherwise let the value be a serialized as <integer>, followed by "n" (U+006E), followed by "+" (U+002B) if b is positive, followed by b serialized as <integer>.

:not()

The result of serializing the value using the rules for serializing a group of selectors.

6 CSS

6.1 CSS Style Sheets

A CSS style sheet is an abstract concept that represents a style sheet as defined by the CSS specification. In the CSSOM a CSS style sheet is represented as a CSSStyleSheet object. A CSS style sheet has a number of associated state items:

style sheet type

The literal string "text/css".

style sheet location

The URL of the style sheet or null if the style sheet was embedded.

style sheet parent

The style sheet that is the parent of the style sheet or null if there is no associated parent.

style sheet owner node

The DOM node associated with the style sheet or null if there is no associated DOM node.

style sheet owner CSS rule

The CSS rule in the style sheet parent that caused the inclusion of the style sheet or null if there is no associated rule.

style sheet media

The MediaList object associated with the style sheet.

If this property is set to a string run the create a MediaList object steps for that string and associate the returned object with the style sheet.

style sheet title

The title of the style sheet or null if no title is specified or is the empty string, in which case the title is referred to as an empty title.

In the following, the style sheet title is non-empty for the first style sheet, but is empty for the second and third style sheets.

<style title="papaya whip">
  body { background: #ffefd5; }
</style>

<style title="">
  body { background: orange; }
</style>

<style>
  body { background: brown; }
</style>

style sheet alternate flag

Either set or clear. Clear by default.

The following style sheets have their style sheet alternate flag set:

<?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?>

<link rel="alternate stylesheet" title="x" href="data:text/css,…">

style sheet disabled flag

Either set or clear. Clear by default.

Even when clear it does not necessarily mean that the style sheet is actually used for rendering.

style sheet CSS rules

The CSS rules associated with the style sheet.

When you are to create a style sheet the above properties, with the exception of style sheet type and style sheet CSS rules, are to be set to their proper values.

6.1.1 The StyleSheet Interface

The StyleSheet interface represents an abstract, base style sheet.

interface StyleSheet {
    readonly attribute DOMString type;
    readonly attribute DOMString? href;
    readonly attribute Node ownerNode;
    readonly attribute StyleSheet? parentStyleSheet;
    readonly attribute DOMString? title;
    readonly attribute MediaList media;
    attribute boolean disabled;
};

type of type DOMString, readonly

The type attribute must return the style sheet type.

href of type DOMString?, readonly

The href attribute must return the style sheet location or null if none.

What should the default value be if not known or specified upon creation? an empty string or null?

ownerNode of type Node, readonly

The ownerNode attribute must return the style sheet owner node.

Should ownerNode be nullable?

parentStyleSheet of type StyleSheet?, readonly

The parentStyleSheet attribute must return the style sheet parent or null if there is none.

title of type DOMString?, readonly

The title attribute must return the style sheet title or null if none.

What should the default value be if not known or specified upon creation? an empty string or null?

media of type MediaList, readonly

The media attribute must return the style sheet media.

Should media be nullable?

Need to define a setter that implements the semantics of setting this attribute to a string representing a MediaList.

disabled of type boolean

The disabled attribute must return true if the style sheet disabled flag is set, or false otherwise.

Setting the disabled attribute must set the style sheet disabled flag if the new value is true, or unset the style sheet disabled flag otherwise.

6.1.2 The CSSStyleSheet Interface

The CSSStyleSheet interface represents a CSS style sheet rule.

interface CSSStyleSheet : StyleSheet {
    readonly attribute CSSRule? ownerRule;
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
};

ownerRule of type CSSRule?, readonly

The ownerRule attribute must return the style sheet owner CSS rule or null if none. If a value other than null is ever returned, than that same value must always be returned on each get access.

cssRules of type CSSRuleList, readonly

The cssRules attribute must return a read-only, live CSSRuleList object representing the style sheet CSS rules. The same object must be returned on each get access.

Even though the returned CSSRuleList object is read-only (from the perspective of client-authored script), it may nevertheless change over time due to its liveness status. For example, invoking the insertRule or deleteRule operation may result in mutations reflected in the returned object.

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

The insertRule operation performs insert a CSS rule rule as follows:

1. Set newRule to the results of performing parse a CSS rule on argument rule, throwing a "SyntaxError" exception if a parse error occurs.

2. Set N to cssLength.length.

3. If argument index is greater than N, then throw an "IndexSizeError" exception.

4. If the rule newRule cannot be inserted into the specified index due to constraints specified by [CSS], then throw a "HierarchyRequestError" exception.

   For example, a CSS style sheet cannot contain more than one @charset rule, which, if present, must be the first rule.

5. Set newRule.parentStyleSheet to this (i.e., this CSSStyleSheet instance object).

6. Insert rule newRule into cssRules at the zero-indexed position index.

7. Return index.

If a new rule is inserted, then any rule previously located at position index through N minus 1 is shifted to position index plus 1 through N, In addition, cssRules.length is (internally) incremented.

DOM-2 CSS specifies that a NO_MODIFICATION_ALLOWED_ERR exception is thrown if the style sheet is read-only. Are there any read-only style sheets?

deleteRule (unsigned long index), returns void

The deleteRule operation performs remove a CSS rule as follows:

1. Set N to cssLength.length.

2. If argument index is greater than or equal to N, then throw an "IndexSizeError" exception.

3. Set oldRule to cssRules.prototype.item(index).

4. Set oldRule.parentStyleSheet to null.

5. Remove rule oldRule from cssRules at the zero-indexed position index.

If an existing rule is deleted, then any rule previously located at position index plus 1 through N minus 1 is shifted to position index through N minus 2, In addition, cssRules.length is (internally) decremented.

6.2 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 style sheets, named the document style sheets. This is an ordered list that contains all style sheets associated with the Document, in tree order, with style sheets created from HTTP Link headers first, if any, in header order.

To create a style sheet, run these steps:

1. Create a new style sheet object and set its properties as specified.

2. Then run the add a style sheet steps for the newly created style sheet.

To add a style sheet, run these steps:

1. Add the style sheet to the list of document style sheets at the appropriate location. The remainder of these steps deal with the style sheet disabled flag.

2. If the style sheet disabled flag is set, terminate these steps.

3. If the style sheet title is non-empty, the style sheet alternate flag is clear, and preferred style sheet set name is the empty string change the preferred style sheet set name to the style sheet title.

4. If any of the following is true clear the style sheet disabled flag and terminate these steps:

   • The style sheet title is empty.

   • The last style sheet set name is null and the style sheet title is a case-sensitive match for the preferred style sheet set name.

   • The style sheet title is a case-sensitive match for the last style sheet set name.

5. Set the style sheet disabled flag.

A persistent style sheet is a style sheet from the document style sheets whose style sheet title is the empty string and whose style sheet alternate flag is clear.

A style sheet set is an ordered collection of one or more style sheets from the document style sheets which have an identical style sheet title that is not the empty string.

A style sheet set name is the style sheet title the style sheet set has in common.

An enabled style sheet set is a style sheet set of which each style sheet has its style sheet disabled flag clear.

To enable a style sheet set with name name, run these steps:

1. If name is the empty string, set the style sheet disabled flag for each style sheet that is in a style sheet set and terminate these steps.

2. Clear the style sheet disabled flag for each style sheet in a style sheet set whose style sheet set name is a case-sensitive match for name and set it for all other style sheets in a style sheet set.

To select a style sheet set with name name, run these steps:

1. Enable a style sheet set with name name.

2. Set last style sheet set name to name.

A last style sheet set name is a concept to determine what style sheet set was last selected. Initially its value is null.

A preferred style sheet set name is a concept to determine which style sheets need to have their style sheet disabled flag clear. Initially its value is the empty string.

To change the preferred style sheet set name with name name, run these steps:

1. Let current be the preferred style sheet set name.

2. Set preferred style sheet set name to name.

3. If name is not a case-sensitive match for current and last style sheet set name is null enable a style sheet set with name name.

6.2.1 The HTTP Default-Style Header

The HTTP Default-Style header can be used to set the preferred style sheet set name influencing which style sheet set is (initially) the enabled style sheet set.

For each HTTP Default-Style header, in header order, the user agent must change the preferred style sheet set name with name being the value of the header.

6.2.2 The StyleSheetList Sequence

The StyleSheetList sequence represents an ordered collection of style sheets.

[[TBD - TYPEDEF]]

6.2.3 Extensions to the Document Interface

partial interface Document {
    readonly attribute StyleSheetList styleSheets;
    attribute DOMString? selectedStyleSheetSet;
    readonly attribute DOMString? lastStyleSheetSet;
    readonly attribute DOMString? preferredStyleSheetSet;
    readonly attribute DOMString[] styleSheetSets;
    void enableStyleSheetsForSet (DOMString? name);
};

styleSheets of type StyleSheetList, readonly

The styleSheets attribute must return a StyleSheetList sequence representing the document style sheets.

Because of historical IDL limitations the styleSheets attribute used to be on a separate interface, DocumentStyle.

selectedStyleSheetSet of type DOMString?

The selectedStyleSheetSet attribute must, on getting, must run these steps:

1. If there is a single enabled style sheet set and no other document style sheets with a non-empty style sheet title have the style sheet disabled flag unset, return the style sheet set name of the enabled style sheet set and terminate these steps.

2. Otherwise, if style sheets from different style sheet sets have their style sheet disabled flag unset, return null and terminate these steps.

3. Otherwise, return the empty string.

   At this point either all style sheets with a non-empty style sheet title have the style sheet disabled flag set, or there are no such style sheets.

On setting the selectedStyleSheetSet attribute these steps must be run:

1. If the value is null terminate this set of steps.

2. Otherwise, select a style sheet set with as name the value passed.

From the DOM's perspective, all views have the same selectedStyleSheetSet. If a user agent supports multiple views with different selected alternative style sheets, then this attribute (and the StyleSheet interface's disabled attribute) must return and set the value for the default view.

lastStyleSheetSet of type DOMString?, readonly

The lastStyleSheetSet attribute must return the last style sheet set name.

This attribute is initially null.

preferredStyleSheetSet of type DOMString?, readonly

The preferredStyleSheetSet attribute must return the preferred style sheet set name.

Unlike lastStyleSheetSet, this attribute is initially the empty string.

styleSheetSets of type DOMString[], readonly

The styleSheetSets attribute must return a read only array of the style sheet set names of the style sheet sets, in order of the document style sheets.

enableStyleSheetsForSet (DOMString? name), returns void

The enableStyleSheetsForSet operation must, when invoked, run these steps:

1. If name is null terminate these steps.

2. Enable a style sheet set with name name.

Style sheets with an empty style sheet title are never affected by this method. This method does not change the values of the lastStyleSheetSet or preferredStyleSheetSet attributes.

6.2.4 Interaction with the User Interface

The user interface of Web browsers that support style sheets should list the style sheet titles given in the styleSheetSets list, showing the selectedStyleSheetSet 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 preferredStyleSheetSet is the empty string as well.

Selecting a style sheet from this list should use the select a style sheet set set of steps. This (by definition) affects the lastStyleSheetSet attribute.

6.2.4.1 Persisting the selected style sheet set

If a user agent persist the selected style sheet set, they should use the value of the selectedStyleSheetSet attribute, or if that is null, the lastStyleSheetSet attribute, when leaving the page (or at some other time) to determine the set name to store. If that is null then the style sheet set should not be persisted.

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

This specification does not give any suggestions on how user agents should decide to persist the style sheet set or whether or how to persist the selected set across pages.

6.2.5 Examples

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

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

6.3 Style Sheet Association

This section defines the interface a style sheet owner node of a style sheet has to implement and defines the requirements for xml-stylesheet processing instructions and HTTP Link headers when the link relation type is an ASCII case-insensitive match for "stylesheet" since nobody else was interested in defining this.

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.

6.3.1 The LinkStyle Interface

The associated style sheet of a node is the style sheet in the list of document style sheets of which the style sheet owner node implements the LinkStyle interface.

[NoInterfaceObject]
interface LinkStyle {
    readonly attribute StyleSheet? sheet;
};

sheet of type StyleSheet?, readonly

The sheet attribute must return the associated style sheet for the node or null if there is no associated style sheet.

<style type="text/css">
  body { background:lime }
</style>

<style type="text/example-sheets">
  $(body).background := lime
</style>

Whether or not the node refers to a style sheet is defined by the specification that defines the semantics of said node.

6.3.2 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 style sheet is created.

6.3.3 Requirements on User Agents Implementing the xml-stylesheet processing instruction

[[TBD - IMPLEMENTS]]

For each xml-stylesheet processing instruction that is not part of the document type declaration and has an href pseudo-attribute these steps must (unless otherwise stated) be run:

1. Let title be the value of the title pseudo-attribute or the empty string if the title pseudo-attribute is not specified.

2. If there is an alternate pseudo-attribute whose value is a case-sensitive match for "yes" and title is the empty string terminate these steps.

3. If there is a type pseudo-attribute whose value is not a supported styling language the user agent may terminate these steps.

4. Resolve the URL specified by the href pseudo-attribute and then fetch it.

5. When the resource is available, the document is in quirks mode and the Content-Type metadata of the resource is not a supported styling language change the Content-Type metadata of the resource to text/css.

   This step might never actually happen, but is included here in case other specifications change, to keep things consistent.

6. If the resource is not in a supported styling language terminate these steps.

7. Create a style sheet with the following properties:

   style sheet location

   The absolute URL of the resource.

   style sheet parent

   null

   style sheet owner node

   The node.

   style sheet owner CSS rule

   null

   style sheet media

   The value of the media pseudo-attribute if any, or the empty string otherwise.

   style sheet title

   title

   style sheet alternate flag

   Set if the alternate pseudo-attribute value is a case-sensitive match for "yes", or clear otherwise.

6.3.4 Requirements on User Agents Implementing the HTTP Link Header

For each HTTP Link header of which one of the link relation types is an ASCII case-insensitive match for "stylesheet" these steps must be run:

1. Let title be the value of the first of all the title and title* parameters. If there are no such parameters it is the empty string.

2. If one of the (other) link relation types is an ASCII case-insensitive match for "alternate" and title is the empty string terminate these steps.

3. Resolve the specified URL and fetch it.

4. When the resource is available, the document is in quirks mode and the Content-Type metadata of the resource is not a supported styling language change the Content-Type metadata of the resource to text/css.

5. If the resource is not in a supported styling language terminate these steps.

6. Create a style sheet with the following properties:

   style sheet location

   The absolute URL of the resource.

   style sheet owner node

   null

   style sheet parent

   null

   style sheet owner CSS rule

   null

   style sheet media

   The value of the first media parameter.

   style sheet title

   title

   style sheet alternate flag

   Set if one of the specified link relation type for this HTTP Link header is an ASCII case-insensitive match for "alternate", or false otherwise.

6.4 CSS Rules

A CSS rule is an abstract concept that denotes a rule as defined by the CSS specification. A CSS rule is represented as an object that implements a subclass of the CSSRule interface, and which has the following associated state items:

rule type

A non-negative integer associated with a particular type of rule. This item is initialized when a rule is created and must never change.

rule text

A text representation of the rule suitable for direct use in a style sheet. This item is initialized when a rule is created, and may change over the lifetime of the rule.

rule parent

An optional reference to another, enclosing CSS rule. If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null. Subsequent to initialization, this item is reset to null if the rule becomes non-enclosed. Once reset to null, it must never change.

rule parent style sheet

An optional reference to an associated CSS style sheet. This item is initialized to reference an associated style sheet when the rule is created. Subsequent to initialization, this item is reset to null if the rule becomes disassociated from its initial style sheet. Once reset to null, it must never change.

In addition to the above state, each CSS rule may be associated with other state in accordance with its rule type.

To parse a CSS rule ...

Should a rule be instantiated in OM if there is a parse error? To what extent should original (but non-valid) CSS text be captured in cssText?

To serialize a CSS rule, perform one of the following in accordance with the rule's type:

CSSStyleRule

The result of concatenating the following:

1. The result of performing serialize a group of selectors on the rule's associated selectors.
2. The string " { ", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B), followed by a single SPACE (U+0020).
3. The result of performing serialize a CSS declaration block on the rule's associated declarations.
4. If the rule is associated with one or more declarations, the string " ", i.e., a single SPACE (U+0020).
5. The string "}", RIGHT CURLY BRACKET (U+007D).

CSSCharsetRule

The result of concatenating the following:

1. The string "@charset" followed by a single SPACE (U+0020).
2. The result of performing serialize a string on the rule's charact3er encoding.
3. The string ";", i.e., SEMICOLON (U+003B).

@charset "UTF-8";

CSSImportRule

The result of concatenating the following:

1. The string "@import" followed by a single SPACE (U+0020).
2. The result of performing serialize a URL on the rule's location.
3. If the rule's associated media list is not empty, a single SPACE (U+0020) followed by the result of performing serialize a media query list on the media list.
4. The string ";", i.e., SEMICOLON (U+003B).

@import url("import.css");

@import url("print.css") print;

CSSMediaRule

...

CSSFontFaceRule

...

CSSPageRule

...

CSSNamespaceRule

The literal string "@namespace", followed by a single SPACE (U+0020), followed by the identifier escaped value of the prefix attribute (if any), followed by a single SPACE (U+0020) if there is a prefix, followed by the URL escaped value of the namespaceURI attribute, followed the character ";" (U+003B).

6.4.1 The CSSRuleList Sequence

The CSSRuleList sequence represents an ordered collection of CSS style rules.

[[TBD - TYPEDEF]]

6.4.2 The CSSRule Interface

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.

interface CSSRule {
    const unsigned short STYLE_RULE = 1;
    const unsigned short CHARSET_RULE = 2;
    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 NAMESPACE_RULE = 10;
    readonly attribute unsigned short type;
    attribute DOMString cssText;
    readonly attribute CSSRule? parentRule;
    readonly attribute CSSStyleSheet? parentStyleSheet;
};

STYLE_RULE of type unsigned short, with value 1

When the value of the type attribute is STYLE_RULE, then the object that implements this interface must implement the CSSStyleRule interface.

CHARSET_RULE of type unsigned short, with value 2

When the value of the type attribute is CHARSET_RULE, then the object that implements this interface must implement the CSSCharsetRule interface.

IMPORT_RULE of type unsigned short, with value 3

When the value of the type attribute is IMPORT_RULE, then the object that implements this interface must implement the CSSImportRule interface.

MEDIA_RULE of type unsigned short, with value 4

When the value of the type attribute is MEDIA_RULE, then the object that implements this interface must implement the CSSMediaRule interface.

FONT_FACE_RULE of type unsigned short, with value 5

When the value of the type attribute is FONT_FACE_RULE, then the object that implements this interface must implement the CSSFontFaceRule interface.

PAGE_RULE of type unsigned short, with value 6

When the value of the type attribute is PAGE_RULE, then the object that implements this interface must implement the CSSPageRule interface.

NAMESPACE_RULE of type unsigned short, with value 10

When the value of the type attribute is NAMESPACE_RULE, then the object that implements this interface must implement the CSSNamespaceRule interface.

type of type unsigned short, readonly

The type attribute must return one of the following values: STYLE_RULE, IMPORT_RULE, MEDIA_RULE, FONT_FACE_RULE, PAGE_RULE, NAMESPACE_RULE, or a registered extension value.

The value 0, formerly known as UNKNOWN_RULE, is made obsolete by this specification. This value will not be re-allocated in the future and shall remain reserved.

Constants for new and proprietary rule types are coordinated on the CSSOM Constants wiki page.

cssText of type DOMString

The cssText attribute must return a serialization of the CSS rule.

On setting the cssText attribute these steps must be run:

1. Parse the value.

2. If parsing failed terminate this algorithm.

3. If the type of the new object does not match the type of the current object throw an 'InvalidModificationError' exception.

4. Replace the current object with the new object.

parentRule of type CSSRule?, readonly

The parentRule attribute must return the nearest enclosing rule of the current rule or null if there is none. If a value other than null is ever returned, than that same value must always be returned on each get access.

For example, @media can enclose a rule, in which case ownerRule would be non-null; in cases where there is no enclosing rule, ownerRule will be null.

parentStyleSheet of type CSSStyleSheet?, readonly

The parentStyleSheet attribute must return the CSSStyleSheet object that contains the the current rule or null if there is none.

The only circumstance where null is returned is in the case that CSSStyleSheet.prototype.deleteRule has been invoked to remove a CSS rule from a CSS style sheet, in which case its parentStyleSheet property will have been set to null.

Removing an Node that implements the LinkStyle interface from a Document instance does not (by itself) cause the CSSStyleSheet referenced by a CSSRule to be unreachable; that is, as long as there exists a reachable reference to a CSSRule object, then its parentStyleSheet property remains viable if it has not been previously removed from the style sheet by using the deleteRule operation.

6.4.3 The CSSStyleRule Interface

The CSSStyleRule interface represents a rule set.

interface CSSStyleRule : CSSRule {
    attribute DOMString selectorText;
    readonly attribute CSSStyleDeclaration style;
};

selectorText of type DOMString

The selectorText attribute, on getting, must return the result of serializing the associated group of selectors.

On setting the selectorText attribute these steps must be run:

1. Run the parse a group of selectors algorithm on the given value.

2. If the algorithm returns a non-null value replace the associated group of selectors with the returned value.

3. Otherwise, if the algorithm returns a null value, do nothing.

style of type CSSStyleDeclaration, readonly

The style attribute must return a CSSStyleDeclaration object for the rule set.

6.4.4 The CSSCharsetRule Interface

6.4.5 The CSSImportRule Interface

The CSSImportRule interface represents an @import rule.

interface CSSImportRule : CSSRule {
    readonly attribute DOMString href;
    [PutForwards=mediaText] readonly attribute MediaList media;
    readonly attribute CSSStyleSheet styleSheet;
};

href of type DOMString, readonly

The href attribute must return the URL specified by the @import rule.

To get the resolved URL use the href attribute of the associated style sheet.

media of type MediaList, readonly

The media attribute must return the value of the media attribute of the associated style sheet.

styleSheet of type CSSStyleSheet, readonly

The styleSheet attribute must return the associated style sheet.

If loading of the style sheet fails its cssRules list is simply empty, i.e., an @import rule always has an associated style sheet.

6.4.6 The CSSMediaRule Interface

The CSSMediaRule interface represents a @media rule.

interface CSSMediaRule : CSSRule {
    [PutForwards=mediaText] readonly attribute MediaList media;
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
};

media of type MediaList, readonly

The media attribute must return a MediaList object for the list of media queries specified with the @media rule.

cssRules of type CSSRuleList, readonly

The cssRules attribute must return a CSSRuleList object for the list of CSS rules specified with the @media rule.

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

The insertRule operation must insert a CSS rule rule into the CSS rule list returned by cssRules at index.

deleteRule (unsigned long index), returns void

The deleteRule operation must remove a CSS rule from the CSS rule list returned by cssRules at index.

6.4.7 The CSSFontFaceRule Interface

The CSSFontFaceRule interface represents a @font-face rule.

interface CSSFontFaceRule : CSSRule {
    readonly attribute CSSStyleDeclaration style;
};

style of type CSSStyleDeclaration, readonly

The style attribute must return a CSSStyleDeclaration block that contains the property declarations specified within the @font-face rule.

6.4.8 The CSSPageRule Interface

The CSSPageRule interface represents a @page rule.

Need to define the rules for parse a CSS page selector and serialize a CSS page selector.

interface CSSPageRule : CSSRule {
    attribute DOMString selectorText;
    readonly attribute CSSStyleDeclaration style;
};

selectorText of type DOMString

The selectorText attribute, on getting, must return the result of serializing the associated CSS page selector.

On setting the selectorText attribute these steps must be run:

1. Run the parse a CSS page selector algorithm on the given value.

2. If the algorithm returns a non-null value replace the associated CSS page selector with the returned value.

3. Otherwise, if the algorithm returns a null value, do nothing.

style of type CSSStyleDeclaration, readonly

The style attribute must return a CSSStyleDeclaration for the @page rule.

6.4.9 The CSSNamespaceRule Interface

The CSSNamespaceRule interface represents a @namespace rule.

interface CSSNamespaceRule : CSSRule {
    readonly attribute DOMString namespaceURI;
    readonly attribute DOMString? prefix;
};

namespaceURI of type DOMString, readonly

The namespaceURI attribute must return the namespace of the @namespace rule.

prefix of type DOMString?, readonly

The prefix attribute must return the prefix of the @namespace rule or the empty string if there is no prefix.

6.5 CSS Declaration Blocks

A CSS declaration block is an ordered collection of CSS properties with their associated values, also named CSS declarations. In the DOM a CSS declaration block is a CSSStyleDeclaration object. A CSS declaration block has two associated properties:

CSS declaration block readonly flag

Clear if the object can be manipulated. Set if it can not be manipulated. Unless otherwise stated it is clear.

CSS declaration block declarations

The CSS declarations associated with the object.

The CSS declaration block declarations are ordered. This matters for the item() method.

To parse a CSS declaration block ...

What should be captured in the cssText of a declaration block which fails to parse?

To serialize a CSS declaration block represented by a CSSStyleDeclarations instance named d, let s be the empty string, then run the steps below:

1. If d.length is zero (0), then return s.

2. For each i from zero (0) through d.length - 1 (inclusive), perform the following sub-steps:

   1. Let n be the value returned by d.item(i).

   2. Let v be the value returned by d.getPropertyValue(n).

   3. If v is the empty string, then continue.

   4. Otherwise (v is non-empty), perform the following sub-steps:

      1. If s is not empty, then append a single SPACE (U+0020) to s.

      2. Append n to s.

      3. Append COLON (U+003A) followed by a single SPACE (U+0020), i.e., ": ", to s.

      4. Append v to s.

   5. Let p be the value returned by d.getPropertyPriority(n).

   6. If p is not the empty string, then perform the following sub-steps:

      1. Append a single SPACE (U+0020) followed by EXCLAMATION MARK (U+0021), i.e., " !", to s.

      2. Append p to s.

   7. Append SEMICOLON (U+003B), i.e., ";", to s.

3. Return s.

The serialization of an empty CSS declaration block is the empty string.

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.

6.5.1 The CSSStyleDeclaration Interface

The CSSStyleDeclaration interface represents a CSS declaration block, including its underlying state, where this underlying state depends upon the source of the CSSStyleDeclaration instance.

interface CSSStyleDeclaration {
    attribute DOMString cssText;
    readonly attribute unsigned long length;
    DOMString item (unsigned long index);
    DOMString getPropertyValue (DOMString property);
    DOMString getPropertyPriority (DOMString property);
    void setProperty (DOMString property, DOMString value, optional DOMString priority);
    DOMString removeProperty (DOMString property);
    readonly attribute CSSRule? parentRule;
};

cssText of type DOMString

The cssText attribute must return the result of serializing the CSS declaration block declarations.

Setting the cssText attribute must run these steps:

1. If the CSS declaration block readonly flag is set, throw a NoModificationAllowedError exception and terminate these steps.

2. Empty the CSS declaration block declarations.

3. Parse the given value and, if the return value is not null, insert it into the CSS declaration block declarations.

length of type unsigned long, readonly

The length attribute must return the number of declarations in the CSS declaration block declarations.

parentRule of type CSSRule?, readonly

The parentRule attribute must return the CSSrule object the CSSStyleDeclaration is object is associated with or null if it is not associated with a CSSrule object.

item (unsigned long index), returns DOMString

The item operation must return the name of the property at position index.

getPropertyValue (DOMString property), returns DOMString

The getPropertyValue operation must run these steps:

1. If property is an ASCII case-insensitive match for a property of a declaration in the CSS declaration block declarations, and that declaration's property is defined to be case-insensitive, return the serialization of that declaration's value.

2. If property is a case-sensitive match for a property of a declaration in the CSS declaration block declarations, and that declaration's property is defined to be case-sensitive, return the serialization of that declaration's value.

3. Return the empty string.

getPropertyPriority (DOMString property), returns DOMString

The getPropertyPriority operation must run these steps:

1. If property is an ASCII case-insensitive match for a property of a declaration in the CSS declaration block declarations that has a priority, and that declaration's property is defined to be case-insensitive, return the canonical priority of that property as given in the syntax definition.

2. If property is a case-sensitive match for a property of a declaration in the CSS declaration block declarations that has a priority, and that declaration's property is defined to be case-sensitive, return the canonical priority of that property as given in the syntax definition.

3. Return the empty string.

   E.g. for background-color:lime !IMPORTANT the return value would be 'important'.

setProperty (DOMString property, DOMString value, optional DOMString priority), returns void

The setProperty operation must run these steps:

1. If the CSS declaration block readonly flag is set, throw an 'NoModificationAllowedError' and terminate these steps.

2. If property is not an ASCII case-insensitive match for a supported property that is defined to be case-insensitive, terminate this algorithm.

3. If property is not a case-sensitive match for a supported property that is defined to be case-sensitive, terminate this algorithm.

4. If value is the empty string, invoke removeProperty() with property as argument and terminate this algorithm.

5. If the priority argument has been omitted let priority be the empty string.

6. If priority is neither a valid priority nor the empty string terminate this algorithm.

7. If parsing the value returns null terminate this algorithm.

   value can not include '!important'.

8. Finally, set property to value with priority priority when priority is not the empty string. Otherwise set property to value.

removeProperty (DOMString property), returns DOMString

The removeProperty operation must run these steps:

1. If the CSS declaration block readonly flag is set, throw a 'NoModificationAllowedError' and terminate these steps.

2. Let value be the return value of invoking getPropertyValue() with property as argument.

3. If property is an ASCII case-insensitive match for a property of a declaration in the CSS declaration block declarations, and that property is defined to be a case-insensitive property, remove the declaration.

4. If property is a case-sensitive match for a property of a declaration in the CSS declaration block declarations, and that property is defined to be a case-sensitive property, remove the declaration.

5. Return value.

If the user agent supports the 'float' CSS property, the following partial interface applies.

partial interface CSSStyleDeclaration {
    [TreatNullAs=EmptyString] attribute DOMString cssFloat;
};

cssFloat of type DOMString

The cssFloat attribute, on getting, must return the result of invoking getPropertyValue() with 'float' as argument. On setting, the attribute must invoke setProperty() with 'float' as first argument, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.

For each CSS property property that the user agent supports, except for the 'float' property, the following partial interface applies where attribute is obtained by running the CSS property to IDL attribute algorithm for property.

partial interface CSSStyleDeclaration {
    [TreatNullAs=EmptyString] attribute DOMString attribute;
};

attribute of type DOMString

Getting the attribute attribute must return the result of invoking getPropertyValue() with as argument the result of running the IDL attribute to CSS property algorithm for attribute.

Setting the attribute attribute must invoke setProperty() with as first argument the result of running the IDL attribute to CSS property algorithm for attribute, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.

The CSS property to IDL attribute algorithm for property is as follows:

1. Let output be the empty string.

2. Let uppercase next be unset.

3. For each character c in property:

   1. If c is "-" (U+002D), let uppercase next be set.

   2. Otherwise, if uppercase next is set, let uppercase next be unset and append c converted to ASCII uppercase to output.

   3. Otherwise, append c to output.

4. Return output.

The IDL attribute to CSS property algorithm for attribute is as follows:

1. Let output be the empty string.

2. For each character c in attribute:

   1. If c is in the range U+0041 to U+005A (ASCII uppercase), append "-" (U+002D) followed by c converted to ASCII lowercase to output.

   2. Otherwise, append c to output.

3. Return output.

6.6 CSS Values

6.6.1 Parsing CSS Values

To parse a CSS value for a given property means to a parse the given value according to the definition of the property that is an ASCII case-insensitive match for property in the CSS specification, if property is defined to be case-insensitive, or otherwise that is a case-sensitive match for property in the CSS specification. If the given value is ignored return null. Otherwise return the CSS value for the given property.

"!important" declarations are not part of the property value space and will therefore cause parse a CSS value to return null.

6.6.2 Serializing CSS Values

To serialize a CSS value follow these rules:

• Serialize any CSS component values in the value.

• Where multiple CSS component values can appear in any order without changing the meaning of the value (typically represented by a double bar || in the value syntax), use the order as given in the syntax.

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

  E.g. margin: 20px 20px becomes margin: 20px.

  E.g. the value 0 for the 'border' property.

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

• If a value has a whitespace-separated list of CSS component values, serialize the value as a whitespace-separated list.

• If a value has a comma-separated list of CSS component values, serialize the value as a comma-separated list.

To serialize a CSS component value depends on the component, as follows:

keyword

The keyword converted to ASCII lowercase.

<angle>

The number of degrees serialized as per <number> followed by the literal string "deg".

<color>

If <color> is a component of a resolved or computed value, then return the color using the rgb() or rgba() functional notation as follows:

1. If the alpha component of the color is equal to one, then return the serialization of the rgb() functional equivalent of the opaque color.
2. If the alpha component of the color is not equal to one, then return the serialization of the rgba() functional equivalent of the non-opaque color.

The serialization of the rgb() functional equivalent is the concatenation of the following:

1. The string "rgb(".
2. The shortest base-ten integer serialization of the color's red component.
3. The string ", ".
4. The shortest base-ten serialization of the color's green component.
5. The string ", ".
6. The shortest base-ten serialization of the color's blue component.
7. The string ")".

The serialization of the rgba() functional equivalent is the concatenation of the following:

1. The string "rgba(".
2. The shortest base-ten serialization of the color's red component.
3. The string ", ".
4. The shortest base-ten serialization of the color's green component.
5. The string ", ".
6. The shortest base-ten serialization of the color's blue component.
7. The string ", ".
8. The shortest serialization of the <number> that denotes the color's alpha component.
9. The string ")".

In the above rules, the string ", " denotes a COMMA (U+002C) followed by a single SPACE (U+0020).

If <color> is a component of a specified value, then return the color as follows:

1. If the color was explicitly specified by the author, then return the original, author specified color value.
2. Otherwise, return the value that would be returned if the color were a component of a computed value.

Should author specified values be normalized for case? Or should original case be preserved?

<counter>

The concatenation of:

1. If <counter> has three CSS component values the string "counters(".

2. If <counter> has two CSS component values the string "counter(".

3. The result of serializing the serialized CSS component values belonging to <counter> as list while omitting the last CSS component value if it is 'decimal'.

4. ")" (U+0029).

<frequency>

The frequency in hertz serialized as per <number> followed by the literal string "hz".

<identifier>

The identifier escaped.

<integer>

A base-ten integer using digits 0-9 (U+0030 to U+0039) in the shortest form possible, preceded by "-" (U+002D) if it is negative.

<length>

A length of zero is represented by the literal string "0px".

Absolute lengths: the number of millimeters serialized as per <number> followed by the literal string "mm".

Rumor has it absolute lengths will become relative lengths. Centimeters would be compatible with <resolution>...

Relative lengths: the <number> component serialized as per <number> followed by the unit in its canonical form as defined in its respective specification.

<number>

Browsers seem to use ToString(), but that might give a significand which according to some is teh evil (and also currently does not parse correctly).

<percentage>

The <number> component serialized as per <number> followed by the literal string "%" (U+0025).

<resolution>

The resolution in dots per centimeter serialized as per <number> followed by the literal string "dpcm".

<shape>

The string "rect(", followed by the result of serializing the serialized CSS component values belonging to <shape> as list, followed by ")" (U+0029).

<string>

<family-name>

<specific-voice>

The string string escaped.

<time>

The time in seconds serialized as per <number> followed by the literal string "s".

<uri>

The absolute URL URL escaped.

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

One idea is that we can remove this section somewhere in the CSS3/CSS4 timeline by moving the above definitions to the drafts that define the CSS components.

6.6.2.1 Examples

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

7 DOM Access to CSS Declaration Blocks

7.1 The ElementCSSInlineStyle Interface

The ElementCSSInlineStyle interface provides access to inline style properties of an element.

[NoInterfaceObject]
interface ElementCSSInlineStyle {
    [PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

style of type CSSStyleDeclaration, readonly

The style attribute must return a CSS declaration block with the CSS declaration block declarations being set to the declarations specified in the element's style content attribute. If the style content attribute is absent, the object represents an empty declaration. Mutating the CSSStyleDeclaration object must set the style content attribute on the element to the serialization of the CSSStyleDeclaration's CSS declaration block declarations. The same object must be returned each time. The object is be live; if the style content attribute is set, changed or removed, the CSS declaration block declarations must be updated as appropriate.

7.2 Extensions to the Window Interface

partial interface Window {
    CSSStyleDeclaration getComputedStyle (Element elt, optional DOMString pseudoElt);
    CSSStyleDeclaration getDefaultComputedStyle (Element elt, optional DOMString pseudoElt);
};

getComputedStyle (Element elt, optional DOMString pseudoElt), returns CSSStyleDeclaration

The getComputedStyle operation must run these steps:

1. Let doc be the Document associated with the Window object on which the method was invoked.

2. Let obj be elt.

3. If pseudoElt is as an ASCII case-insensitive match for either ':before' or '::before' let obj be the '::before' pseudo-element of elt.

4. If pseudoElt is as an ASCII case-insensitive match for either ':after' or '::after' let obj be the '::after' pseudo-element of elt.

5. Return a CSS declaration block with the CSS declaration block readonly flag set and the CSS declaration block declarations set to all properties the user agent supports with as value the resolved value computed for obj using the style rules associated with doc.

   This means that even if obj is in a different document (e.g. one fetched via XMLHttpRequest) it will still use the style rules associated with the document that is associated with the global object on which getComputedStyle() was invoked to compute the CSS declaration block.

Because of historical IDL limitations the getComputedStyle operation used to be on a separate interface, ViewCSS.

getDefaultComputedStyle (Element elt, optional DOMString pseudoElt), returns CSSStyleDeclaration

The getDefaultComputedStyle operation must run these steps:

1. Let doc be the Document associated with the Window object on which the method was invoked.

2. Let obj be elt.

3. If pseudoElt is as an ASCII case-insensitive match for either ':before' or '::before' let obj be the '::before' pseudo-element of elt.

4. If pseudoElt is as an ASCII case-insensitive match for either ':after' or '::after' let obj be the '::after' pseudo-element of elt.

5. Return a CSS declaration block with the CSS declaration block readonly flag set and the CSS declaration block declarations set to all properties the user agent supports with as value the computed value for obj using the user agent-level style rules and user-level style rules associated with doc, ignoring transitions, animations, author-level style rules, author-level presentational hints and override-level style rules.

8 Resolved Values

getComputedStyle() was historically defined to return the "computed value" of an element or pseudo-element. However, the concept of "computed value" changed between revisions of CSS while the implementation of getComputedStyle() had to remain the same for compatibility with deployed scripts. To address this issue this specification introduces the concept of a resolved value.

The resolved value for a given property can be determined as follows:

'line-height'

The resolved value is the used value.

'height'

'margin'

'margin-bottom'

'margin-left'

'margin-right'

'margin-top'

'padding'

'padding-bottom'

'padding-left'

'padding-right'

'padding-top'

'width'

If the property applies to the element or pseudo-element and the resolved value of the 'display' property is not none, the resolved value is the used value. Otherwise the resolved value is the computed value.

'bottom'

'left'

'right'

'top'

If the property applies to a positioned element and the resolved value of the 'display' property is not none, the resolved value is the used value. Otherwise the resolved value is the computed value.

Any other property

The resolved value is the computed value.

9 IANA Considerations

9.1 Default-Style

This section describes a header field for registration in the Permanent Message Header Field Registry.

Header field name

Default-Style

Applicable protocol

http

Status

standard

Author/Change controller

W3C

Specification document(s)

This document is the relevant specification.

Related information

None.

References

Normative references

Informative references

Change History

This section documents the primary technical changes of CSSOM related functionality, with a focus on changes to API signatures.

Changes From DOM-2 Style

• Remove definition of CSSRule.UNKNOWN_RULE, reserving its value (0) to prevent future reuse.

• Remove definition of DOMImplementationCSS interface.

Acknowledgments

The editors would like to thank Alexey Feldgendler, Björn Höhrmann, Boris Zbasky, Brian Kardell, Christian Krebs, Daniel Glazman, David Baron, fantasai, Hallvord R. M. Steen, Ian Hickson, John Daggett, Lachlan Hunt, Morten Stenshorne, Philip Taylor, Robert O'Callahan, Sjoerd Visscher, Sylvain Galineau, Tarquin Wilton-Jones, and Zack Weinberg for contributing to this specification.

Additional thanks to Ian Hickson for writing the initial version of the alternative style sheets API and canonicalization (now serialization) rules for CSS values.