CSS Object Model (CSSOM) Module Level 1
CSS Object Model (CSSOM) Module Level 1
This version:
[Link]
Latest published version:
[Link]
Previous Versions:
[Link]
[Link]
[Link]
[Link]
[Link]
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Daniel Glazman (Disruptive Innovations)
Emilio Cobos Álvarez (Mozilla)
Former Editors:
Simon Pieters (Opera Software AS)
Glenn Adams (Cox Communications, Inc.) [Link]@[Link]
Anne van Kesteren (Opera Software ASA) annevk@[Link]
Suggest an Edit for this Spec:
GitHub Editor
Legacy issues list:
Bugzilla
Test Suite:
[Link]
[Link] 1/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
Abstract
CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors,
and of course CSS itself.
CSS is a language for describing the rendering of structured documents (such as HTML and XML) on
screen, on paper, etc.
Please send feedback by filing issues in GitHub (preferred), including the spec code “cssom” in the
title, like this: “[cssom] …summary of comment…”. All issues and comments are archived. Alternately,
feedback can be sent to the (archived) public mailing list www-style@[Link].
Table of Contents
1 Introduction
2 Terminology
2.1 Common Serializing Idioms
3 CSSOMString
4 Media Queries
4.1 Parsing Media Queries
4.2 Serializing Media Queries
4.2.1 Serializing Media Feature Values
4.3 Comparing Media Queries
4.4 about the The
File an issue MediaList
selected text Interface
[Link] 2/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
5 Selectors
5.1 Parsing Selectors
5.2 Serializing Selectors
6 CSS
6.1 CSS Style Sheets
6.1.1 The StyleSheet Interface
6.1.2 The CSSStyleSheet Interface
[Link] Deprecated CSSStyleSheet members
6.2 CSS Style Sheet Collections
6.2.1 The HTTP Default-Style Header
6.2.2 The StyleSheetList Interface
6.2.3 Extensions to the DocumentOrShadowRoot Interface Mixin
6.3 Style Sheet Association
6.3.1 Fetching CSS style sheets
6.3.2 The LinkStyle Interface
6.3.3 Requirements on specifications
6.3.4 Requirements on user agents Implementing the xml-stylesheet processing instruction
6.3.5 Requirements on user agents Implementing the HTTP Link Header
6.4 CSS Rules
6.4.1 The CSSRuleList Interface
6.4.2 The CSSRule Interface
6.4.3 The CSSStyleRule Interface
6.4.4 The CSSImportRule Interface
6.4.5 The CSSGroupingRule Interface
6.4.6 The CSSMediaRule Interface
6.4.7 The CSSPageRule Interface
6.4.8 The CSSMarginRule Interface
6.4.9 The CSSNamespaceRule Interface
6.5 CSS Declarations
6.6 CSS Declaration Blocks
6.6.1 The CSSStyleDeclaration Interface
6.7 CSS Values
6.7.1 Parsing CSS Values
6.7.2 Serializing CSS Values
[Link] Examples
[Link] 3/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
8 Utility APIs
8.1 The [Link]() Method
9 Resolved Values
10 IANA Considerations
10.1 Default-Style
11 Change History
11.1 Changes From 17 March 2016
11.2 Changes From 5 December 2013
11.3 Changes From 12 July 2011 To 5 December 2013
12 Security Considerations
13 Privacy Considerations
14 Acknowledgments
Conformance
Document conventions
Conformance classes
Partial implementations
Implementations of Unstable and Proprietary Features
Non-experimental implementations
Index
Terms defined by this specification
Terms defined by reference
References
Normative References
Non-Normative References
IDL Index
File an issue about the selected text
[Link] 4/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
Issues Index
§ 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 [DOM]. 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.
TESTS
§ 2. Terminology
This specification employs certain terminology from the following documents: DOM, HTML, CSS
Syntax, Encoding, URL, Fetch, Associating Style Sheets with XML documents and XML. [DOM]
[HTML] [CSS3SYN] [ENCODING] [URL] [FETCH] [XML-STYLESHEET] [XML]
When this specification talks about object A where A is actually an interface, it generally means an
object implementing interface A.
The terms set and unset 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.
NOTE: If another styling language becomes supported in user agents, this specification is
expected to be updated as necessary.
The term supported CSS property refers to a CSS property that the user agent implements, including
any vendor-prefixed properties, but excluding custom properties. A supported CSS property must be in
File an issue about the selected text
[Link] 5/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
In this specification the ‘::before’ and ‘::after’ pseudo-elements are assumed to exist for all elements
even if no box is generated for them.
When a method or an attribute is said to call another method or attribute, the user agent must invoke
its internal API for that attribute or method so that e.g. the author can’t change the behavior by
overriding attributes or methods with custom properties or functions in ECMAScript.
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 in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, 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 first character and is a "-" (U+002D), and there is no second character, 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.
[Link] 6/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
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 in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, the character escaped
as code point.
If the character is '"' (U+0022) or "\" (U+005C), the escaped character.
NOTE: "'" (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 serialization of the
URL as a string, followed by ")".
To serialize a LOCAL means to create a string represented by "local(", followed by the serialization
of the LOCAL as a 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).
NOTE: When serializing a list according to the above rules, extraneous whitespace is not
inserted prior to the first item or subsequent to the last item. Unless otherwise specified, an empty
list is serialized as the empty string.
[Link] 7/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ 3. CSSOMString
Most strings in CSSOM interfaces use the CSSOMString type. Each implementation chooses to define
it as either USVString or DOMString:
Or, alternatively:
The difference is only observable from web content when surrogate code units are involved.
DOMString would preserve them, whereas USVString would replace them with U+FFFD
REPLACEMENT CHARACTER.
This choice effectively allows implementations to do this replacement, but does not require it.
On the other hand, implementations that internally represent strings as 16-bit code units might
prefer to avoid the cost of doing this replacement.
✔ MDN
§ 4. Media Queries
Media queries are defined by [MEDIAQUERIES]. This section defines various concepts around
media queries, including their API and serialization form.
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 media queries that the algorithm defined there gives.
NOTE: A media query that ends up being "ignored" will turn into "not all".
[Link] 8/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
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.
NOTE: Again, a media query that ends up being "ignored" will turn into "not all".
1. If the media query list is empty, then return the empty string.
2. Serialize each media query in the list of media queries, in the same order as they appear in the
media query list, and then serialize the list.
To serialize a media query let s be the empty string, run the steps below:
✔ MDN
1. If the media query is negated append "not", followed by a single SPACE (U+0020), to s.
2. Let type be the serialization as an identifier of the media type of the media query, converted to
ASCII lowercase. ✔ MDN
3. If the media query does not contain media features append type, to s, then return s.
✔ MDN
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.
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. ✔ MDN
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.
6. Return s.
[Link] 9/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
¶
EXAMPLE 1
Here are some examples of input (first column) and output (second column):
Input O
not screen and (min-WIDTH:5px) AND (max-width:40px) not screen and (min-widt
TESTS
ISSUE 1 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:
‘width’ ...
‘height’ ...
‘device-width’ ...
‘device-height’ ...
‘aspect-ratio’ ...
‘device-aspect-ratio’ ...
[Link] 10/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
‘color’ ...
‘color-index’ ...
‘monochrome’ ...
‘resolution’ ...
‘grid’ ...
Other specifications can extend this table and vendor-prefixed media features can have custom
serialization formats as well.
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.
An object that implements the MediaList interface has an associated collection of media queries.
[Exposed=Window]
interface MediaList {
stringifier attribute [LegacyNullToEmptyString] CSSOMString mediaText;
readonly attribute unsigned long length;
getter CSSOMString? item(unsigned long index);
undefined appendMedium(CSSOMString medium);
undefined deleteMedium(CSSOMString medium);
};
The object’s supported property indices are the numbers in the range zero to one less than the number
of media queries in the collection of media queries represented by the collection. If there are no such
media
File an issue queries,
about then text
the selected there are no supported property indices.
TESTS
[Link] 11/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
To create a MediaList object with a string text, run the following steps:
The mediaText attribute, on getting, must return a serialization of the collection of media queries.
Setting the mediaText attribute must run these steps:
The item(index) method must return a serialization of 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.
The length attribute must return the number of media queries in the collection of media queries.
[Link] 12/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ 5. Selectors
Selectors are defined in the Selectors specification. This section mainly 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 serialize each selector in the group of selectors and then serialize a
comma-separated list of these serializations.
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 compound selectors which is a universal selector,
append the result of serializing the universal selector to s.
2. Otherwise, for each simple selector in the compound selectors that is not a universal selector 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 ">", "+", "~", ">>", "||", 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-element, to s.
TESTS
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 serialization of the namespace
prefix as an identifier, followed by a "|" (U+007C) to s.
[Link] 13/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
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 serialization of the element name as an identifier 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 serialization of the namespace prefix as an identifier, followed
by a "|" (U+007C) to s.
3. Append the serialization of the attribute name as an identifier to s.
4. If there is an attribute value specified, append "=", "~=", "|=", "^=", "$=", or "*=" as
appropriate (depending on the type of attribute selector), followed by the serialization
of the attribute value as a string, to s.
5. If the attribute selector has the case-sensitivity flag present, append " i" (U+0020
U+0069) to s.
6. Append "]" (U+005D) to s.
↪ class selector
Append a "." (U+002E), followed by the serialization of the class name as an identifier to s.
↪ ID selector
Append a "#" (U+0023), followed by the serialization of the ID as an identifier 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(s) determined as per
below, followed by ")" (U+0029), to s.
↪ :lang()
The serialization of a comma-separated list of each argument’s serialization as a
string, preserving relative order.
[Link] 14/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
↪ :nth-child()
↪ :nth-last-child()
↪ :nth-of-type()
↪ :nth-last-of-type()
The result of serializing the value using the rules to serialize an <an+b> value.
✔ MDN
↪ :not()
The result of serializing the value using the rules for serializing a group of
selectors.
§ 6. CSS
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.
CSSStyleSheet(options)
When called, execute the steps to create a constructed CSSStyleSheet given options and return
the result. ✔ MDN
To create a constructed CSSStyleSheet
given CSSStyleSheetInit options, run these steps: ✔ MDN
1. Construct a new CSSStyleSheet object sheet.
✔ MDN
2. Set sheet’s location to the base URL of the associated Document for the current global
object. ✔ MDN
3. Set sheet’s stylesheet base URL to the baseURL attribute value from options.
✔ MDN
4. Set sheet’s parent CSS style sheet to null.
5. Set sheet’s owner node to null. ✔ MDN
6. Set sheet’s owner CSS rule to null. ✔ MDN
7. Set sheet’s title to the empty string.
8. Unset sheet’s alternate flag.
9. Set sheet’s origin-clean flag. ✔ MDN
10. Set sheet’s constructed flag.
11. Set sheet’s Constructor document to the associated Document for the current global object.
12. If the media attribute of options is a string, create a MediaList object from the string and
assign
File an issue about the it astext
selected sheet’s media. Otherwise, serialize a media query list from the attribute and then
[Link] 15/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
create a MediaList object from the resulting string and set it as sheet’s media.
13. If the disabled attribute of options is true, set sheet’s disabled flag.
14. Return sheet.
TESTS
type
The literal string "text/css".
location
Specified when created. The absolute-URL string of the first request of the CSS style sheet or
null if the CSS style sheet was embedded. Does not change during the lifetime of the CSS style
sheet.
parent CSS style sheet
Specified when created. The CSS style sheet that is the parent of the CSS style sheet or null if
there is no associated parent.
✔ MDN
owner node
Specified when created. The DOM node associated with the CSS style sheet or null if there is no
associated DOM node. ✔ MDN
owner CSS rule
Specified when created. The CSS rule in the parent CSS style sheet that caused the inclusion of
the CSS style sheet or null if there is no associated rule.
media
Specified when created. The MediaList object associated with the CSS style sheet.
If this property is specified to a string, the media must be set to the return value of invoking
create a MediaList object steps for that string.
✔ MDN
If this property is specified to an attribute of the owner node, the media must be set to the return
value of invoking create a MediaList object steps for the value of that attribute. Whenever the
attribute is set, changed or removed, the media’s mediaText attribute must be set to the new
value of the attribute, or to null if the attribute is absent.
NOTE: Changing the media’s mediaText attribute does not change the corresponding
attribute on the owner node.
NOTE: The owner node of a CSS style sheet, if non-null, is the node whose associated
CSS style sheet is the CSS style sheet in question, when the CSS style sheet is added.
File an issue about the selected text ✔ MDN
[Link] 16/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
title
Specified when created. The title of the CSS style sheet, which can be the empty string.
EXAMPLE 2 ¶
In the following, the title is non-empty for the first style sheet, but is empty for the second
and third style sheets. ✔ MDN
<style title="papaya whip">
body { background: #ffefd5; }
</style>
<style title="">
body { background: orange; }
</style>
<style>
body { background: brown; }
</style>
If this property is specified to an attribute of the owner node, the title must be set to the value of
that attribute. Whenever the attribute is set, changed or removed, the title must be set to the new
value of the attribute, or to the empty string if the attribute is absent.
✔ MDN
NOTE: HTML only specifies title to be an attribute of the owner node if the node is in in a
document tree.
alternate flag
Specified when created. Either set or unset. Unset by default.
EXAMPLE 3 ¶
The following CSS style sheets have their alternate flag set:
disabled flag
Either set or unset. Unset by default.
NOTE: Even when unset it does not necessarily mean that the CSS style sheet is actually
used for rendering.
File an issue about the selected text
[Link] 17/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
CSS rules
The CSS rules associated with the CSS style sheet.
origin-clean flag
Specified when created. Either set or unset. If it is set, the API allows reading and modifying of
the CSS rules.
constructed flag
Specified when created. Either set or unset. Unset by default. Signifies whether this stylesheet
was created by invoking the IDL-defined constructor.
disallow modification flag
Either set or unset. Unset by default. If set, modification of the stylesheet’s rules is not allowed.
constructor document
Specified when created. The Document a constructed stylesheet is associated with. Null by
default. Only non-null for stylesheets that have constructed flag set.
stylesheet base URL
The base URL to use when resolving relative URLs in the stylesheet. Null by default. Only non-
null for stylesheets that have constructed flag set.
TESTS
[Exposed=Window]
interface StyleSheet {
readonly attribute CSSOMString type;
readonly attribute USVString? href;
readonly attribute (Element or ProcessingInstruction)? ownerNode; ⚠ MDN
readonly attribute CSSStyleSheet? parentStyleSheet;
readonly attribute DOMString? title;
[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
attribute boolean disabled;
};
[Link] 18/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The parentStyleSheet attribute must return the parent CSS style sheet.
The title attribute must return the title or null if title is the empty string.
The disabled attribute, on getting, must return true if the disabled flag is set, or false otherwise. On
setting, the disabled attribute must set the disabled flag if the new value is true, or unset the disabled
flag otherwise.
TESTS
[Exposed=Window]
interface CSSStyleSheet : StyleSheet {
constructor(optional CSSStyleSheetInit options = {});
dictionary CSSStyleSheetInit {
DOMString? baseURL = null;
(MediaList or DOMString) media = "";
boolean disabled = false;
};
The ownerRule attribute must return the owner CSS rule. If a value other than null is ever returned,
then that same value must always be returned on each get access.
[Link] 19/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
NOTE: Even though the returned CSSRuleList object is read-only (from the perspective
of client-authored script), it can nevertheless change over time due to its liveness status. For
example, invoking the insertRule() or deleteRule() methods can result in mutations
reflected in the returned object.
6. Return the result of invoking insert a CSS rule rule in the CSS rules at index.
TESTS
[Link] 20/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
5. Return promise.
The replaceSync(text) method must run the steps to synchronously replace the rules of a
CSSStyleSheet on this CSSStyleSheet given text.
To synchronously replace the rules of a CSSStyleSheet on sheet given text, run these steps:
1. If the constructed flag is not set, or the disallow modification flag is set, throw a
NotAllowedError DOMException.
2. Let rules be the result of running parse a stylesheet’s contents from text.
3. If rules contains one or more ‘@import’ rules, remove those rules from rules.
4. Set sheet’s CSS rules to rules.
✔ MDN
§ [Link]. Deprecated CSSStyleSheet members
✔ MDN
NOTE: These members are required for compatibility with existing sites.
The rules attribute must follow the same steps as cssRules, and return the same object cssRules
✔ MDN
would return.
[Link] 21/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
Authors should not use these members and should instead use and teach the standard
CSSStyleSheet interface defined earlier, which is consistent with CSSGroupingRule.
TESTS
Below various new concepts are defined that are associated with each DocumentOrShadowRoot
object.
Each DocumentOrShadowRoot has an associated list of zero or more CSS style sheets, named the
document or shadow root CSS style sheets. This is an ordered list that contains:
1. Any CSS style sheets created from HTTP Link headers, in header order
2. Any CSS style sheets associated with the DocumentOrShadowRoot, in tree order
Each DocumentOrShadowRoot has an associated list of zero or more CSS style sheets, named the
final CSS style sheets. This is an ordered list that contains:
1. Create a new CSS style sheet object and set its properties as specified.
2. Then run the add a CSS style sheet steps for the newly created CSS style sheet.
If the origin-clean flag is unset, this can expose information from the user’s intranet.
✔ MDN
To add a CSS style sheet, run these steps:
1. Add the CSS style sheet to the list of document or shadow root CSS style sheets at the
appropriate location.
2. If the CSS style sheet’s owner node contributes a script-blocking style sheet, then user agents
must append the owner node to its node document’s script-blocking style sheet set.
[Link] 22/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The title is a case-sensitive match for the last CSS style sheet set name.
6. Set the disabled flag.
TESTS
1. Remove the CSS style sheet from the list of document or shadow root CSS style sheets.
2. Set the CSS style sheet’s parent CSS style sheet, owner node and owner CSS rule to null.
TESTS
A persistent CSS style sheet is a CSS style sheet from the document or shadow root CSS style sheets
whose title is the empty string and whose alternate flag is unset.
A CSS style sheet set is an ordered collection of one or more CSS style sheets from the document or
shadow root CSS style sheets which have an identical title that is not the empty string.
A CSS style sheet set name is the title the CSS style sheet set has in common.
An enabled CSS style sheet set is a CSS style sheet set of which each CSS style sheet has its disabled
flag unset.
To enable a CSS style sheet set with name name, run these steps:
1. If name is the empty string, set the disabled flag for each CSS style sheet that is in a CSS style
sheet set and return.
2. Unset the disabled flag for each CSS style sheet in a CSS style sheet set whose CSS style sheet
set name is a case-sensitive match for name and set it for all other CSS style sheets in a CSS style
sheet set.
To select a CSS style sheet set with name name, run these steps:
File an issue about the selected text
[Link] 23/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
A last CSS style sheet set name is a concept to determine what CSS style sheet set was last selected.
Initially its value is null.
A preferred CSS style sheet set name is a concept to determine which CSS style sheets need to have
their disabled flag unset. Initially its value is the empty string.
To change the preferred CSS style sheet set name with name name, run these steps:
The HTTP Default-Style header can be used to set the preferred CSS style sheet set name influencing
which CSS style sheet set is (initially) the enabled CSS style sheet set.
For each HTTP Default-Style header, in header order, the user agent must change the preferred CSS
style sheet set name with name being the value of the header.
[Exposed=Window]
interface StyleSheetList {
getter CSSStyleSheet? item(unsigned long index);
readonly attribute unsigned long length;
};
The object’s supported property indices are the numbers in the range zero to one less than the number
of CSS style sheets represented by the collection. If there are no such CSS style sheets, then there are
no supported property indices.
File an issue about the selected text
[Link] 24/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The item(index) method must return the indexth CSS style sheet in the collection. If there is no
indexth object in the collection, then the method must return null.
The length attribute must return the number of CSS style sheets represented by the collection.
TESTS
The styleSheets attribute must return a StyleSheetList collection representing the document or
shadow root CSS style sheets.
The set an indexed value algorithm for adoptedStyleSheets, given value and index, is the following:
1. If value’s constructed flag is not set, or its constructor document is not equal to this
DocumentOrShadowRoot’s node document, throw a "NotAllowedError" DOMException.
TESTS
This section defines the interface an owner node of a CSS 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".
To fetch a CSS style sheet with parsed URL parsed URL, referrer referrer, document document,
optionally a set of parameters parameters (used as input to creating a request), and an algorithm for
handling the response result processTheResponse that takes a response, follow these steps:
[Link] 25/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
3. Fetch request, with processResponseEndOfBody, given response, being the following steps:
1. If response is a network error, return.
2. If document is in quirks mode, response is CORS-same-origin and the Content-Type
metadata of response is not a supported styling language change the Content-Type
metadata of response to text/css.
The associated CSS style sheet of a node is the CSS style sheet in the list of document or shadow root
CSS style sheets of which the owner node is said node. This node must also implement the
LinkStyle interface.
The sheet attribute must return the associated CSS style sheet for the node or null if there is no
associated CSS style sheet.
¶
EXAMPLE 4
In the following fragment, the first <style> element has a sheet attribute that returns a
StyleSheet object representing the style sheet, but for the second <style> element, the sheet
attribute returns null, assuming the user agent supports CSS (text/css), but does not support the
(hypothetical) ExampleSheets (text/example-sheets).
<style type="text/css">
body { background:lime }
</style>
<style type="text/example-sheets">
$(body).background := lime
</style>
NOTE: Whether or not the node refers to a style sheet is defined by the specification that
defines the semantics of said node.
File an issue about the selected text
TESTS
[Link] 26/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
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 CSS style
sheet is created.
The prolog refers to nodes that are children of the Document and are not following the Element
child of the Document, if any.
When a ProcessingInstruction node node becomes part of the prolog, is no longer part of the
prolog, or has its data changed, these steps must be run:
1. If an instance of this algorithm is currently running for node, abort that instance, and stop the
associated fetching if applicable.
2. If node has an associated CSS style sheet, remove it.
3. If node is not an xml-stylesheet processing instruction, then return.
4. If node does not have an href pseudo-attribute, then return.
5. Let title be the value of the title pseudo-attribute or the empty string if the title pseudo-
attribute is not specified.
6. If there is an alternate pseudo-attribute whose value is a case-sensitive match for "yes" and
title is the empty string, then return.
7. If there is a type pseudo-attribute whose value is not a supported styling language the user agent
may return.
8. Let input URL be the value specified by the href pseudo-attribute.
9. Let document be node’s node document
10. Let base URL be document’s document base URL.
11. Let referrer be document’s address.
12. Let parsed URL be the return value of invoking the URL parser with the string input URL and the
base the
File an issue about URL basetext
selected URL.
[Link] 27/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The CSS environment encoding is the result of running the following steps:
1. If the element has a charset pseudo-attribute, get an encoding from that pseudo-
attribute’s value. If that succeeds, return the resulting encoding and abort these steps.
2. Otherwise, return the document’s character encoding. [DOM]
For each HTTP Link header of which one of the link relation types is an ◀ Not yet widely implemented
ASCII case-insensitive match for "stylesheet" these steps must be run:
1. Let title be the value of the first of all the 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, then return.
File an issue about the selected text
[Link] 28/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
¶
ISSUE 2 Be more specific
¶
ISSUE 4 What if the HTML parser hasn’t decided on quirks/non-quirks yet?
[Link] 29/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
A style sheet referenced by a HTTP Link header using the rules in this section is said to be a style
sheet that is blocking scripts if the style sheet was enabled when created, and the user agent hasn’t
given up on that particular style sheet yet. A user agent may give up on such a style sheet at any time.
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:
type
A non-negative integer associated with a particular type of rule. This item is initialized when a
rule is created and cannot change.
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 can be changed.
parent CSS rule
A reference to an enclosing CSS rule or null. If the rule has an enclosing rule when it is created,
then this item is initialized to the enclosing rule; otherwise it is null. It can be changed to null.
parent CSS style sheet
A reference to a parent CSS style sheet or null. This item is initialized to reference an associated
style sheet when the rule is created. It can be changed to null.
child CSS rules
A list of child CSS rules. The list can be mutated.
In addition to the above state, each CSS rule may be associated with other state in accordance with its
type.
To parse a CSS rule from a string string, run the following steps:
1. Let rule be the return value of invoking parse a rule with string.
2. If rule is a syntax error, return rule.
3. Let parsed rule be the result of parsing rule according to the appropriate CSS specifications,
dropping parts that are said to be ignored. If the whole rule is dropped, return a syntax error.
4. Return parsed rule.
To serialize a CSS rule, perform one of the following in accordance with the CSS rule’s type:
[Link] 30/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
↪ CSSStyleRule
Return the result of the following steps:
1. Let s initially be the result of performing serialize a group of selectors on the rule’s
associated selectors, followed by the string " {", i.e., a single SPACE (U+0020),
followed by LEFT CURLY BRACKET (U+007B).
2. Let decls be the result of performing serialize a CSS declaration block on the rule’s
associated declarations, or null if there are no such declarations.
3. Let rules be the result of performing serialize a CSS rule on each rule in the rule’s
cssRules list, or null if there are no such rules.
4. If decls and rules are both null, append " }" to s (i.e. a single SPACE (U+0020)
followed by RIGHT CURLY BRACKET (U+007D)) and return s.
5. If rules is null:
1. Append a single SPACE (U+0020) to s
2. Append decls to s
3. Append " }" to s (i.e. a single SPACE (U+0020) followed by RIGHT CURLY
BRACKET (U+007D)).
✔ MDN
4. Return s.
6. Otherwise:
1. If decls is not null, prepend it to rules.
2. For each rule in rules:
If rule is the empty string, do nothing.
Otherwise:
1. Append a newline followed by two spaces to s.
2. Append rule to s.
3. Append a newline followed by RIGHT CURLY BRACKET (U+007D) to s.
4. Return s.
↪ CSSImportRule ✔ MDN
The result of concatenating the following:
1. The string "@import" followed by a single SPACE (U+0020).
✔ MDN
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. ✔ MDN
File an issue about the selected text
[Link] 31/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
¶
EXAMPLE 5
@import url("[Link]");
↪ CSSMediaRule
The result of concatenating the following:
1. The string "@media", followed by a single SPACE (U+0020).
2. The result of performing serialize a media query list on rule’s media query list.
3. A single SPACE (U+0020), followed by the string "{", i.e., LEFT CURLY BRACKET
(U+007B), followed by a newline.
4. The result of performing serialize a CSS rule on each rule in the rule’s cssRules list,
filtering out empty strings, indenting each item with two spaces, all joined with
newline.
5. A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)
↪ CSSFontFaceRule ✔ MDN
The result of concatenating the following:
1. The string "@font-face {".
2. If the ‘font-family’ descriptor is present: ✔ MDN
1. A single SPACE (U+0020), followed by the string "font-family:", followed by a
single SPACE (U+0020).
2. The result of performing serialize a string on the rule’s font family name.
3. The string ";", i.e., SEMICOLON (U+003B).
✔ MDN
3. If the rule’s associated source list is not empty, follow these substeps:
1. A single SPACE (U+0020), followed by the string "src:", followed by a single
SPACE (U+0020).
2. The result of invoking serialize a comma-separated list on performing serialize a
URL or serialize a LOCAL for each source on the source list.
3. The string ";", i.e., SEMICOLON (U+003B).
4. If rule’s associated ‘unicode-range’ descriptor is present, a single SPACE (U+0020),
followed by the string "unicode-range:", followed by a single SPACE (U+0020),
File an issue about the selected text
[Link] 32/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
¶
ISSUE 5 Need to define how the CSSFontFaceRule descriptors' values are
serialized.
↪ CSSPageRule
¶
ISSUE 6 Need to define how CSSPageRule is serialized.
↪ CSSNamespaceRule
The literal string "@namespace", followed by a single SPACE (U+0020), followed by the
serialization as an identifier of the prefix attribute (if any), followed by a single SPACE
(U+0020) if there is a prefix, followed by the serialization as URL of the namespaceURI
attribute, followed the character ";" (U+003B).
File an issue about the selected text ✔ MDN
[Link] 33/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
↪ CSSKeyframesRule
The result of concatenating the following:
1. The literal string "@keyframes", followed by a single SPACE (U+0020).
2. The serialization of the name attribute. If the attribute is a CSS wide keyword, or the
value ‘default’, or the value ‘none’, then it is serialized as a string. Otherwise, it is
serialized as an identifier.
3. The string " { ", i.e., a single SPACE (U+0020), followed by LEFT CURLY
BRACKET (U+007B), followed by a single SPACE (U+0020).
4. The result of performing serialize a CSS rule on each rule in the rule’s cssRules✔list,
MDN
separated by a newline and indented by two spaces.
5. A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)
↪ CSSKeyframeRule
The result of concatenating the following:
1. The keyText.
2. The string " { ", i.e., a single SPACE (U+0020), followed by LEFT CURLY
✔ MDN
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).
¶
ISSUE 7 The "indented by two spaces" bit matches browsers, but needs work, see #5494
To insert a CSS rule rule in a CSS rule list list at index index, with a flag nested, follow these steps:
[Link] 34/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
NOTE: For example, a CSS style sheet cannot contain an @import at-rule after a style rule.
7. If new rule is an @namespace at-rule, and list contains anything other than @import at-rules, and
@namespace at-rules, throw an InvalidStateError exception.
8. Insert new rule into list at the zero-indexed position index. ✔ MDN
9. Return index.
TESTS
To remove a CSS rule from a CSS rule list list at index index, follow these steps: ✔ MDN
1. Set length to the number of items in list.
✔ MDN
2. If index is greater than or equal to length, then throw an IndexSizeError exception.
✔ MDN
3. Set old rule to the indexth item in list.
4. If old rule is an @namespace at-rule, and list contains anything other than @import at-rules, and
@namespace at-rules, throw an InvalidStateError exception.
⚠ MDN
5. Remove rule old rule from list at the zero-indexed position index.
6. Set old rule’s parent CSS rule and parent CSS style sheet to null.
[Exposed=Window]
interface CSSRuleList {
getter CSSRule? item(unsigned long index);
readonly attribute unsigned long length;
};
TESTS
The object’s supported property indices are the numbers in the range zero to one less than the number
of CSSRule objects represented by the collection. If there are no such CSSRule objects, then there are
no supported property indices.
✔ MDN
File an issue about the selected text
[Link] 35/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
✔ MDN
The item(index) method must return the indexth CSSRule object in the collection. If there is no
indexth object in the collection, then the method must return null.
The length attribute must return the number of CSSRule objects represented by the collection.✔ MDN
The CSSRule interface represents an abstract, base CSS rule. Each distinct CSS rule type is
represented by a distinct interface that inherits from this interface.
[Exposed=Window] ✔ MDN
interface CSSRule {
attribute CSSOMString cssText;
readonly attribute CSSRule? parentRule;
readonly attribute CSSStyleSheet? parentStyleSheet;
The cssText attribute must return a serialization of the CSS rule. On setting the cssText attribute
must do nothing.
TESTS
NOTE: For example, @media can enclose a rule, in which case parentRule would be non-null;
in cases where there is no enclosing rule, parentRule will be null.
The parentStyleSheet attribute must return the parent CSS style sheet.
NOTE: The only circumstance where null is returned when a rule has been removed.
File an issue about the selected text
[Link] 36/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
NOTE: Removing a Node that implements the LinkStyle interface from a Document instance
does not (by itself) cause the CSSStyleSheet referenced by a CSSRule to be unreachable.
↪ Otherwise
Return 0.
[Link] 37/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
NOTE: The practice of using an integer enumeration and several constants to identify the
integers is a legacy design practice that is no longer used in Web APIs. Instead, to tell what type of
rule a given object is, it is recommended to check [Link] , which will return a
string like "CSSStyleRule" . This enumeration is thus frozen in its current state, and no new new
values will be added to reflect additional at-rules; all at-rules beyond the ones listed above will
return 0.
[Exposed=Window]
interface CSSStyleRule : CSSGroupingRule {
attribute CSSOMString selectorText;
[SameObject, PutForwards=cssText] readonly attribute CSSStyleProperties style;
};
The selectorText attribute, on getting, must return the result of serializing the rule’s associated
selector list. On setting the selectorText attribute these steps must be run:
✔ MDN
1. Run the parse a group of selectors algorithm on the given value.
✔ MDN
2. If the algorithm returns a non-null value replace the associated selector list with the returned
value.
3. Otherwise, if the algorithm returns a null value, do nothing.
TESTS
The style attribute must return a CSSStyleProperties object for the style rule, with the following
properties:
computed flag
Unset.
readonly flag
Unset.
declarations
The declared declarations in the rule, in specified order.
parent CSS rule
this. the selected text
File an issue about
[Link] 38/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
owner node
Null.
The specified order for declarations is the same as specified, but with shorthand properties expanded
into their longhand properties, in canonical order. If a property is specified more than once (after
shorthand expansion), only the one with greatest cascading order must be represented, at the same
relative position as it was specified. [CSS3CASCADE]
[Exposed=Window]
interface CSSImportRule : CSSRule {
readonly attribute USVString href;
[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
[SameObject] readonly attribute CSSStyleSheet? styleSheet;
readonly attribute CSSOMString? layerName;
readonly attribute CSSOMString? supportsText;
};
The href attribute must return the URL specified by the @import at-rule.
NOTE: To get the resolved URL use the href attribute of the associated CSS style sheet.
The media attribute must return the value of the media attribute of the associated CSS style sheet.
The styleSheet attribute must return the associated CSS style sheet, if any, or null otherwise.
The layerName attribute must return the layer name declared in the at-rule itself, or an empty string if
the layer is anonymous, or null if the at-rule does not declare a layer.
The supportsText attribute must return the <supports-condition> declared in the at-rule itself, or null
if the at-rule does not declare a supports condition.
NOTE: An @import at-rule might not have an associated CSS style sheet (e.g., if it has a non-
matching supports() condition).
TESTS
[Link] 39/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The CSSGroupingRule interface represents an at-rule that contains other rules nested inside itself.
[Exposed=Window]
interface CSSGroupingRule : CSSRule {
[SameObject] readonly attribute CSSRuleList cssRules;
unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
undefined deleteRule(unsigned long index);
};
The cssRules attribute must return a CSSRuleList object for the child CSS rules.
The insertRule(rule, index) method must return the result of invoking insert a CSS rule rule into
the child CSS rules at index, with the nested flag set.
The deleteRule(index) method must remove a CSS rule from the child CSS rules at index.
TESTS
ISSUE 8 Need to define the rules for parse a list of CSS page selectors and serialize a list of ¶
CSS page selectors.
[Exposed=Window]
interface CSSPageDescriptors : CSSStyleDeclaration {
attribute [LegacyNullToEmptyString] CSSOMString margin;
attribute [LegacyNullToEmptyString] CSSOMString marginTop;
attribute [LegacyNullToEmptyString] CSSOMString marginRight;
attribute [LegacyNullToEmptyString] CSSOMString marginBottom;
attribute [LegacyNullToEmptyString] CSSOMString marginLeft;
attribute [LegacyNullToEmptyString] CSSOMString margin-top;
File an issue about the selected text
[Link] 40/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Exposed=Window]
interface CSSPageRule : CSSGroupingRule {
attribute CSSOMString selectorText;
[SameObject, PutForwards=cssText] readonly attribute CSSPageDescriptors style;
};
The selectorText attribute, on getting, must return the result of serializing the associated selector
list. On setting the selectorText attribute these steps must be run:
1. Run the parse a list of CSS page selectors algorithm on the given value.
2. If the algorithm returns a non-null value replace the associated selector list with the returned
value.
The style attribute must return a CSSPageDescriptors object for the @page at-rule, with the
following properties:
computed flag
Unset.
readonly flag
Unset.
declarations
The declared descriptors in the rule, in specified order.
parent CSS rule
this.
owner node
Null.
TESTS
[Link] 41/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The CSSMarginRule interface represents a margin at-rule (e.g. @top-left) in an @page at-rule.
[CSS3PAGE]
[Exposed=Window]
interface CSSMarginRule : CSSRule {
readonly attribute CSSOMString name;
[SameObject, PutForwards=cssText] readonly attribute CSSMarginDescriptors style
};
The name attribute must return the name of the margin at-rule. The @ character is not included in the
name. [CSS3SYN]
The style attribute must return a CSSMarginDescriptors object for the margin at-rule, with the
following properties:
computed flag
Unset.
readonly flag
Unset. ✔ MDN
declarations
The declared declarations in the rule, in specified order.
parent CSS rule
this.
owner node
Null.
[Exposed=Window]
interface CSSNamespaceRule : CSSRule {
readonly attribute CSSOMString namespaceURI;
readonly attribute CSSOMString prefix;
};
[Link] 42/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The namespaceURI attribute must return the namespace of the @namespace at-rule.
The prefix attribute must return the prefix of the @namespace at-rule or the empty string if there is no
prefix.
TESTS
property name
The property name of the declaration.
value
The value of the declaration represented as a list of component values.
important flag
Either set or unset. Can be changed.
case-sensitive flag
Set if the property name is defined to be case-sensitive according to its specification, otherwise
unset.
✔ MDN
✔ MDN
§ 6.6. CSS Declaration Blocks
A CSS declaration block is an ordered collection of CSS properties with their associated values,✔also
MDN
named CSS declarations. In the DOM a CSS declaration block is a CSSStyleDeclaration object. A
CSS declaration block has the following associated properties:
computed flag
Set if the object is a computed style declaration, rather than a specified style. Unless otherwise
stated it is unset.
readonly flag
Set if the object is not modifiable.
declarations
The CSS declarations associated with the object.
parent CSS rule
The CSS rule that the CSS declaration block is associated with, if any, or null otherwise.
owner node
The Element that the CSS declaration block is associated with, if any, or null otherwise.
File an issue about the selected text
[Link] 43/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
updating flag
Unset by default. Set when the CSS declaration block is updating the owner node’s style
attribute.
To parse a CSS declaration block from a string string, follow these steps:
1. Let declarations be the returned declarations from invoking parse a block’s contents with string.
✔ MDN
2. Let parsed declarations be a new empty list.
3. For each item declaration in declarations, follow these substeps:
1. Let parsed declaration be the result of parsing declaration according to the appropriate CSS
specifications, dropping parts that are said to be ignored. If the whole declaration is dropped,
let parsed declaration be null.
2. If parsed declaration is not null, append it to parsed declarations.
4. Return parsed declarations.
To serialize a CSS declaration with property name property, value value and optionally an important
flag set, follow these steps:
✔ MDN
5. If the important flag is set, append " !important" (U+0020 U+0021 U+0069 U+006D U+0070
U+006F U+0072 U+0074 U+0061 U+006E U+0074) to s.
6. Append ";" (U+003B) to s.
7. Return s.
TESTS
To serialize a CSS declaration block declaration block means to run the steps below:
[Link] 44/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
3. If property maps to one or more shorthand properties, let shorthands be an array of those
shorthand properties, in preferred order.
4. Shorthand loop: For each shorthand in shorthands, follow these substeps:
1. Let longhands be an array consisting of all CSS declarations in declaration block’s
declarations that are not in already serialized and have a property name that maps to
one of the shorthand properties in shorthands.
2. If not all properties that map to shorthand are present in longhands, continue with the
steps labeled shorthand loop.
6. If there is any declaration in declaration block in between the first and the last
longhand in current longhands which belongs to the same logical property group, but
has a different mapping logic as any of the longhands in current longhands, and is not
in current longhands, continue with the steps labeled shorthand loop.
7. Let value be the result of invoking serialize a CSS value with current longhands.
8. If value is the empty string, continue with the steps labeled shorthand loop.
9. Let serialized declaration be the result of invoking serialize a CSS declaration with
property name shorthand, value value, and the important flag set if the CSS
declarations in current longhands have their important flag set.
10. Append serialized declaration to list.
11. Append the property names of all items of current longhands to already serialized.
12. Continue with the steps labeled declaration loop.
5. Let value be the result of invoking serialize a CSS value of declaration.
6. Let serialized declaration be the result of invoking serialize a CSS declaration with property
name property, value value, and the important flag set if declaration has its important flag
set.
7. Append serialized declaration to list.
[Link] 45/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
NOTE: The serialization of an empty CSS declaration block is the empty string.
NOTE: The serialization of a non-empty CSS declaration block does not include any
surrounding whitespace, i.e., no whitespace appears before the first property name and no
whitespace appears after the final semicolon delimiter that follows the last property value.
TESTS
A CSS declaration block has these attribute change steps for its owner node with localName, value,
and namespace:
To update style attribute for declaration block means to run the steps below:
1. about
File an issue Ordertheshorthands
selected textlexicographically.
[Link] 46/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
2. Move all items in shorthands that begin with "-" (U+002D) last in the list, retaining their relative
order.
3. Move all items in shorthands that begin with "-" (U+002D) but do not begin with "-webkit-"
last in the list, retaining their relative order.
4. Order shorthands by the number of longhand properties that map to it, with the greatest number
first.
The CSSStyleDeclaration interface represents a CSS declaration block, including its underlying
✔ MDN
state, where this underlying state depends upon the source of the CSSStyleDeclaration instance.
[Exposed=Window]
interface CSSStyleDeclaration {
[CEReactions] attribute CSSOMString cssText;
readonly attribute unsigned long length;
getter CSSOMString item(unsigned long index);
CSSOMString getPropertyValue(CSSOMString property);
CSSOMString getPropertyPriority(CSSOMString property);
[CEReactions] undefined setProperty(CSSOMString property, [LegacyNullToEmptyStr
[CEReactions] CSSOMString removeProperty(CSSOMString property);
readonly attribute CSSRule? parentRule;
};
[Exposed=Window]
interface CSSStyleProperties : CSSStyleDeclaration {
[CEReactions] attribute [LegacyNullToEmptyString] CSSOMString cssFloat;
};
TESTS
The object’s supported property indices are the numbers in the range zero to one less than the number
of CSS declarations in the declarations. If there are no such CSS declarations, then there are no
supported property indices.
[Link] 47/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The length attribute must return the number of CSS declarations in the declarations.
The item(index) method must return the property name of the CSS declaration at position index. If
there is no indexth object in the collection, then the method must return the empty string.
[Link] 48/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
¶
EXAMPLE 6
E.g. for background-color:lime !IMPORTANT the return value would be "important".
[Link] 49/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
To set a CSS declaration property with a value component value list and optionally with an important
flag set, in a list of declarations declarations, the user agent must ensure the following constraints hold
after its steps:
Exactly one CSS declaration whose property name is a case-sensitive match of property must
exist in declarations. Such declaration is referenced as the target declaration below.
The target declaration must have value being component value list, and target declaration’s
important flag must be set if important flag is set, and unset otherwise.
Any CSS declaration which is not the target declaration must not be changed, inserted, or
removed from declarations.
If there are CSS declarations in declarations whose property name is in the same logical property
group as property, but has a different mapping logic, target declaration must be at an index after
all of those CSS declarations.
The steps must return true if the serialization of declarations was changed as result of the steps. It
may return false otherwise.
ISSUE 9 Should we add something like "Any observable side effect must not be made outside ¶
declarations"? The current constraints sound like a hole for undefined behavior.
NOTE: The steps of set a CSS declaration are not defined in this level of CSSOM. User agents
may use different algorithms as long as the constraints above hold.
[Link] 50/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
EXAMPLE 7 ¶
The simplest way to conform with the constraints would be to always remove any existing
declaration matching property, and append the new declaration to the end. But based on
implementation feedback, this approach would likely regress performance.
[Link] 51/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
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 is a supported CSS property, the following partial interface
applies where camel-cased attribute is obtained by running the CSS property to IDL attribute
algorithm for property.
TESTS
The camel-cased attribute attribute, on getting, must return the result of invoking
getPropertyValue() with the argument being the result of running the IDL attribute to CSS
property algorithm for camel-cased attribute.
Setting the camel-cased attribute attribute must invoke setProperty() with the first argument
being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute, as
second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.
File an issue about the selected text
[Link] 52/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
EXAMPLE 8 ¶
For example, for the ‘font-size’ property there would be a fontSize IDL attribute.
For each CSS property property that is a supported CSS property and that begins with the string -
webkit-, the following partial interface applies where webkit-cased attribute is obtained by running
the CSS property to IDL attribute algorithm for property, with the lowercase first flag set.
The webkit-cased attribute attribute, on getting, must return the result of invoking
getPropertyValue() with the argument being the result of running the IDL attribute to CSS
property algorithm for webkit-cased attribute, with the dash prefix flag set.
Setting the webkit-cased attribute attribute must invoke setProperty() with the first argument
being the result of running the IDL attribute to CSS property algorithm for webkit-cased attribute,
with the dash prefix flag set, as second argument the given value, and no third argument. Any
exceptions thrown must be re-thrown.
EXAMPLE 9 ¶
For example, if the user agent supports the ‘-webkit-transform’ property, there would be a
webkitTransform IDL attribute. There would also be a WebkitTransform IDL attribute because
of the rules for camel-cased attributes.
For each CSS property property that is a supported CSS property, except for properties that have no "-
" (U+002D) in the property name, the following partial interface applies where dashed attribute is
property.
The dashed attribute attribute, on getting, must return the result of invoking
getPropertyValue() with the argument being dashed attribute.
[Link] 53/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
Setting the dashed attribute attribute must invoke setProperty() with the first argument being
dashed attribute, as second argument the given value, and no third argument. Any exceptions thrown
must be re-thrown.
¶
EXAMPLE 10
For example, for the ‘font-size’ property there would be a font-size IDL attribute. In JavaScript,
the property can be accessed as follows, assuming element is an HTML element:
[Link]['font-size'];
The CSS property to IDL attribute algorithm for property, optionally with a lowercase first flag✔set,
MDNis
as follows:
The IDL attribute to CSS property algorithm for attribute, optionally with a dash prefix flag set, is as
follows:
[Link] 54/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
To parse a CSS value value for a given property means to follow these steps:
1. Let list be the value returned by invoking parse a list of component values from value.
2. Match list against the grammar for the property property in the CSS specification.
3. If the above step failed, return null.
4. Return list.
NOTE: "!important" declarations are not part of the property value space and will therefore
cause parse a CSS value to return null.
To serialize a CSS value of a CSS declaration declaration or a list of longhand CSS declarations list,
follow these rules:
1. Let shorthand be the first shorthand property, in preferred order, that exactly maps to all of
the longhand properties in list.
2. If there is no such shorthand or shorthand cannot exactly represent the values of all the
properties in list, return the empty string.
3. Otherwise, serialize a CSS value from a hypothetical declaration of the property shorthand
with its value representing the combined values of the declarations in list.
2. Represent the value of the declaration as a list of CSS component values components that, when
parsed according to the property’s grammar, would represent that value. Additionally, unless
otherwise specified:
If certain component values can appear in any order without changing the meaning of the
value (a pattern typically represented by a double bar || in the value syntax), reorder the
component values to use the canonical order of component values as given in the property
definition table.
If component values can be omitted or replaced with a shorter representation without
changing the meaning of the value, omit/replace them.
File an issue about the selected text
[Link] 55/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
NOTE: The rules described here outline the general principles of serialization. For legacy
reasons, some properties serialize in a different manner, which is intentionally undefined here
due to lack of resources. Please consult that property’s specification and/or your local
✔ MDN
reverse-engineer for details.
↪ keyword
The keyword converted to ASCII lowercase.
↪ <angle>
The <number> component serialized as per <number> followed by the unit in canonical
form as defined in its respective specification.
¶
ISSUE 10 Probably should distinguish between declared and computed / resolved
values.
↪ <color>
If <color> is a component of a resolved value, see CSS Color 4 § 15. Resolving <color>
Values.
If <color> is a component of a computed value, see CSS Color 4 § 16. Serializing <color>
Values.
If <color> is a component of a declared value, then for sRGB values, see CSS Color 4 § 15.1
Resolving sRGB values. For other color functions, see CSS Color 4 § 15. Resolving
<color> Values.
↪ <alpha-value>
See CSS Color 4 § 16.1 Serializing alpha values.
↪ <counter>
Theselected
File an issue about the returntext
value of the following algorithm:
[Link] 56/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
↪ <frequency>
The <number> component serialized as per <number> followed by the unit in its canonical
form as defined in its respective specification.
¶
ISSUE 11 Probably should distinguish between declared and computed / resolved
values.
↪ <identifier>
The identifier serialized as an identifier.
↪ <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>
The <number> component serialized as per <number> followed by the unit in its canonical
form as defined in its respective specification.
↪ <number>
A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using
"." to separate decimals (if any), rounding the value if necessary to not produce more than 6
decimals, preceded by "-" (U+002D) if it is negative.
[Link] 57/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
↪ <percentage>
The <number> component serialized as per <number> followed by the literal string "%"
(U+0025).
↪ <resolution>
The resolution in dots per ‘CSS pixel’ serialized as per <number> followed by the literal
string "dppx".
↪ <ratio>
The numerator serialized as per <number> followed by the literal string " / ", followed by
the denominator serialized as per <number>.
↪ <shape>
The return value of the following algorithm:
1. Let s be the string "rect(".
2. Let list be a list of the CSS component values belonging to <shape>.
3. Let each item in list be the result of invoking serialize a CSS component value of that
item.
4. Append the result of invoking serialize a comma-separated list on list to s.
↪ <string>
↪ <font-family-name>
The string serialized as a string.
↪ <time>
The time in seconds serialized as per <number> followed by the literal string "s".
↪ <url>
The absolute-URL string serialized as URL.
¶
ISSUE 13 This should differentiate declared and computed <url> values, see #3195.
¶
ISSUE 14 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.
File an issue about the selected text
TESTS
[Link] 58/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ [Link]. Examples
Here are some examples of before and after results on declared 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.
EXAMPLE 11 ¶
Before After
[Link] 59/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The style attribute must return a CSSStyleProperties object whose readonly flag is unset, whose
parent CSS rule is null, and whose owner node is this.
If the user agent supports HTML, the following IDL applies: [HTML]
If the user agent supports SVG, the following IDL applies: [SVG11]
If the user agent supports MathML, the following IDL applies: [MathML-Core]
TESTS
1. about
File an issue Let doc be elt’stext
the selected node document.
[Link] 60/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
NOTE: CSS2 pseudo-elements should match both the double and single-colon versions.
That is, both :before and ::before should match above.
5. If obj is not null, and elt is connected, part of the flat tree, and its shadow-including root has a
browsing context which either doesn’t have a browsing context container, or whose browsing
context container is being rendered, set decls to a list of all longhand properties that are supported
CSS properties, in lexicographical order, with the value being the resolved value computed for
obj using the style rules associated with doc. Additionally, append to decls all the custom
properties whose computed value for obj is not the guaranteed-invalid value.
¶
ISSUE 16 There are UAs that handle shorthands, and all UAs handle shorthands that used
to be longhands like ‘overflow’, see #2529.
¶
ISSUE 17 Order of custom properties is currently undefined, see #4947.
The getComputedStyle() method exposes information from CSS style sheets with the origin-clean
flag unset.
File an issue about the selected text TESTS
[Link] 61/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ 8. Utility APIs
The CSS namespace holds useful CSS-related functions that do not belong elsewhere.
[Exposed=Window]
namespace CSS {
CSSOMString escape(CSSOMString ident);
};
TESTS
¶
ISSUE 18 This was previously specified as an IDL interface that only held static methods.
Switching to an IDL namespace is *nearly* identical, so it’s expected that there won’t be any
compat concerns. If any are discovered, please report so we can consider reverting this change.
The escape(ident) operation must return the result of invoking serialize an identifier of ident.
EXAMPLE 12 ¶
For example, to serialize a string for use as part of a selector, the escape() method can be used:
EXAMPLE 13 ¶
The escape() method can also be used for escaping strings, although it escapes characters that
don’t strictly need to be escaped:
Specifications that define operations on the CSS namespace and want to store some state should store
the state on the current global object’s associated Document.
TESTS
§ 9. 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
File an issue about the selected text
[Link] 62/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
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 longhand property can be determined as follows:
↪ ‘background-color’
↪ ‘border-block-end-color’
↪ ‘border-block-start-color’
↪ ‘border-bottom-color’
↪ ‘border-inline-end-color’
↪ ‘border-inline-start-color’
↪ ‘border-left-color’
↪ ‘border-right-color’
↪ ‘border-top-color’
↪ ‘box-shadow’
↪ ‘caret-color’
↪ ‘color’
↪ ‘outline-color’
↪ A resolved value special case property like ‘color’ defined in another specification
The resolved value is the used value.
↪ ‘line-height’
The resolved value is ‘normal’ if the computed value is ‘normal’, or the used value
otherwise.
[Link] 63/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
↪ ‘block-size’
↪ ‘height’
↪ ‘inline-size’
↪ ‘margin-block-end’
↪ ‘margin-block-start’
↪ ‘margin-bottom’
↪ ‘margin-inline-end’
↪ ‘margin-inline-start’
↪ ‘margin-left’
↪ ‘margin-right’
↪ ‘margin-top’
↪ ‘padding-block-end’
↪ ‘padding-block-start’
↪ ‘padding-bottom’
↪ ‘padding-inline-end’
↪ ‘padding-inline-start’
↪ ‘padding-left’
↪ ‘padding-right’
↪ ‘padding-top’
↪ ‘width’
↪ A resolved value special case property like ‘height’ defined in another specification
If the property applies to the element or pseudo-element and the resolved value of the
‘display’ property is not ‘none’ or ‘contents’, then the resolved value is the used value.
Otherwise the resolved value is the computed value.
↪ ‘bottom’
↪ ‘left’
↪ ‘inset-block-end’
↪ ‘inset-block-start’
↪ ‘inset-inline-end’
↪ ‘inset-inline-start’
↪ ‘right’
↪ ‘top’
↪ A resolved value special case property like ‘top’ defined in another specification
If the property applies to a positioned element and the resolved value of the ‘display’
property is not ‘none’ or ‘contents’, and the property is not over-constrained, then the
resolved value is the used value. Otherwise the resolved value is the computed value.
[Link] 64/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ 10.1. Default-Style
This section describes a header field for registration in the Permanent Message Header Field Registry.
[Link] 65/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
CSSOMString is introduced.
[Link] 66/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
The style and media attributes of various interfaces are annotated with the [PutForwards]
WebIDL extended attribute.
The pseudo() method on Element is introduced.
The PseudoElement interface is introduced.
The cascadedStyle, rawComputedStyle and usedStyle attributes on Element and
PseudoElement are introduced.
[Link] 67/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ 14. Acknowledgments
The editors would like to thank Alexey Feldgendler, Benjamin Poulain, Björn Höhrmann, Boris
Zbasky, Brian Kardell, Chris Dumez, Christian Krebs, Daniel Glazman, David Baron, Domenic
Denicola, Dominique Hazael-Massieux, fantasai, Hallvord R. M. Steen, Ian Hickson, John Daggett,
Lachlan Hunt, Mike Sherov, Myles C. Maxfield, Morten Stenshorne, Ms2ger, Nazım Can Altınova,
Øyvind Stenhaug, Peter Sloetjes, Philip Jägenstedt, Philip Taylor, Richard Gibson, Robert O’Callahan,
Simon Sapin, Sjoerd Visscher, Sylvain Galineau, Tarquin Wilton-Jones, Xidorn Quan, 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.
TESTS
§ Conformance
§ Document conventions
Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119
terminology. 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. However, for readability, these
words do not appear in all uppercase letters in this specification.
All of the text of this specification is normative except sections explicitly marked as non-normative,
examples, and notes. [RFC2119]
Examples in this specification are introduced with the words “for example” or are set apart from the
normative text with class="example", like this:
File an issue about the selected text
[Link] 68/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
¶
EXAMPLE 14
Informative notes begin with the word “Note” and are set apart from the normative text with
class="note", like this:
Advisements are normative sections styled to evoke special attention and are set apart from other
normative text with <strong class="advisement">, like this:
TESTS
Tests relating to the content of this specification may be documented in “Tests” blocks like this
one. Any such block is non-normative.
§ Conformance classes
style sheet
A CSS style sheet.
renderer
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.
A style sheet is conformant to this specification if all of its statements that use syntax defined in this
module are valid according to the generic CSS grammar and the individual grammars of each feature
defined in this module.
A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined
by the appropriate specifications, it supports all the features defined by this specification by parsing
them correctly and rendering the document accordingly. However, the inability of a UA to correctly
File an issue about the selected text
[Link] 69/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
render a document due to limitations of the device does not make the UA non-conformant. (For
example, a UA is not required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification if it writes style sheets that are syntactically
correct according to the generic CSS grammar and the individual grammars of each feature in this
module, and meet all other conformance requirements of style sheets as described in this module.
§ Partial implementations
So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS
renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values,
keywords, and other syntactic constructs for which they have no usable level of support. In particular,
user agents must not selectively ignore unsupported component values and honor supported values in
a single multi-value property declaration: if any value is considered invalid (as unsupported values
must be), CSS requires that the entire declaration be ignored.
To avoid clashes with future stable CSS features, the CSSWG recommends following best practices
for the implementation of unstable features and proprietary extensions to CSS.
§ Non-experimental implementations
To establish and maintain the interoperability of CSS across implementations, the CSS Working Group
requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before releasing an unprefixed
implementation of any CSS features. Testcases submitted to W3C are subject to review and correction
by the CSS Working Group.
Further information on submitting testcases and implementation reports can be found from on the CSS
Working Group’s website at [Link] Questions should be directed to the
public-css-testsuite@[Link] mailing list.
[Link] 70/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ Index
constructor(options),
File an issue about the selected text in § 6.1 CSSStyleSheet, in § 6.1.2
[Link] 71/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Link] 72/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Link] 73/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Link] 74/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Link] 75/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Link] 76/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
terms: padding-inline-start
contents [CSS-NAMESPACES-3] defines the following
display terms:
none default namespace
font-style
font-variant
font-weight
unicode-range
[Link] 77/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
line-height
CSSMediaRule
CSSSupportsRule
[Link] 78/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[CSS3SYN] defines the following terms: [HTML] defines the following terms:
<whitespace-token> CEReactions
parse Window
parse a block's contents associated Document
data continue
following list
shadow-including root
[Link] 79/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
SVGElement
[Link] 80/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ References
§ Normative References
[CSS-ANIMATIONS-1]
David Baron; et al. CSS Animations Level 1. URL: [Link]
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL:
[Link]
[CSS-BORDERS-4]
Elika Etemad; et al. CSS Borders and Box Decorations Module Level 4. URL:
[Link]
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. URL: [Link]
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL:
[Link]
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 6. URL:
[Link]
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS Color Module Level 4. URL:
[Link]
[CSS-COLOR-5]
Chris Lilley; Una Kravets; Lea Verou. CSS Color Module Level 5. URL:
[Link]
[CSS-COUNTER-STYLES-3]
Tab Atkins Jr.. CSS Counter Styles Level 3. URL: [Link]
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: [Link]
display-4/
[CSS-FONTS-4]
Chris Lilley. CSS Fonts Module Level 4. URL: [Link]
[CSS-FONTS-5]
Chris Lilley. CSS Fonts Module Level 5. URL: [Link]
[CSS-INLINE-3]
Elika Etemad. CSS Inline Layout Module Level 3. URL: [Link]
File an issue about the selected text
[Link] 81/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr.. CSS Lists and Counters Module Level 3. URL:
[Link]
[CSS-LOGICAL-1]
Elika Etemad; Rossen Atanassov. CSS Logical Properties and Values Module Level 1. URL:
[Link]
[CSS-NAMESPACES-3]
Elika Etemad. CSS Namespaces Module Level 3. URL: [Link]
[CSS-NESTING-1]
Tab Atkins Jr.. CSS Nesting Module Level 1. URL: [Link]
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. URL: [Link]
overflow-3/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. URL:
[Link]
[CSS-SHADOW-1]
CSS Shadow Module Level 1. Editor's Draft. URL: [Link]
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. URL: [Link]
sizing-3/
[CSS-UI-4]
Tab Atkins Jr.; Florian Rivoal. CSS Basic User Interface Module Level 4. URL:
[Link]
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL:
[Link]
[CSS-VARIABLES-1]
Tab Atkins Jr.. CSS Custom Properties for Cascading Variables Module Level 1. URL:
[Link]
[CSS-VARIABLES-2]
CSS Custom Properties for Cascading Variables Module Level 2. Editor's Draft. URL:
[Link]
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL:
[Link]
[Link] 82/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[CSS3-CONDITIONAL]
Chris Lilley; David Baron; Elika Etemad. CSS Conditional Rules Module Level 3. URL:
[Link]
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 3. URL:
[Link]
[CSS3PAGE]
Elika Etemad. CSS Paged Media Module Level 3. URL: [Link]
[CSS3SYN]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: [Link]
syntax/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL:
[Link]
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: [Link]
[ENCODING]
Anne van Kesteren. Encoding Standard. Living Standard. URL:
[Link]
[FETCH]
Anne van Kesteren. Fetch Standard. Living Standard. URL: [Link]
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL:
[Link]
[I18N-GLOSSARY]
Richard Ishida; Addison Phillips. Internationalization Glossary. URL: [Link]
glossary/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL:
[Link]
[MathML-Core]
David Carlisle; Frédéric Wang. MathML Core. URL: [Link]
[MEDIAQUERIES]
Tab Atkins Jr.; Florian Rivoal. Media Queries Level 4. URL:
[Link]
[MEDIAQUERIES-5]
Tab Atkins Jr.; et al. Media Queries Level 5. URL: [Link]
File an issue about the selected text
[Link] 83/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current
Practice. URL: [Link]
[SELECTORS-3]
Tantek Çelik; et al. Selectors Level 3. URL: [Link]
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. URL: [Link]
[SVG2]
Amelia Bellamy-Royds; et al. Scalable Vector Graphics (SVG) 2. URL:
[Link]
[URL]
Anne van Kesteren. URL Standard. Living Standard. URL: [Link]
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL:
[Link]
[XML]
Tim Bray; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008.
REC. URL: [Link]
[XML-STYLESHEET]
James Clark; Simon Pieters; Henry Thompson. Associating Style Sheets with XML documents 1.0
(Second Edition). 28 October 2010. REC. URL: [Link]
§ Non-Normative References
[COMPAT]
Mike Taylor. Compatibility Standard. Living Standard. URL: [Link]
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. URL:
[Link]
[SVG11]
Erik Dahlström; et al. Scalable Vector Graphics (SVG) 1.1 (Second Edition). 16 August 2011.
REC. URL: [Link]
[Link] 84/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
§ IDL Index
[Exposed=Window]
interface MediaList {
stringifier attribute [LegacyNullToEmptyString] CSSOMString mediaText;
readonly attribute unsigned long length;
getter CSSOMString? item(unsigned long index);
undefined appendMedium(CSSOMString medium);
undefined deleteMedium(CSSOMString medium);
};
[Exposed=Window]
interface StyleSheet {
readonly attribute CSSOMString type;
readonly attribute USVString? href;
readonly attribute (Element or ProcessingInstruction)? ownerNode;
readonly attribute CSSStyleSheet? parentStyleSheet;
readonly attribute DOMString? title;
[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
attribute boolean disabled;
};
[Exposed=Window]
interface CSSStyleSheet : StyleSheet {
constructor(optional CSSStyleSheetInit options = {});
dictionary CSSStyleSheetInit {
DOMString? baseURL = null;
(MediaList or DOMString) media = "";
boolean disabled = false;
};
[Link] 85/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Exposed=Window]
interface StyleSheetList {
getter CSSStyleSheet? item(unsigned long index);
readonly attribute unsigned long length;
};
[Exposed=Window]
interface CSSRule {
attribute CSSOMString cssText;
readonly attribute CSSRule? parentRule;
readonly attribute CSSStyleSheet? parentStyleSheet;
[Link] 86/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
};
[Exposed=Window]
interface CSSStyleRule : CSSGroupingRule {
attribute CSSOMString selectorText;
[SameObject, PutForwards=cssText] readonly attribute CSSStyleProperties style;
};
[Exposed=Window]
interface CSSImportRule : CSSRule {
readonly attribute USVString href;
[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
[SameObject] readonly attribute CSSStyleSheet? styleSheet;
readonly attribute CSSOMString? layerName;
readonly attribute CSSOMString? supportsText;
};
[Exposed=Window]
interface CSSGroupingRule : CSSRule {
[SameObject] readonly attribute CSSRuleList cssRules;
unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
undefined deleteRule(unsigned long index);
};
[Exposed=Window]
interface CSSPageDescriptors : CSSStyleDeclaration {
attribute [LegacyNullToEmptyString] CSSOMString margin;
attribute [LegacyNullToEmptyString] CSSOMString marginTop;
attribute [LegacyNullToEmptyString] CSSOMString marginRight;
attribute [LegacyNullToEmptyString] CSSOMString marginBottom;
attribute [LegacyNullToEmptyString] CSSOMString marginLeft;
attribute [LegacyNullToEmptyString] CSSOMString margin-top;
attribute [LegacyNullToEmptyString] CSSOMString margin-right;
attribute [LegacyNullToEmptyString] CSSOMString margin-bottom;
attribute [LegacyNullToEmptyString] CSSOMString margin-left;
attribute [LegacyNullToEmptyString] CSSOMString size;
attribute [LegacyNullToEmptyString] CSSOMString pageOrientation;
attribute [LegacyNullToEmptyString] CSSOMString page-orientation;
attribute [LegacyNullToEmptyString] CSSOMString marks;
attribute [LegacyNullToEmptyString] CSSOMString bleed;
};
[Exposed=Window]
File an issue about the selected text
[Link] 87/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Exposed=Window]
interface CSSMarginRule : CSSRule {
readonly attribute CSSOMString name;
[SameObject, PutForwards=cssText] readonly attribute CSSMarginDescriptors style
};
[Exposed=Window]
interface CSSNamespaceRule : CSSRule {
readonly attribute CSSOMString namespaceURI;
readonly attribute CSSOMString prefix;
};
[Exposed=Window]
interface CSSStyleDeclaration {
[CEReactions] attribute CSSOMString cssText;
readonly attribute unsigned long length;
getter CSSOMString item(unsigned long index);
CSSOMString getPropertyValue(CSSOMString property);
CSSOMString getPropertyPriority(CSSOMString property);
[CEReactions] undefined setProperty(CSSOMString property, [LegacyNullToEmptyStr
[CEReactions] CSSOMString removeProperty(CSSOMString property);
readonly attribute CSSRule? parentRule;
};
[Exposed=Window]
interface CSSStyleProperties : CSSStyleDeclaration {
[CEReactions] attribute [LegacyNullToEmptyString] CSSOMString cssFloat;
};
[Link] 88/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
[Exposed=Window]
namespace CSS {
CSSOMString escape(CSSOMString ident);
};
§ Issues Index
ISSUE 1 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. ↵
ISSUE 5 Need to define how the CSSFontFaceRule descriptors' values are serialized. ↵
ISSUE 7 The "indented by two spaces" bit matches browsers, but needs work, see #5494 ↵
ISSUE 8 Need to define the rules for parse a list of CSS page selectors and serialize a list of
CSS page selectors. ↵
ISSUE 9 Should we add something like "Any observable side effect must not be made outside
declarations"? The current constraints sound like a hole for undefined behavior. ↵
File an issue about the selected text
[Link] 89/90
04:10 28/5/26 CSS Object Model (CSSOM) Module Level 1
ISSUE 10 Probably should distinguish between declared and computed / resolved values. ↵
ISSUE 11 Probably should distinguish between declared and computed / resolved values. ↵
ISSUE 12 Probably should distinguish between declared and computed / resolved values. ↵
ISSUE 13 This should differentiate declared and computed <url> values, see #3195. ↵
ISSUE 14 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. ↵
ISSUE 16 There are UAs that handle shorthands, and all UAs handle shorthands that used to be
longhands like ‘overflow’, see #2529. ↵
ISSUE 18 This was previously specified as an IDL interface that only held static methods.
Switching to an IDL namespace is *nearly* identical, so it’s expected that there won’t be any
compat concerns. If any are discovered, please report so we can consider reverting this change. ↵
✔ MDN
[Link] 90/90