CSSOM

Abstract

CSSOM defines how style sheets interact with the DOM and defines an API for CSS style sheets.

Status of this Document

The plan is that this document provides the successor to DOM Level 2 Style.

Table of Contents

Introduction

...

History

Several interfaces from DOM Level 2 Style have been obsoleted because they where thought to be too awkward for frequent use. This specification no longer contains those features. DOMImplementationCSS and CSSCharsetRule have been removed as well as they were not deemed necessary.

Conformance Requirements

Everything in this specification is normative except for diagrams, examples, notes and sections marked non-normative.

The key words must, must not, required, shall, shall not, should, should not, recommended, may, and optional in the normative parts of this document are to be interpreted as described in RFC 2119 [RFC2119].

Terminology

resolve a URL, case-sensitive, ASCII case-insensitive, URL, Content-Type metadata, supported styling language, xml-stylesheet processing instruction, fetch, ...

A color component integer is a base-ten integer in the range 0-255 using digits 0-9, U+0030 to U+0039, in the shortest form possible.

A color component separator is a literal U+002C COMMA followed by a U+0020 SPACE.

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.

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.

Parsing Media Queries

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

To parse a list of media queries for a given string s into a list of media queries is defined in the Media Queries specification. Return the list of one or more media queries that the algorithm defined there gives.

If everything ends up being ignored the list will contain the media query "not all".

Serializing Media Queries

To serialize a media query run these steps:

1. Let s be the empty string.

2. If the media query is negated append the literal string "not", followed by a U+0020 SPACE character, to s.

3. Let type be the media query, converted to ASCII lowercase.

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

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

6. Sort the media features in lexicographical order.

7. Then, for each media feature:

   1. Append a U+0028 LEFT PARENTHESIS character, followed by the media feature name, converted to ASCII lowercase, to s.

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

   3. Append a U+0029 RIGHT PARENTHESIS character to s.

   4. If this is not the last media feature append a U+0020 SPACE character, followed by the literal string "and", followed by a U+0020 SPACE character, to s.

8. Return s.

To serialize a list of media queries run these steps:

1. Let s be the empty string.

2. If the list is empty return s and terminate this algorithm.

3. For each media query in the list:

   1. Append the result of serializing the media query to s.

   2. If this is not the last media query append a "," (U+002C), followed by a space (U+0020) to s.

4. Return s.

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.

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.

The MediaList Interface

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

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

The mediaText attribute must, on getting, return a serialization of the list of media qeuries.

On setting the mediaText attribute these steps must be run:

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.

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

The item(index) method, when invoked, must return the item in the list given by index, or null, if index is greater than or equal to the number of items in the list.

The appendMedium(medium) method must, when invoked, 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.

The deleteMedium(medium) method must, when invoked, 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.

Creating a MediaList Object

To create a MediaList object from s run these steps:

1. Create a new MediaList object.

2. Set its mediaText attribute to s.

3. Return the newly created MediaList object.

Selectors

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

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.

To serialize a group of selectors run these steps:

1. Remove leading and trailing whitespace.

2. Replace one or more consecutive whitespace characters with a single U+0020 SPACE character.

3. Make sure combinators other than the descendant combinator are preceded and followed by a single U+0020 SPACE character (and not more).

4. Make sure each U+002C COMMA (,) character is followed by a single U+0020 SPACE character (and not more).

5. If there is no default namespace and the namespace prefix of a type selector or universal selector is set to a U+002A ASTERISK (*) character remove the namespace component of that type selector or universal selector.

6. Remove any universal selectors that can be omitted.

7. Follow these rules for serializing attribute selectors:

   • If there is no namespace prefix (which includes the asterisk) remove the U+007C VERTICAL LINE (|) before the attribute name if it is present.

   • If an identifier was given as value insert a leading and trailing U+0022 QUOTATION MARK (") character around the identifier and escape any U+0022 QUOTATION MARK (") characters in the value by inserting a U+005C REVERSE SOLIDUS (\) character in front of them.

8. Pseudo-classes without arguments and pseudo-elements are serialized to their canonical form as given in the specification that defines them.

   E.g. :HOver becomes :hover and :befoRe becomes ::before.

9. The rules for pseudo-classes with arguments are to serialize their name to their canonical name as given in the specification, remove any leading and trailing whitespace around the argument, and serialize the value as follows:

   If the pseudo-class is :lang()

   The literal value.

   If the pseudo-class is :nth-child(), :nth-last-child(), :nth-of-type(), or :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 string.

   4. If a is one or minus one and b is zero let the value be "n".

   5. If a is one or minus one let the value be "n" followed by a U+002B PLUS SIGN (+) character if b is positive, followed by b serialized as string.

   6. If b is zero let the value be a serialized as string followed by "n".

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

   If the pseudo-class is :not()

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

   Any other pseudo-class

   Hopefully Selectors Level 4 defines serialization itself.

Style Sheets

Style Sheet

A style sheet is an abstract concept that represents any kind of style sheet. In the DOM a style sheet is a StyleSheet object. A style sheet has a number of associated properties:

style sheet type

The Content-Type metadata of the style sheet.

style sheet location

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

style sheet node

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

style sheet parent

The style sheet that is the parent of the style sheet.

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. It is said to be empty if the title is the empty string.

In these examples the style sheet title ends up being empty:

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

<style> body { background:orange } </style>

style sheet alternate flag

Either true or false. False 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 true or false. False by default.

Even when false it does not necessarily mean that the style sheet is actually rendered.

When you are to create a style sheet the above properties are to be set to their proper values.

The StyleSheet Interface

In the DOM a style sheet is represented by an object that implements the StyleSheet interface.

interface StyleSheet {
  readonly attribute DOMString type;
  readonly attribute DOMString href;
  readonly attribute Node ownerNode;
  readonly attribute StyleSheet parentStyleSheet;
  readonly attribute DOMString title;
  [PutForwards=mediaText] readonly attribute MediaList media;
           attribute boolean disabled;
};

The type attribute must return the style sheet type.

The href attribute must return the style sheet location.

The ownerNode attribute must return the style sheet node.

The parentStyleSheet attribute must return the style sheet parent.

The title attribute must return the style sheet title.

The media attribute must return the style sheet media.

The disabled attribute must, on getting, return the style sheet disabled flag. On setting, it must set the style sheet disabled flag to the given value.

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 true terminate these steps.

3. If the style sheet title is non-empty, the style sheet alternate flag is false, 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 set the style sheet disabled flag to false 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 to true.

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

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 set to false.

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 to true and terminate these steps.

2. Set 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 to false and set it to true 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 set to false. Initially its value is the empty string.

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

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

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

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.

The StyleSheetList Sequence

The sequence parameterized type represents an ordered collection of style sheets.

typedef sequence<StyleSheet> StyleSheetList;

Extensions to the Document Interface

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

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

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

The selectedStyleSheetSet attribute, 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 set to false return the style sheet set name of the enabled style sheet set and terminate this set of steps.

2. Otherwise, if style sheets from different style sheet sets have their style sheet disabled flag set to false return null and terminate this set of 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 to true 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.

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

This attribute is initially null.

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

Unlike lastStyleSheetSet, this attribute is initially the empty string.

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

The enableStyleSheetsForSet(name) method 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.

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.

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.

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>

Style Sheet Association

This section defines the interface a style sheet node of a style sheet has to implement and defines the requirements for xml-stylesheet processing instructions and HTTP Link headers when the link releation 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.

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 node implements the LinkStyle interface.

interface LinkStyle {
  readonly attribute StyleSheet sheet;
};

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.

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.

Requirements on User Agents Implementing the xml-stylesheet processing instruction

ProcessingInstruction implements LinkStyle;

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 type

   The Content-Type metadata of the resource.

   style sheet location

   The absolute URL of the resource.

   style sheet node

   The node.

   style sheet parent

   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

   True if the alternate pseudo-attribute value is a case-sensitive match for "yes". Otherwise, false.

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 type

   The Content-Type metadata of the resource.

   style sheet location

   The absolute URL of the resource.

   style sheet node

   null

   style sheet parent

   null

   style sheet media

   The value of the first media parameter.

   style sheet title

   title

   style sheet alternate flag

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

CSS Style Sheets

This section (and its subsections) are only applicable to user agents implementing CSS.

This section defines an API for CSS style sheets.

CSS Style Sheet

A CSS style sheet is a style sheet as defined by the CSS specification. Besides the properties associated with style sheets in general, there are a few specific to CSS style sheets:

style sheet parent rule

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

style sheet rules

The CSS rules associated with the CSS style sheet.

The CSSStyleSheet Interface

The CSSStyleSheet interface represents a CSS style sheet.

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

The ownerRule attribute must return the style sheet parent rule.

The cssRules attribute must return a CSSRuleList object representing the style sheet rules.

CSS rules that were dropped during parsing can not be found using APIs described by this specification.

The insertRule(rule, index) method must insert a CSS rule rule the in CSS rule list returned by cssRules at index.

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

CSS Rules

To parse a CSS rule ...

To serialize a CSS rule depends on the type of CSS rule, as follows:

CSSStyleRule

...

CSSImportRule

The result of concatenating these strings:

1. The literal string "@import", followed by a space (U+0020), followed by the URL escaped value of the href attribute.
2. If the associated MediaList object is not empty, a space (U+0020), followed by the value of the mediaText attribute of the associated MediaList object.
3. A ";" (U+003B).

CSSMediaRule

...

CSSFontFaceRule

...

CSSPageRule

...

CSSNamespaceRule

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

To insert a CSS rule rule into a CSS rule list list at location index follow these steps:

1. If index is negative or greater than the length of the list raise an INDEX_SIZE_ERR exception and terminate these steps.

2. Parse rule.

3. If parsing failed terminate these steps.

4. If the new object can not be inserted within the list at the given index due to limitations of the CSS specification raise a HIERARCHY_REQUEST_ERR exception and terminate these steps.

5. Insert the new object at the given index within the list.

To remove a CSS rule from CSS rule list list at location index follow these steps:

1. If index is negative or greater than the length of the list raise an INDEX_SIZE_ERR exception and terminate these steps.

2. Remove the object at index from list.

The CSSRuleList Sequence

The CSSRuleList object represents an ordered collection of CSS rules.

typedef sequence<CSSRule> CSSRuleList;

The CSSRule Interface

The CSSRule interface is a base interface. Each unique CSS rule has its own interface which inherits from this one.

interface CSSRule {
  // Types
  const unsigned short STYLE_RULE = 1;
  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 = 8;
  readonly attribute unsigned short type;

  // Parsing and serialization
           attribute DOMString cssText;
  
  // Context
  readonly attribute CSSRule parentRule;
  readonly attribute CSSStyleSheet parentStyleSheet;
};

The type attribute, on getting, must return the CSS rule type, as follows:

STYLE_RULE (numeric value 1)

The object is a CSSStyleRule.

IMPORT_RULE (numeric value 3)

The object is a CSSImportRule.

MEDIA_RULE (numeric value 4)

The object is a CSSMediaRule.

FONT_FACE_RULE (numeric value 5)

The object is a CSSFontFaceRule.

PAGE_RULE (numeric value 6)

The object is a CSSPageRule.

NAMESPACE_RULE (numeric value 8)

The object is a CSSNamespaceRule.

Constants with values 0 and 2 have been obsoleted by this specification. They might be re-allocated in the future. 7 is reserved for @color-profile.

The cssText attribute, on getting, 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 raise an INVALID_MODIFICATION_ERR exception.

4. Replace the current object with the new object.

The parentRule attribute must return the nearest enclosing rule of the current rule or null, if there is no enclosing rule.

E.g. @media can enclose a rule.

The parentStyleSheet attribute must return the CSSStyleSheet object that contains the the current rule.

Extensibility

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

Vendors are encouraged to use reasonably unique values outside this range so that they do not clash with extensions from other vendors. For example, the first value for Mozilla could be 0x08EC0001 and 0x09E8A001 could be the first for Opera.

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

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

CSS Style Rule (Rule Set)

The CSSStyleRule object represents a rule set, providing access to its associated group of selectors and CSS declaration block.

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

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.

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

CSS @import Rule

The CSSImportRule object represents an @import rule.

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

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

To get the resolved URL use the href attribute of the associated CSSStyleSheet object.

The media attribute, on getting, must return the value of the media attribute of the associated CSSStyleSheet object.

The styleSheet attribute, on getting, must return the associated CSSStyleSheet object.

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

CSS @media Rule

The CSSMediaRule object represents an @media rule.

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

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

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

The insertRule(rule, index) method must insert a CSS rule rule into the CSS rule list returned by cssRules at index.

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

CSS @font-face Rule

The CSSFontFaceRule object represents an @font-face rule specified (if any) in a CSS style sheet.

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

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

CSS @page Rule

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

The CSSPageRule object represents an @page rule.

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

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.

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

CSS @namespace Rule

The CSSNamespaceRule object represents an @namespace rule.

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

The namespaceURI attribute, on getting, must return the namespace of the @namespace rule.

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

CSS Declaration Blocks

To parse a CSS declaration block ...

To serialize a CSS declaration block ...

The CSSStyleDeclaration Interface

Objects implementing the CSSStyleDeclaration interface give access to read and manipulate CSS properties and their values within a declaration block.

Objects implementing the CSSStyleDeclaration interface have the following associated concepts:

CSS declaration block readonly flag

Indicates whether or not the object can be modified (as detailed below). True when it cannot. False otherwise and by default.

collection of CSS declarations

The CSS declarations associated with the object.

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

  // CSS Properties

};

The cssText attribute must, on getting, return the result of serializing the collection of CSS declarations.

On setting the cssText attribute these steps must be run:

1. If the CSS declaration block readonly flag is true raise a NO_MODIFICATION_ALLOWED_ERR and terminate this algorithm.

2. Empty the collection of CSS declarations.

3. Parse the given value and, if the return value is not null, append it to the collection of CSS declarations.

The getPropertyValue(property) method, when invoked, ....

The getPropertyPriority(property) method, when invoked, if property is an ASCII case-insensitive match for a property that has a priority user agents must return the canonical priority of that property as given in the syntax definition. Otherwise, the empty string must be returned.

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

When the removeProperty(property) method is invoked these steps must be run:

1. If the CSS declaration block readonly flag is true raise a NO_MODIFICATION_ALLOWED_ERR and terminate this algorithm.

2. If property is an ASCII case-insensitive match for a property of a declaration in the collection of CSS declarations remove the declaration.

When the setProperty(property, value, priority) method is invoked these steps must be run:

1. If the CSS declaration block readonly flag is true raise a NO_MODIFICATION_ALLOWED_ERR and terminate this algorithm.

2. If property does not case-insensitively match a supported property terminate this algorithm.

3. If value is null or the empty string invoke removeProperty() with property as argument and terminate this algorithm.

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

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

6. If parsing the value returns null abort this algorithm.

   value can not include "!important".

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

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

The item(index) method, when invoked, ....

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

For the table below, the IDL attribute in the first column must, on getting return the result of invoking getPropertyValue() with as argument the CSS property given in the second column on the same row.

Similarly for the table below, setting the IDL attribute in the first column must invoke setProperty() with as first argument the CSS property given in the second column on the same row, as second argument the given value, and no third argument. Any exceptions raised must be re-raised.

CSS Values

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

Serializing CSS Values

To serialize a CSS value run these steps:

This needs some work, obviously.

To serialize a CSS value component 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>

preserve system colors, maybe color keywords...

<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 a "-" (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. If not, change to centimeters?

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

<string>

A literal '"' (U+0022), followed by the escaped string value, followed by a literal '"' (U+0022).

<time>

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

<uri>

The absolute URL escaped.

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 space (U+0020).

To escape an identifier means to create a string represented by the concatenation of, for each character of the identifier:

• If the character is in the range U+0000 to U+001F, 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), 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), the character escaped as code point.
• If the character is the second character and is "-" (U+002D) and the first character is "-" too, 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), the character itself.
• Otherwise, the escaped character.

To escape a string means to create a string represented by the concatenation of, for each character of the given string:

• If the character is in the range U+0000 to U+001F, 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 escape a URL means to create a string represented by 'url("', followed by the escaped value of the given string, followed by ").

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.

DOM Access to CSS Declaration Blocks

The ElementCSSInlineStyle Interface

interface ElementCSSInlineStyle {
  readonly attribute CSSStyleDeclaration style;
};

...

Extensions to the Window Interface

[Supplemental] interface Window {
  CSSStyleDeclaration getComputedStyle(Element elt);
  CSSStyleDeclaration getComputedStyle(Element elt, DOMString pseudoElt);
};

The getComputedStyle(elt, pseudoElt) method must return a CSSStyleDeclaration object that contains the computed style declaration block for elt, when the pseudoElt argument is null, the empty string or omitted. Otherwise, for the pseudo-element pseudoElt of elt.

Because of IDL limitations the getComputedStyle() method used to be on a separate interface, ViewCSS.

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.

Since CSS specifications never included the concept of resolved value this specification attempts to define it for the properties defined in CSS 2.1.

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

'background'

'border'

'border-collapse'

'border-color'

'border-spacing'

'border-style'

'border-top'

'border-right'

'border-bottom'

'border-left'

'border-width'

'font'

'list-style'

'margin'

'outline'

'padding'

'pause'

There is no resolved value.

'line-height'

The resolved value is the used value.

'height'

'margin-bottom'

'margin-left'

'margin-right'

'margin-top'

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

Any other property

The resolved value is the computed value.

IANA Considerations

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

This section will be done when going to Last Call. Before that state please ask the author whenever a reference is unclear.

Acknowledgments

The editor would like to thank Alexey Feldgendler, Björn Höhrmann, Christian Krebs, Daniel Glazman, David Baron, fantasai, Hallvord R. M. Steen, Ian Hickson, Lachlan Hunt, Morten Stenshorne, Robert O'Callahan, Sjoerd Visscher, Simon Pieters, Sylvain Galineau, and Tarquin Wilton-Jones for contributing to this specification.

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