CSS Object Model (CSSOM) Module Level 1

CSS Object Model (CSSOM) Module Level 1
CSS Object Model (CSSOM) Module Level 1
Editor’s Draft
16 April 2026
More details about this document
This version:
Latest published version:
Previous Versions:
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.
glenn.adams@cos.com
Anne van Kesteren
Opera Software ASA
annevk@annevk.nl
Suggest an Edit for this Spec:
GitHub Editor
Legacy issues list:
Bugzilla
Test Suite:
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.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
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@w3.org
This document is governed by the
18 August 2025 W3C Process Document
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
Basic CSSOM tests
idlharness.html
(live test)
(source)
invalid-pseudo-elements.html
(live test)
(source)
historical.html
(live test)
(source)
stylesheet-replacedata-dynamic.html
(live test)
(source)
xml-stylesheet-pi-in-doctype.xhtml
(live test)
(source)
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
where
is actually an interface, it generally means an object implementing interface
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.
The term
supported styling language
refers to CSS.
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 its lowercase form for the purpose of comparisons in this
specification.
In this specification the
::before
and
::after
pseudo-elements
are assumed to exist for all elements even if no box is generated for them.
When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that
e.g. the author can’t change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
Unless otherwise stated, string comparisons are done in a
case-sensitive
manner.
2.1.
Common Serializing Idioms
To
escape a character
means to create a string of
" (U+005C), followed by the character.
To
escape a character as code point
means to create a
string of "
" (U+005C), followed by the Unicode code point as
the smallest possible number of hexadecimal digits in the range 0-9 a-f
(U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in
base 16, followed by a single SPACE (U+0020).
To
serialize an identifier
means to create a string represented
by the concatenation of, for each character of the identifier:
If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).
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.
Otherwise, the
escaped
character.
To
serialize a function
func
returning a
string
Let
be an empty
string
Serialize an identifier
from
func
’s name,
ASCII lowercased,
and append the result to
Append "(" (U+0028) to
Serialize
func
’s contents,
either as specified by the definition of
func
or in the shortest form possible
(akin to the principles captured by
serialize a CSS value
).
Append the result to
Append ")" (U+0029) to
Return
To
serialize a string
means to create a string represented
by '"' (U+0022), followed by the result of applying the rules
below to each character of the given string, followed by
'"' (U+0022):
If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).
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.
Otherwise, the character itself.
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.
3.
CSSOMString
Most strings in CSSOM interfaces use the
CSSOMString
type.
Each implementation chooses to define it as either
USVString
or
DOMString
typedef
USVString
CSSOMString
Or, alternatively:
typedef
DOMString
CSSOMString
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.
Using
USVString
enables an implementation
to use UTF-8 internally to represent strings in memory.
Since well-formed UTF-8 specifically disallows
surrogate
code points,
it effectively requires this replacement.
On the other hand,
implementations that internally represent strings as 16-bit
code units
might prefer to avoid the cost of doing this replacement.
4.
Media Queries
Media queries
are defined by
[MEDIAQUERIES]
. This
section defines various concepts around
media queries
, including their API
and serialization form.
4.1.
Parsing Media Queries
To
parse a media query list
for a
given string
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
".
To
parse a media query
for a given string
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
".
4.2.
Serializing Media Queries
To
serialize a media query list
run these steps:
If the
media query list
is empty, then return the empty string.
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
be the empty string, run the steps below:
If the
media query
is negated append "
not
", followed
by a single SPACE (U+0020), to
Let
type
be the
serialization
as an identifier
of the
media type
of the
media query
converted to ASCII lowercase
If the
media query
does not contain
media features
append
type
, to
then return
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
Then, for each
media feature
Append a "
" (U+0028), followed by the
media feature
name,
converted to ASCII lowercase
to
If a value is given append a "
" (U+003A), followed
by a single SPACE (U+0020), followed by the
serialized media feature value
to
Append a "
" (U+0029) to
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
Return
Here are some examples of input (first column) and output (second
column):
Input
Output
not screen and (min-WIDTH:5px) AND (max-width:40px)
not screen and (min-width: 5px) and (max-width: 40px)
all and (color) and (color)
(color) and (color)
Tests
mediaquery-sort-dedup.html
(live test)
(source)
4.2.1.
Serializing Media Feature Values
This should probably be done in terms of mapping it to
serializing CSS values as media features are defined in terms of CSS
values after all.
To
serialize a media feature value
named
locate
in the first
column of the table below and use the serialization format described in
the second column:
Media Feature
Serialization
width
...
height
...
device-width
...
device-height
...
orientation
If the value is
portrait
: "
portrait
".
If the value is
landscape
: "
landscape
".
aspect-ratio
...
device-aspect-ratio
...
color
...
color-index
...
monochrome
...
resolution
...
scan
If the value is
progressive
: "
progressive
".
If the value is
interlace
: "
interlace
".
grid
...
Other specifications can extend this table and vendor-prefixed media
features can have custom serialization formats as well.
4.3.
Comparing Media Queries
To
compare media queries
m1
and
m2
means to
serialize
them both and
return true if they are a
case-sensitive
match and false if they
are not.
4.4.
The
MediaList
Interface
An object that implements the
MediaList
interface has an associated
collection of media queries
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 queries, then there are no
supported property indices
Tests
medialist-dynamic-001.html
(live test)
(source)
medialist-interfaces-001.html
(live test)
(source)
medialist-interfaces-002.html
(live test)
(source)
medialist-interfaces-004.html
(live test)
(source)
MediaList.html
(live test)
(source)
MediaList2.xhtml
(live test)
(source)
To
create a
MediaList
object
with a string
text
, run the following steps:
Create a new
MediaList
object.
Set its
mediaText
attribute to
text
Return the newly created
MediaList
object.
The
mediaText
attribute, on getting, must return a
serialization
of the
collection of media queries
Setting the
mediaText
attribute must run these steps:
Empty the
collection of media queries
If the given value is the empty string, then return.
Append all the media queries as a result of
parsing
the given
value to the
collection of media queries
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
The
appendMedium(
medium
method must run these steps:
Let
be the result of
parsing
the given value.
If
is null, then return.
If
comparing
with any of the media queries in the
collection of media queries
returns true, then return.
Append
to the
collection of media queries
The
deleteMedium(
medium
method must run these steps:
Let
be the result of
parsing
the given value.
If
is null, then return.
Remove any media query from the
collection of media queries
for which
comparing
the media query with
returns true.
If nothing was removed, then
throw
NotFoundError
exception.
5.
Selectors
Selectors are defined in the Selectors specification. This section
mainly defines how to serialize them.
5.1.
Parsing Selectors
To
parse a group of selectors
means to parse the value using the
selectors_group
production defined in the Selectors specification and return either a
group of selectors if parsing did not fail or null if parsing did
fail.
5.2.
Serializing Selectors
To
serialize a group of selectors
serialize
each selector in the
group of selectors and then
serialize
comma-separated list of these serializations.
To
serialize a selector
let
be the empty string, run the steps below for each
part of the chain of the selector, and finally return
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
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
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
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
Tests
selectorSerialize.html
(live test)
(source)
serialize-namespaced-type-selectors.html
(live test)
(source)
To
serialize a simple selector
let
be the empty string, run the steps below, and
finally return
type selector
universal selector
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
If the
namespace prefix
maps to a namespace that is
the null namespace (not in a namespace) append
" (U+007C) to
If this is a type selector append the
serialization
of the element name
as an identifier to
If this is a universal selector append "
" (U+002A)
to
attribute selector
Append "
" (U+005B) to
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
Append the
serialization
of the attribute name as an identifier to
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
If the attribute selector has the case-sensitivity flag present,
append "
" (U+0020 U+0069) to
Append "
" (U+005D) to
class selector
Append a "
" (U+002E), followed by the
serialization
of the class name
as an identifier to
ID selector
Append a "
" (U+0023), followed by the
serialization
of the ID
as an identifier to
pseudo-class
If the pseudo-class does not accept arguments append
" (U+003A), followed by the name of the pseudo-class, to
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
:lang()
The
serialization of a
comma-separated list
of each argument’s
serialization as a string
, preserving
relative order.
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
The result of serializing the value using the rules to
serialize an value
:not()
The result of serializing the value using the rules for
serializing a group of selectors
6.
CSS
6.1.
CSS Style Sheets
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.
To
create a constructed
CSSStyleSheet
given
CSSStyleSheetInit
options
, run these steps:
Construct a new
CSSStyleSheet
object
sheet
Set
sheet
’s
location
to the
base URL
of the
associated Document
for the
current global object
Set
sheet
’s
stylesheet base URL
to the
baseURL
attribute value from
options
Set
sheet
’s
parent CSS style sheet
to null.
Set
sheet
’s
owner node
to null.
Set
sheet
’s
owner CSS rule
to null.
Set
sheet
’s
title
to the empty string.
Unset
sheet
’s
alternate flag
Set
sheet
’s
origin-clean flag
Set
sheet
’s
constructed flag
Set
sheet
’s
Constructor document
to the
associated Document
for the
current global object
If the
media
attribute of
options
is a string,
create a MediaList object
from the string
and assign it as
sheet
’s
media
Otherwise,
serialize a media query list
from the attribute and then
create a MediaList object
from the resulting string and set it as
sheet
’s
media
If the
disabled
attribute of
options
is true,
set
sheet
’s
disabled flag
Return
sheet
Tests
CSSStyleSheet-constructable-baseURL.html
(live test)
(source)
CSSStyleSheet-constructable-concat.html
(live test)
(source)
CSSStyleSheet-constructable-cssRules.html
(live test)
(source)
CSSStyleSheet-constructable-disabled-regular-sheet-insertion.html
(live test)
(source)
CSSStyleSheet-constructable-disallow-import.tentative.html
(live test)
(source)
CSSStyleSheet-constructable-duplicate.html
(live test)
(source)
CSSStyleSheet-constructable-insertRule-base-uri.html
(live test)
(source)
CSSStyleSheet-constructable-invalidation.html
(live test)
(source)
CSSStyleSheet-constructable-replace-cssRules.html
(live test)
(source)
CSSStyleSheet-constructable-replace-on-regular-sheet.html
(live test)
(source)
CSSStyleSheet-constructable.html
(live test)
(source)
CSSStyleSheet-modify-after-removal.html
(live test)
(source)
CSSStyleSheet-template-adoption.html
(live test)
(source)
CSSStyleSheet.html
(live test)
(source)
style-sheet-interfaces-001.html
(live test)
(source)
style-sheet-interfaces-002.html
(live test)
(source)
CSS style sheet
has a number of associated state items:
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.
owner node
Specified when created. The DOM node associated with the
CSS style sheet
or
null if there is no associated DOM node.
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.
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
title
Specified when created. The title of the
CSS style sheet
, which can be the empty string.
In the following, the
title
is non-empty
for the first style sheet, but is empty for the second and third style sheets.



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.
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.
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.
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
base-uri.html
(live test)
(source)
6.1.1.
The
StyleSheet
Interface
The
StyleSheet
interface represents an abstract, base style sheet.
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
};
The
type
attribute must return the
type
The
href
attribute must return the
location
The
ownerNode
attribute must return the
owner node
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
media
attribute must return the
media
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
link-element-stylesheet-title.html
(live test)
(source)
stylesheet-same-origin.sub.html
(live test)
(source)
stylesheet-title.html
(live test)
(source)
6.1.2.
The
CSSStyleSheet
Interface
The
CSSStyleSheet
interface represents a
CSS style sheet
Exposed
Window
interface
CSSStyleSheet
StyleSheet
constructor
optional
CSSStyleSheetInit
options
= {});
readonly
attribute
CSSRule
ownerRule
SameObject
readonly
attribute
CSSRuleList
cssRules
unsigned
long
insertRule
CSSOMString
rule
optional
unsigned
long
index
= 0);
undefined
deleteRule
unsigned
long
index
);
Promise
CSSStyleSheet
replace
USVString
text
);
undefined
replaceSync
USVString
text
);
};
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.
The
cssRules
attribute must follow these steps:
If the
origin-clean flag
is unset,
throw
SecurityError
exception.
Return a read-only, live
CSSRuleList
object representing
the
CSS rules
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.
The
insertRule(
rule
index
method must run the following steps:
If the
origin-clean flag
is unset,
throw
SecurityError
exception.
If the
disallow modification flag
is set, throw a
NotAllowedError
DOMException
Let
parsed rule
be the return value of invoking
parse a rule
with
rule
If
parsed rule
is a syntax error, throw a
SyntaxError
DOMException
If
parsed rule
is an
@import
rule, and the
constructed flag
is set, throw
SyntaxError
DOMException
Return the result of invoking
insert a CSS rule
rule
in the
CSS rules
at
index
Tests
insert-dir-rule-crash.html
(live test)
(source)
insert-dir-rule-in-iframe-crash.html
(live test)
(source)
insert-invalid-where-rule-crash.html
(live test)
(source)
insertRule-across-context.html
(live test)
(source)
insertRule-charset-no-index.html
(live test)
(source)
insertRule-from-script.html
(live test)
(source)
insertRule-import-no-index.html
(live test)
(source)
insertRule-import-no-sheet-crash.html
(live test)
(source)
insertRule-import-trailing-garbage-crash.html
(live test)
(source)
insertRule-namespace-no-index.html
(live test)
(source)
insertRule-no-index.html
(live test)
(source)
insertRule-syntax-error-01.html
(live test)
(source)
The
deleteRule(
index
method must run the following steps:
If the
origin-clean flag
is unset,
throw
SecurityError
exception.
If the
disallow modification flag
is set, throw a
NotAllowedError
DOMException
Remove a CSS rule
in the
CSS rules
at
index
The
replace(
text
method must run the following steps:
Let
promise
be a promise.
If the
constructed flag
is not set, or the
disallow modification flag
is set, reject
promise
with a
NotAllowedError
DOMException
and return
promise
Set the
disallow modification flag
In parallel
, do these steps:
Let
rules
be the result of running
parse a stylesheet’s contents
from
text
If
rules
contains one or more
@import
rules,
remove those rules
from
rules
Set
sheet
’s
CSS rules
to
rules
Unset
sheet
’s
disallow modification flag
Resolve
promise
with
sheet
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:
If the
constructed flag
is not set, or the
disallow modification flag
is set, throw a
NotAllowedError
DOMException
Let
rules
be the result of running
parse a stylesheet’s contents
from
text
If
rules
contains one or more
@import
rules,
remove those rules
from
rules
Set
sheet
’s
CSS rules
to
rules
6.1.2.1.
Deprecated CSSStyleSheet members
Note:
These members are required for compatibility with existing sites.
partial
interface
CSSStyleSheet
SameObject
readonly
attribute
CSSRuleList
rules
long
addRule
optional
DOMString
selector
= "undefined",
optional
DOMString
style
= "undefined",
optional
unsigned
long
index
);
undefined
removeRule
optional
unsigned
long
index
= 0);
};
The
rules
attribute must follow the same steps as
cssRules
, and return the same object
cssRules
would return.
The
removeRule(
index
method must run the same steps as
deleteRule()
The
addRule(
selector
block
optionalIndex
method must run the following steps:
Let
rule
be an empty string.
Append
selector
to
rule
Append
" { "
to
rule
If
block
is not empty, append
block
, followed by a space, to
rule
Append
"}"
to
rule
Let
index
be
optionalIndex
if provided, or the number of
CSS rules
in the stylesheet otherwise.
Call
insertRule()
, with
rule
and
index
as arguments.
Return
-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
removerule-invalidation-crash.html
(live test)
(source)
6.2.
CSS Style Sheet Collections
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:
Any
CSS style sheets
created from HTTP
Link
headers, in header order
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:
The
document or shadow root CSS style sheets
The contents of
DocumentOrShadowRoot
’s
adoptedStyleSheets
backing list
, in array order.
To
create a CSS style sheet
, run these steps:
Create a new
CSS style sheet
object and set its
properties as specified.
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.
To
add a CSS style sheet
, run these
steps:
Add the
CSS style sheet
to the list of
document or shadow root CSS style sheets
at the appropriate location.
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
The remainder of these steps deal with the
disabled flag
If the
disabled flag
is set, then return.
If the
title
is not the empty string, the
alternate flag
is unset, and
preferred CSS style sheet set name
is the empty string
change the preferred CSS style sheet set name
to the
title
If any of the following is true, then unset the
disabled flag
and return:
The
title
is the empty string.
The
last CSS style sheet set name
is null and the
title
is a
case-sensitive
match
for the
preferred CSS style sheet set name
The
title
is a
case-sensitive
match for the
last CSS style sheet set name
Set the
disabled flag
Tests
preferred-stylesheet-order.html
(live test)
(source)
preferred-stylesheet-reversed-order.html
(live test)
(source)
To
remove a CSS style sheet
, run these steps:
Remove the
CSS style sheet
from the list of
document or shadow root CSS style sheets
Set the
CSS style sheet
’s
parent CSS style sheet
owner node
and
owner CSS rule
to null.
Tests
delete-namespace-rule-when-child-rule-exists.html
(live test)
(source)
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.
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.
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:
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.
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:
enable a CSS style sheet set
with name
name
Set
last CSS style sheet set name
to
name
last CSS style sheet set name
is a concept to determine what
CSS style sheet set
was last
selected
. Initially its
value is null.
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:
Let
current
be the
preferred CSS style sheet set name
Set
preferred CSS style sheet set name
to
name
If
name
is not a
case-sensitive
match for
current
and
last CSS style sheet set name
is null
enable a CSS style sheet set
with name
name
6.2.1.
The HTTP Default-Style Header
The HTTP
Default-Style
header
can be used to set the
preferred 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.
6.2.2.
The
StyleSheetList
Interface
The
StyleSheetList
interface represents an ordered collection of
CSS style sheets
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
The
item(
index
method must return the
index
th
CSS style
sheet
in the collection. If there is no
index
th 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
StyleSheetList-constructable-with-style-recalc.html
(live test)
(source)
StyleSheetList-constructable.html
(live test)
(source)
StyleSheetList.html
(live test)
(source)
6.2.3.
Extensions to the
DocumentOrShadowRoot
Interface Mixin
partial
interface
mixin
DocumentOrShadowRoot
SameObject
readonly
attribute
StyleSheetList
styleSheets
attribute
ObservableArray
CSSStyleSheet
adoptedStyleSheets
};
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:
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
adoptedstylesheets-modify-array-and-sheet.html
(live test)
(source)
adoptedstylesheets-observablearray.html
(live test)
(source)
ttwf-cssom-doc-ext-load-count.html
(live test)
(source)
ttwf-cssom-doc-ext-load-tree-order.html
(live test)
(source)
ttwf-cssom-document-extension.html
(live test)
(source)
6.3.
Style Sheet Association
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
".
6.3.1.
Fetching CSS style sheets
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:
Let
origin
be
document
’s
origin
Let
request
be a new
request
, with the
url
parsed URL
origin
origin
referrer
referrer
, and if specified the set of parameters
parameters
Fetch
request
with
processResponseEndOfBody
, given
response
being the following steps:
If
response
is a
network error
, return.
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
If
response
is not in a
supported styling language
, return.
Execute
processTheResponse
given
response
6.3.2.
The
LinkStyle
Interface
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.
interface
mixin
LinkStyle
readonly
attribute
CSSStyleSheet
sheet
};
The
sheet
attribute must return the
associated CSS style sheet
for the node or null
if there is no
associated CSS style sheet
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
).


Note:
Whether or not the node refers to a style sheet is defined
by the specification that defines the semantics of said node.
Tests
HTMLLinkElement-disabled-001.html
(live test)
(source)
HTMLLinkElement-disabled-002.html
(live test)
(source)
HTMLLinkElement-disabled-003.html
(live test)
(source)
HTMLLinkElement-disabled-004.html
(live test)
(source)
HTMLLinkElement-disabled-005.html
(live test)
(source)
HTMLLinkElement-disabled-006.html
(live test)
(source)
HTMLLinkElement-disabled-007.html
(live test)
(source)
HTMLLinkElement-disabled-alternate.html
(live test)
(source)
HTMLLinkElement-load-event-002.html
(live test)
(source)
HTMLLinkElement-load-event.html
(live test)
(source)
HTMLStyleElement-load-event.html
(live test)
(source)
6.3.3.
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
CSS style sheet
is
created
6.3.4.
Requirements on user agents Implementing the xml-stylesheet processing instruction
ProcessingInstruction
includes
LinkStyle
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:
If an instance of this algorithm is currently running for
node
, abort that instance, and stop the associated
fetching
if applicable.
If
node
has an
associated CSS style sheet
remove
it.
If
node
is not an
xml-stylesheet processing instruction
, then return.
If
node
does not have an
href
pseudo-attribute
, then return.
Let
title
be the value of the
title
pseudo-attribute
or the empty string if the
title
pseudo-attribute
is not specified.
If there is an
alternate
pseudo-attribute
whose value is a
case-sensitive
match
for "
yes
" and
title
is the
empty string, then return.
If there is a
type
pseudo-attribute
whose
value is not a
supported styling language
the user agent
may return.
Let
input URL
be the value specified by the
href
pseudo-attribute
Let
document
be
node
’s
node document
Let
base URL
be
document
’s
document base URL
Let
referrer
be
document
’s
address
Let
parsed URL
be the return value of invoking the
URL parser
with the
string
input URL
and the base URL
base URL
If
parsed URL
is failure, then return.
Fetch a CSS style sheet
with parsed URL
parsed URL
referrer
referrer
document
document
and
processTheResponse
given
response
being the following steps:
Create a CSS style sheet
with the following properties:
location
The result of invoking the
URL serializer
with
parsed URL
parent CSS style sheet
null.
owner node
node
owner CSS rule
null.
media
The value of the
media
pseudo-attribute
if any, or the empty string otherwise.
title
title
alternate flag
Set if the
alternate
pseudo-attribute
value is a
case-sensitive
match for
yes
", or unset otherwise.
origin-clean flag
Set if
response
is
CORS-same-origin
, or unset otherwise.
The CSS
environment encoding
is the result of running the following steps:
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.
Otherwise, return the
document’s character encoding
[DOM]
6.3.5.
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:
Let
title
be the value of the first of all the
title
parameters.
If there are no such parameters it is the empty string.
If one of the (other) link relation types is an
ASCII case-insensitive
match for
alternate
" and
title
is the
empty string, then return.
Let
input URL
be the value specified.
Be more specific
Let
base URL
be the document’s
document base URL
Is there a document at this point?
Let
referrer
be the document’s
address
Let
parsed URL
be the return value of invoking the
URL parser
with the
string
input URL
and the base URL
base URL
If
parsed URL
is failure, then return.
Fetch a CSS style sheet
with parsed URL
parsed URL
referrer
referrer
document being the document,
and
processTheResponse
, given
response
, being the following steps:
What if the HTML parser hasn’t decided on quirks/non-quirks yet?
Create a CSS style sheet
with the following properties:
location
The result of invoking the
URL serializer
with
parsed URL
owner node
null.
parent CSS style sheet
null.
owner CSS rule
null.
media
The value of the first
media
parameter.
title
title
alternate flag
Set if one of the specified link relation type for this HTTP
Link
header is an
ASCII case-insensitive
match for
alternate
", or false otherwise.
origin-clean flag
Set if
response
is
CORS-same-origin
, or unset otherwise.
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.
6.4.
CSS Rules
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:
Let
rule
be the return value of invoking
parse a rule
with
string
If
rule
is a syntax error, return
rule
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.
Return
parsed rule
To
serialize a CSS rule
, perform one of the following in accordance with the
CSS rule
’s
type
CSSStyleRule
Return the result of the following steps:
Let
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).
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.
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.
If
decls
and
rules
are both null, append " }" to
(i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)) and return
If
rules
is null:
Append a single SPACE (U+0020) to
Append
decls
to
Append " }" to
(i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)).
Return
Otherwise:
If
decls
is not null, prepend it to
rules
For each
rule
in
rules
If
rule
is the empty string, do nothing.
Otherwise:
Append a newline followed by two spaces to
Append
rule
to
Append a newline followed by RIGHT CURLY BRACKET (U+007D) to
Return
CSSImportRule
The result of concatenating the following:
The string "
@import
" followed by a single SPACE (U+0020).
The result of performing
serialize a URL
on the rule’s location.
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.
The string "
", i.e., SEMICOLON (U+003B).
@import url("import.css");
@import url("print.css") print;
CSSMediaRule
The result of concatenating the following:
The string "
@media
", followed by a single SPACE (U+0020).
The result of performing
serialize a media query list
on rule’s media query list.
A single SPACE (U+0020), followed by the string "{", i.e., LEFT CURLY BRACKET (U+007B), followed by a newline.
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.
A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)
CSSFontFaceRule
The result of concatenating the following:
The string "
@font-face {
", followed by a single SPACE (U+0020).
The string "
font-family:
", followed by a single SPACE (U+0020).
The result of performing
serialize a string
on the rule’s font family name.
The string "
", i.e., SEMICOLON (U+003B).
If the rule’s associated source list is not empty, follow these substeps:
A single SPACE (U+0020), followed by the string "
src:
", followed by a single
SPACE (U+0020).
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.
The string "
", i.e., SEMICOLON (U+003B).
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), followed by the result of performing serialize a
<'unicode-range'>
, followed by the
string "
", i.e., SEMICOLON (U+003B).
If rule’s associated
font-variant
descriptor is present, a single
SPACE (U+0020), followed by the string "
font-variant:
", followed by a single SPACE
(U+0020), followed by the result of performing serialize a
<'font-variant'>
, followed by the
string "
", i.e., SEMICOLON (U+003B).
If rule’s associated
font-feature-settings
descriptor is present, a
single SPACE (U+0020), followed by the string "
font-feature-settings:
", followed by
a single SPACE (U+0020), followed by the result of performing serialize a
<'font-feature-settings'>
, followed by the string "
", i.e., SEMICOLON
(U+003B).
If rule’s associated
font-stretch
descriptor is present, a single
SPACE (U+0020), followed by the string "
font-stretch:
", followed by a single SPACE
(U+0020), followed by the result of performing serialize a
<'font-stretch'>
, followed by the
string "
", i.e., SEMICOLON (U+003B).
If rule’s associated
font-weight
descriptor is present, a single SPACE
(U+0020), followed by the string "
font-weight:
", followed by a single SPACE
(U+0020), followed by the result of performing serialize a
<'font-weight'>
, followed by the
string "
", i.e., SEMICOLON (U+003B).
If rule’s associated
font-style
descriptor is present, a single SPACE
(U+0020), followed by the string "
font-style:
", followed by a single SPACE (U+0020),
followed by the result of performing serialize a
<'font-style'>
, followed by the string
", i.e., SEMICOLON (U+003B).
A single SPACE (U+0020), followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D).
Need to define how the
CSSFontFaceRule
descriptors' values are serialized.
CSSPageRule
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).
CSSKeyframesRule
The result of concatenating the following:
The literal string "
@keyframes
", followed by a single SPACE (U+0020).
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
The string "
", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B), followed by a single SPACE (U+0020).
The result of performing
serialize a CSS rule
on each rule in the rule’s
cssRules
list, separated by a newline and indented by two spaces.
A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)
CSSKeyframeRule
The result of concatenating the following:
The
keyText
The string "
", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B), followed by a single SPACE (U+0020).
The result of performing
serialize a CSS declaration block
on the rule’s associated declarations.
If the rule is associated with one or more declarations, the string "
", i.e., a single SPACE (U+0020).
The string "
", RIGHT CURLY BRACKET (U+007D).
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:
Set
length
to the number of items in
list
If
index
is greater than
length
, then
throw
an
IndexSizeError
exception.
Set
new rule
to the results of performing
parse a CSS rule
on argument
rule
If
new rule
is a syntax error, and
nested
is set,
perform the following substeps:
Set
declarations
to the results of performing
parse a CSS declaration block
on argument
rule
If
declarations
is empty,
throw
SyntaxError
exception.
Otherwise, set
new rule
to a new
nested declarations rule
with
declarations
as it contents.
If
new rule
is a syntax error,
throw
SyntaxError
exception.
If
new rule
cannot be inserted into
list
at the zero-indexed position
index
due to constraints
specified by CSS, then
throw
HierarchyRequestError
exception.
[CSS21]
Note:
For example, a CSS style sheet cannot contain an
@import
at-rule after a style rule.
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.
Insert
new rule
into
list
at the zero-indexed position
index
Return
index
Tests
serialize-media-rule.html
(live test)
(source)
To
remove a CSS rule
from a CSS rule list
list
at index
index
, follow these steps:
Set
length
to the number of items in
list
If
index
is greater than or equal to
length
, then
throw
an
IndexSizeError
exception.
Set
old rule
to the
index
th item in
list
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.
Remove rule
old rule
from
list
at the zero-indexed position
index
Set
old rule
’s
parent CSS rule
and
parent CSS style sheet
to null.
6.4.1.
The
CSSRuleList
Interface
The
CSSRuleList
interface represents an ordered collection of
CSS rules
Exposed
Window
interface
CSSRuleList
getter
CSSRule
item
unsigned
long
index
);
readonly
attribute
unsigned
long
length
};
Tests
CSSRuleList.html
(live test)
(source)
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
The
item(
index
method must return the
index
th
CSSRule
object in the collection. If there is no
index
th object in the collection, then the method must return null.
The
length
attribute must return the number of
CSSRule
objects represented by the
collection.
6.4.2.
The
CSSRule
Interface
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
interface
CSSRule
attribute
CSSOMString
cssText
readonly
attribute
CSSRule
parentRule
readonly
attribute
CSSStyleSheet
parentStyleSheet

// the following attribute and constants are historical
readonly
attribute
unsigned
short
type
const
unsigned
short
STYLE_RULE
= 1;
const
unsigned
short
CHARSET_RULE
= 2;
const
unsigned
short
IMPORT_RULE
= 3;
const
unsigned
short
MEDIA_RULE
= 4;
const
unsigned
short
FONT_FACE_RULE
= 5;
const
unsigned
short
PAGE_RULE
= 6;
const
unsigned
short
MARGIN_RULE
= 9;
const
unsigned
short
NAMESPACE_RULE
= 10;
};
The
cssText
attribute must return a
serialization
of the
CSS rule
On setting the
cssText
attribute must do nothing.
Tests
css-style-reparse.html
(live test)
(source)
cssom-cssText-serialize.html
(live test)
(source)
cssom-ruleTypeAndOrder.html
(live test)
(source)
declaration-block-all-crash.html
(live test)
(source)
The
parentRule
attribute must return the
parent CSS
rule
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
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.
The
type
attribute is deprecated.
It must return an integer, as follows:
If the object is a
CSSStyleRule
Return 1.
If the object is a
CSSImportRule
Return 3.
If the object is a
CSSMediaRule
Return 4.
If the object is a
CSSFontFaceRule
Return 5.
If the object is a
CSSPageRule
Return 6.
If the object is a
CSSKeyframesRule
Return 7.
If the object is a
CSSKeyframeRule
Return 8.
If the object is a
CSSMarginRule
Return 9.
If the object is a
CSSNamespaceRule
Return 10.
If the object is a
CSSCounterStyleRule
Return 11.
If the object is a
CSSSupportsRule
Return 12.
If the object is a
CSSFontFeatureValuesRule
Return 14.
Otherwise
Return 0.
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
rule
constructor
name
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.
6.4.3.
The
CSSStyleRule
Interface
The
CSSStyleRule
interface represents a style rule.
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:
Run the
parse a group of selectors
algorithm on the given value.
If the algorithm returns a non-null value replace the associated
selector list
with the returned value.
Otherwise, if the algorithm returns a null value, do nothing.
Tests
CSSStyleRule.html
(live test)
(source)
CSSStyleRule-set-selectorText.html
(live test)
(source)
CSSStyleRule-set-selectorText-namespace.html
(live test)
(source)
selectorText-modification-restyle-001.html
(live test)
(source)
selectorText-modification-restyle-002.html
(live test)
(source)
set-selector-text-attachment.html
(live test)
(source)
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
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]
6.4.4.
The
CSSImportRule
Interface
The
CSSImportRule
interface represents an
@import
at-rule.
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

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
cssimportrule.html
(live test)
(source)
cssimportrule-parent.html
(live test)
(source)
cssimportrule-sheet-identity.html
(live test)
(source)
6.4.5.
The
CSSGroupingRule
Interface
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
CSSGroupingRule-cssRules.html
(live test)
(source)
CSSGroupingRule-insertRule.html
(live test)
(source)
6.4.6.
The
CSSMediaRule
Interface
The
CSSMediaRule
interface is defined in
CSS Conditional Rules
[CSS3-CONDITIONAL]
6.4.7.
The
CSSPageRule
Interface
The
CSSPageRule
interface represents an
@page
at-rule.
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
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
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:
Run the
parse a list of CSS page selectors
algorithm on the given value.
If the algorithm returns a non-null value replace the associated
selector list
with the returned value.
Otherwise, if the algorithm returns a null value, do nothing.
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
cssom-pagerule.html
(live test)
(source)
6.4.8.
The
CSSMarginRule
Interface
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.
declarations
The declared declarations in the rule, in
specified order
parent CSS rule
this
owner node
Null.
6.4.9.
The
CSSNamespaceRule
Interface
The
CSSNamespaceRule
interface represents an
@namespace
at-rule.
Exposed
Window
interface
CSSNamespaceRule
CSSRule
readonly
attribute
CSSOMString
namespaceURI
readonly
attribute
CSSOMString
prefix
};
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
at-namespace.html
(live test)
(source)
CSSNamespaceRule.html
(live test)
(source)
6.5.
CSS Declarations
CSS declaration
is an abstract concept that is not exposed as an object in the DOM. A
CSS declaration
has the following associated
properties:
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.
6.6.
CSS Declaration Blocks
CSS declaration block
is an ordered collection of CSS
properties with their associated values, also named
CSS declarations
. In
the DOM a
CSS declaration block
is a
CSSStyleDeclaration
object. A
CSS declaration block
has 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.
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:
Let
declarations
be the returned declarations from invoking
parse a block’s contents
with
string
Let
parsed declarations
be a new empty list.
For each item
declaration
in
declarations
, follow these substeps:
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.
If
parsed declaration
is not null, append it to
parsed declarations
Return
parsed declarations
To
serialize a CSS declaration
with property name
property
, value
value
and optionally an
important
flag set, follow
these steps:
Let
be the empty string.
Append
property
to
Append "
" (U+003A U+0020) to
If
value
contains any non-whitespace characters,
append
value
to
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
Append "
" (U+003B) to
Return
Tests
serialization-CSSDeclaration-with-important.html
(live test)
(source)
To
serialize a CSS declaration block
declaration block
means to run the steps below:
Let
list
be an empty array.
Let
already serialized
be an empty array.
Declaration loop
: For each
CSS declaration
declaration
in
declaration block
’s
declarations
, follow these substeps:
Let
property
be
declaration
’s
property name
If
property
is in
already serialized
, continue with the steps labeled
declaration loop
If
property
maps to one or more shorthand properties, let
shorthands
be an array of those shorthand properties, in
preferred order
Shorthand loop
: For each
shorthand
in
shorthands
, follow these substeps:
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
If not all properties that map to
shorthand
are present in
longhands
, continue with the steps labeled
shorthand loop
Let
current longhands
be an empty array.
Append all
CSS declarations
in
longhands
that have a
property name
that maps to
shorthand
to
current longhands
If there are one or more
CSS declarations
in
current longhands
that have their
important flag
set and one or more with it unset, continue with
the steps labeled
shorthand loop
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
Let
value
be the result of invoking
serialize a CSS value
with
current longhands
If
value
is the empty string, continue with the steps labeled
shorthand loop
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.
Append
serialized declaration
to
list
Append the property names of all items of
current longhands
to
already serialized
Continue with the steps labeled
declaration loop
Let
value
be the result of invoking
serialize a CSS value
of
declaration
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.
Append
serialized declaration
to
list
Append
property
to
already serialized
Return
list
joined with "
" (U+0020).
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
border-shorthand-serialization.html
(live test)
(source)
css-style-attr-decl-block.html
(live test)
(source)
font-family-serialization-001.html
(live test)
(source)
font-shorthand-serialization.html
(live test)
(source)
font-variant-shorthand-serialization.html
(live test)
(source)
shorthand-serialization.html
(live test)
(source)
shorthand-values.html
(live test)
(source)
CSS declaration block
has these
attribute change steps
for its
owner node
with
localName
value
, and
namespace
If the
computed flag
is set, then return.
If the
updating flag
is set, then return.
If
localName
is not "
style
", or
namespace
is not null, then return.
If
value
is null, empty the
declarations
Otherwise, let the
declarations
be the result of
parse a CSS declaration block
from a string
value
When a
CSS declaration block
object is created, then:
Let
owner node
be the
owner node
If
owner node
is null, or the
computed flag
is set, then return.
Let
value
be the result of
getting an attribute
given null, "
style
", and
owner node
If
value
is not null, let the
declarations
be the result of
parse a CSS declaration block
from a string
value
To
update style attribute for
declaration block
means to run the steps below:
Assert:
declaration block
’s
computed flag
is unset.
Let
owner node
be
declaration block
’s
owner node
If
owner node
is null, then return.
Set
declaration block
’s
updating flag
Set an attribute value
for
owner node
using "
style
" and the result of
serializing
declaration block
Unset
declaration block
’s
updating flag
The
preferred order
of a list of shorthand properties
shorthands
is as follows:
Order
shorthands
lexicographically.
Move all items in
shorthands
that begin with "
" (U+002D) last in the list, retaining their relative order.
Move all items in
shorthands
that begin with "
" (U+002D) but do not begin with "
-webkit-
" last in the
list, retaining their relative order.
Order
shorthands
by the number of longhand properties that map to it, with the greatest number first.
6.6.1.
The
CSSStyleDeclaration
Interface
The
CSSStyleDeclaration
interface represents a
CSS declaration block
, including its underlying state, where this
underlying state depends upon the source of the
CSSStyleDeclaration
instance.
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
, [
LegacyNullToEmptyString
CSSOMString
value
optional
LegacyNullToEmptyString
CSSOMString
priority
= "");
CEReactions
CSSOMString
removeProperty
CSSOMString
property
);
readonly
attribute
CSSRule
parentRule
};

Exposed
Window
interface
CSSStyleProperties
CSSStyleDeclaration
CEReactions
attribute
LegacyNullToEmptyString
CSSOMString
cssFloat
};
Tests
css-style-declaration-modifications.html
(live test)
(source)
cssom-cssstyledeclaration-set.html
(live test)
(source)
cssstyledeclaration-all-shorthand.html
(live test)
(source)
cssstyledeclaration-cssfontrule.tentative.html
(live test)
(source)
cssstyledeclaration-csstext-all-shorthand.html
(live test)
(source)
cssstyledeclaration-csstext-final-delimiter.html
(live test)
(source)
cssstyledeclaration-csstext-important.html
(live test)
(source)
cssstyledeclaration-csstext.html
(live test)
(source)
cssstyledeclaration-custom-properties.html
(live test)
(source)
cssstyledeclaration-mutability.html
(live test)
(source)
cssstyledeclaration-mutationrecord-001.html
(live test)
(source)
cssstyledeclaration-mutationrecord-002.html
(live test)
(source)
cssstyledeclaration-mutationrecord-003.html
(live test)
(source)
cssstyledeclaration-mutationrecord-004.html
(live test)
(source)
cssstyledeclaration-mutationrecord-005.html
(live test)
(source)
cssstyledeclaration-properties.html
(live test)
(source)
cssstyledeclaration-registered-custom-properties.html
(live test)
(source)
cssstyledeclaration-removeProperty-all.html
(live test)
(source)
cssstyledeclaration-setter-attr.html
(live test)
(source)
cssstyledeclaration-setter-declarations.html
(live test)
(source)
cssstyledeclaration-setter-form-controls.html
(live test)
(source)
cssstyledeclaration-setter-logical.html
(live test)
(source)
page-descriptors.html
(live test)
(source)
property-accessors.html
(live test)
(source)
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
Getting the
cssText
attribute must run these steps:
If the
computed flag
is set, then return the empty string.
Return the result of
serializing
the
declarations
Setting the
cssText
attribute must run these steps:
If the
readonly flag
is set,
then
throw
NoModificationAllowedError
exception.
Empty the
declarations
Parse
the given value and, if the return value is not the empty list, insert the items in the list
into the
declarations
, in
specified order
Update style attribute for
the
CSS declaration block
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
index
th object in the collection, then the method must return the empty string.
The
getPropertyValue(
property
method must run these steps:
If
property
is not a
custom property
, follow these substeps:
Let
property
be
property
converted to ASCII lowercase
If
property
is a shorthand property, then follow these substeps:
Let
list
be a new empty array.
For each longhand property
longhand
that
property
maps to, in canonical order, follow these substeps:
If
longhand
is a
case-sensitive
match for a
property
name
of a
CSS declaration
in the
declarations
, let
declaration
be that
CSS declaration
, or null otherwise.
If
declaration
is null, then return the empty string.
Append the
declaration
to
list
If
important flags
of all declarations in
list
are same,
then return the
serialization
of
list
Return the empty string.
If
property
is a
case-sensitive
match for a
property name
of a
CSS declaration
in the
declarations
, then return the result of invoking
serialize a CSS value
of that declaration.
Return the empty string.
Tests
cssom-getPropertyValue-common-checks.html
(live test)
(source)
serialize-all-longhands.html
(live test)
(source)
The
getPropertyPriority(
property
method must run these steps:
If
property
is not a
custom property
, follow these substeps:
Let
property
be
property
converted to ASCII lowercase
If
property
is a shorthand property, follow these substeps:
Let
list
be a new array.
For each longhand property
longhand
that
property
maps to, append the result of invoking
getPropertyPriority()
with
longhand
as argument to
list
If all items in
list
are the string "
important
", then return the string "
important
".
If
property
is a
case-sensitive
match for a
property name
of a
CSS
declaration
in the
declarations
that has the
important flag
set, return the string "
important
".
Return the empty string.
E.g. for
background-color:lime !IMPORTANT
the return
value would be "
important
".
The
setProperty(
property
value
priority
method must run these steps:
If the
readonly flag
is set,
then
throw
NoModificationAllowedError
exception.
If
property
is not a
custom property
, follow these substeps:
Let
property
be
property
converted to ASCII lowercase
If
property
is not a
case-sensitive
match for a
supported CSS property
, then return.
If
value
is the empty string, invoke
removeProperty()
with
property
as argument and return.
If
priority
is not the empty string and is not an
ASCII case-insensitive
match for the string
important
", then return.
Let
component value list
be the result of
parsing
value
for property
property
Note:
value
can not include "
!important
".
If
component value list
is null, then return.
Let
updated
be false.
If
property
is a shorthand property, then for each longhand property
longhand
that
property
maps to, in canonical
order, follow these substeps:
Let
longhand result
be the result of
set the CSS declaration
longhand
with the appropriate value(s) from
component value list
, with the
important
flag set if
priority
is not the empty string, and unset otherwise, and with the list of declarations
being the
declarations
If
longhand result
is true, let
updated
be true.
Otherwise, let
updated
be the result of
set the CSS declaration
property
with value
component value list
, with the
important
flag set if
priority
is not the empty string, and unset otherwise, and with the list of declarations being the
declarations
If
updated
is true,
update style attribute for
the
CSS declaration block
Tests
cssom-setProperty-shorthand.html
(live test)
(source)
MutationObserver-style.html
(live test)
(source)
rule-restrictions.html
(live test)
(source)
setproperty-null-undefined.html
(live test)
(source)
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.
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.
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.
Another possible algorithm is:
If
property
is a
case-sensitive
match for a
property name
of a
CSS declaration
in
declarations
, follow these substeps:
Let
target declaration
be such
CSS declaration
Let
needs append
be false.
For each
declaration
in
declarations
after
target declaration
If
declaration
’s
property name
is not in the same
logical property group
as
property
, then
continue
If
declaration
property name
has the same
mapping logic
as
property
, then
continue
Let
needs append
be true.
Break
If
needs append
is false, then:
Let
needs update
be false.
If
target declaration
’s
value
is not equal to
component
value list
, then let
needs update
be true.
If
target declaration
’s
important flag
is not equal to
whether
important
flag is set, then let
needs update
be true.
If
needs update
is false, then return false.
Set
target declaration
’s
value
to
component value list
If
important
flag is set, then set
target declaration
’s
important flag
, otherwise unset it.
Return true.
Otherwise, remove
target declaration
from
declarations
Append a new
CSS declaration
with
property name
property
value
component value list
, and
important flag
set if
important
flag is set to
declarations
Return true.
The
removeProperty(
property
method must run these steps:
If the
readonly flag
is set,
then
throw
NoModificationAllowedError
exception.
If
property
is not a
custom property
let
property
be
property
converted to ASCII lowercase
Let
value
be the return value of invoking
getPropertyValue()
with
property
as argument.
Let
removed
be false.
If
property
is a shorthand property, for each longhand property
longhand
that
property
maps to:
If
longhand
is not a
property name
of a
CSS declaration
in the
declarations
continue
Remove that
CSS declaration
and let
removed
be true.
Otherwise, if
property
is a
case-sensitive
match for a
property name
of a
CSS declaration
in the
declarations
, remove that
CSS declaration
and let
removed
be true.
If
removed
is true,
Update style attribute for
the
CSS declaration block
Return
value
The
parentRule
attribute must return the
parent CSS rule
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
change-rule-with-layers-crash.html
(live test)
(source)
style-attr-update-across-documents.html
(live test)
(source)
partial
interface
CSSStyleProperties
CEReactions
attribute
LegacyNullToEmptyString
CSSOMString
_camel_cased_attribute
};
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.
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.
partial
interface
CSSStyleProperties
CEReactions
attribute
LegacyNullToEmptyString
CSSOMString
_webkit_cased_attribute
};
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.
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
partial
interface
CSSStyleProperties
CEReactions
attribute
LegacyNullToEmptyString
CSSOMString
_dashed_attribute
};
The
dashed attribute
attribute, on getting, must return the
result of invoking
getPropertyValue()
with the
argument being
dashed attribute
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.
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
element
.style['font-size'];
The
CSS property to IDL attribute
algorithm for
property
, optionally with a
lowercase first
flag set, is as follows:
Let
output
be the empty string.
Let
uppercase next
be unset.
If the
lowercase first
flag is set, remove the first character from
property
For each character
in
property
If
is "
" (U+002D), let
uppercase next
be set.
Otherwise, if
uppercase next
is set, let
uppercase next
be unset and append
converted to ASCII uppercase
to
output
Otherwise, append
to
output
Return
output
The
IDL attribute to CSS property
algorithm for
attribute
, optionally with a
dash prefix
flag set, is as follows:
Let
output
be the empty string.
If the
dash prefix
flag is set, append "
" (U+002D) to
output
For each character
in
attribute
If
is in the range U+0041 to U+005A (ASCII uppercase), append "
" (U+002D) followed by
converted to ASCII lowercase
to
output
Otherwise, append
to
output
Return
output
6.7.
CSS Values
6.7.1.
Parsing CSS Values
To
parse a CSS value
value
for a given
property
means to follow these steps:
Let
list
be the value returned by invoking
parse a list of component values
from
value
Match
list
against the grammar for the property
property
in the CSS specification.
If the above step failed, return null.
Return
list
Note:
!important
" declarations are not
part of the property value space and will therefore cause
parse a CSS value
to return null.
6.7.2.
Serializing CSS Values
To
serialize a CSS value
of a
CSS declaration
declaration
or a list of longhand
CSS declarations
list
follow these rules:
If this algorithm is invoked with a
list
list
Let
shorthand
be the first shorthand property,
in
preferred order
that exactly maps to all of the longhand properties in
list
If there is no such shorthand or
shorthand
cannot exactly represent the values of all the properties in
list
return the empty string.
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
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.
If either of the above syntactic translations would be less backwards-compatible,
do not perform them.
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 reverse-engineer for details.
Remove any

s from
components
Replace each component value in
components
with the result of invoking
serialize a CSS component value
Join the items of
components
into a single string,
inserting " " (U+0020 SPACE) between each pair of items
unless the second item is a "," (U+002C COMMA)
Return the result.
Tests
flex-serialization.html
(live test)
(source)
overflow-serialization.html
(live test)
(source)
serialize-values.html
(live test)
(source)
To
serialize a CSS component value
depends on the component, as follows:
keyword
The keyword
converted to ASCII lowercase

The component serialized as per followed by the unit in canonical form as defined in its respective specification.
Probably should distinguish between declared and computed / resolved values.

If is a component of a resolved value, see
CSS Color 4
§  15. Resolving Values
If is a component of a computed value, see
CSS Color 4
§  16. Serializing Values
If

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 Values

See
CSS Color 4
§ 16.1 Serializing alpha values

The return value of the following algorithm:
Let
be the empty string.
If has three CSS component values append the string
counters(
" to
If has two CSS component values append the string
counter(
" to
Let
list
be a list of CSS component values belonging to , omitting the last CSS component value if it is "decimal".
Let each item in
list
be the result of invoking
serialize a CSS component value
on that item.
Append the result of invoking
serialize a comma-separated list
on
list
to
Append "
" (U+0029) to
Return

The component serialized as per followed by the unit in its canonical form as defined in its respective specification.
Probably should distinguish between declared and computed / resolved values.

The identifier
serialized as an identifier

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.

The component serialized as per followed by the unit in its canonical form as defined in its respective specification.
Probably should distinguish between declared and computed / resolved values.

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.
Note:
scientific notation is not used.

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

The resolution in dots per
CSS pixel
serialized as per
followed by the literal string "
dppx
".

The numerator serialized as per
followed by the literal string "
",
followed by the denominator serialized as per .

The return value of the following algorithm:
Let
be the string "
rect(
".
Let
list
be a list of the CSS component values belonging to .
Let each item in
list
be the result of invoking
serialize a CSS component value
of that item.
Append the result of invoking
serialize a comma-separated list
on
list
to
Append "
" (U+0029) to
Return


The string
serialized as a string

The time in seconds serialized as per followed by
the literal string "
".

The
absolute-URL string
serialized as URL
This should differentiate declared and computed

values, see
#3195
,
,
,
,
,
,
,
,
,
,
, and
,
are considered macros by this specification. They all represent instances
of components outlined above.
One idea is that we can remove this section somewhere in
the CSS3/CSS4 timeline by moving the above definitions to the drafts that
define the CSS components.
Tests
serialize-custom-props.html
(live test)
(source)
6.7.2.1.
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.
Before
After
background: none
background: rgba(0, 0, 0, 0)
outline: none
outline: invert
border: none
border: medium
list-style: none
list-style: disc
margin: 0 1px 1px 1px
margin: 0px 1px 1px
azimuth: behind left
azimuth: 220deg
font-family: a, 'b"', serif
font-family: "a", "b\"", serif
content: url('h)i') '\[\]'
content: url("h)i") "[]"
azimuth: leftwards
azimuth: leftwards
color: rgb(18, 52, 86)
color: #123456
color: rgba(000001, 0, 0, 1)
color: #000000
Some of these need to be updated per the new rules.
7.
DOM Access to CSS Declaration Blocks
7.1.
The
ElementCSSInlineStyle
Mixin
The
ElementCSSInlineStyle
mixin provides access to inline style properties of an element.
interface
mixin
ElementCSSInlineStyle
SameObject
PutForwards
cssText
readonly
attribute
CSSStyleProperties
style
};
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]
HTMLElement
includes
ElementCSSInlineStyle
If the user agent supports SVG, the following IDL applies:
[SVG11]
SVGElement
includes
ElementCSSInlineStyle
If the user agent supports MathML, the following IDL applies:
[MathML-Core]
MathMLElement
includes
ElementCSSInlineStyle
Tests
css-style-attribute-modifications.html
(live test)
(source)
inline-style-001.html
(live test)
(source)
7.2.
Extensions to the
Window
Interface
partial
interface
Window
NewObject
CSSStyleProperties
getComputedStyle
Element
elt
optional
CSSOMString
pseudoElt
);
};
The
getComputedStyle(
elt
pseudoElt
method must run these
steps:
Let
doc
be
elt
’s
node document
Let
obj
be
elt
If
pseudoElt
is provided, is not the empty string, and starts with a colon, then:
Parse
pseudoElt
as a

, and let
type
be the result.
If
type
is failure, or is a
::slotted()
or
::part()
pseudo-element, let
obj
be null.
Otherwise let
obj
be the given pseudo-element of
elt
Note:
CSS2 pseudo-elements should match both the double and single-colon
versions. That is, both
:before
and
::before
should
match above.
Let
decls
be an empty list of
CSS declarations
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
There are UAs that handle shorthands, and all UAs handle shorthands
that used to be longhands like
overflow
, see
#2529
Order of custom properties is currently undefined, see
#4947
Return a live
CSSStyleProperties
object with the following properties:
computed flag
Set.
readonly flag
Set.
declarations
decls
parent CSS rule
Null.
owner node
obj
The
getComputedStyle()
method exposes information from
CSS style
sheets
with the
origin-clean flag
unset.
Tests
getComputedStyle-animations-replaced-into-ib-split.html
(live test)
(source)
getComputedStyle-detached-subtree.html
(live test)
(source)
getComputedStyle-display-none-001.html
(live test)
(source)
getComputedStyle-display-none-002.html
(live test)
(source)
getComputedStyle-display-none-003.html
(live test)
(source)
getComputedStyle-dynamic-subdoc.html
(live test)
(source)
getComputedStyle-getter-v-properties.tentative.html
(live test)
(source)
getComputedStyle-insets-absolute-crash.html
(live test)
(source)
getComputedStyle-insets-absolute-logical-crash.html
(live test)
(source)
getComputedStyle-insets-absolute-roundtrip.html
(live test)
(source)
getComputedStyle-insets-absolute.html
(live test)
(source)
getComputedStyle-insets-fixed.html
(live test)
(source)
getComputedStyle-insets-grid.html
(live test)
(source)
getComputedStyle-insets-multicol-absolute-crash.html
(live test)
(source)
getComputedStyle-insets-nobox.html
(live test)
(source)
getComputedStyle-insets-relative.html
(live test)
(source)
getComputedStyle-insets-relpos-inline.html
(live test)
(source)
getComputedStyle-insets-static.html
(live test)
(source)
getComputedStyle-insets-sticky-container-for-abspos.html
(live test)
(source)
getComputedStyle-insets-sticky.html
(live test)
(source)
getComputedStyle-layout-dependent-removed-ib-sibling.html
(live test)
(source)
getComputedStyle-layout-dependent-replaced-into-ib-split.html
(live test)
(source)
getComputedStyle-line-height.html
(live test)
(source)
getComputedStyle-logical-enumeration.html
(live test)
(source)
getComputedStyle-margins-roundtrip.html
(live test)
(source)
getComputedStyle-property-order.html
(live test)
(source)
getComputedStyle-pseudo-checkmark.html
(live test)
(source)
getComputedStyle-pseudo-picker-icon.html
(live test)
(source)
getComputedStyle-pseudo-with-argument.html
(live test)
(source)
getComputedStyle-pseudo.html
(live test)
(source)
getComputedStyle-resolved-colors.html
(live test)
(source)
getComputedStyle-resolved-min-max-clamping.html
(live test)
(source)
getComputedStyle-resolved-min-size-auto.html
(live test)
(source)
getComputedStyle-special-chars-crash.html
(live test)
(source)
getComputedStyle-sticky-pos-percent.html
(live test)
(source)
getComputedStyle-width-scroll.tentative.html
(live test)
(source)
8.
Utility APIs
8.1.
The
CSS.escape()
Method
The
CSS
namespace holds useful CSS-related functions that do not belong elsewhere.
Exposed
Window
namespace
CSS
CSSOMString
escape
CSSOMString
ident
);
};
Tests
CSS-namespace-object-class-string.html
(live test)
(source)
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
For example, to serialize a string for use as part of a selector, the
escape()
method can be used:
var element = document.querySelector('#' + CSS.escape(id) + ' > img');
The
escape()
method can also be used for escaping strings, although it escapes characters that don’t strictly need to be
escaped:
var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');
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
escape.html
(live test)
(source)
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 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
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.
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
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
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
resolved value special case property
defined in another specification
As defined in the relevant specification.
Any other property
The
resolved value
is the
computed value
Tests
computed-style-001.html
(live test)
(source)
computed-style-002.html
(live test)
(source)
computed-style-003.html
(live test)
(source)
computed-style-004.html
(live test)
(source)
computed-style-005.html
(live test)
(source)
resolved-border-width.html
(live test)
(source)
10.
IANA Considerations
10.1.
Default-Style
This section describes a header field for registration in the Permanent
Message Header Field Registry.
Header field name
Default-Style
Applicable protocol
http
Status
standard
Author/Change controller
W3C
Specification document(s)
This document is the relevant specification.
Related information
None.
11.
Change History
This section documents some of the changes between publications of this specification. This section is not exhaustive. Bug fixes and editorial changes are
generally not listed.
11.1.
Changes From 17 March 2016
Serialization of

is changed.
[CEReactions]
IDL extended attributes are added.
Resolved value for logical properties are added.
getComputedStyle
for
display
contents
is changed.
MediaList.item
now returns serialization.
MediaList.item
does not serialize shorthand if importance differs.
Other specifications are allowed to specify resolved value.
index
argument in
insertRule
is now optional.
href
attribute of
Stylesheet
and
CSSImportRule
now uses
USVString
CSSOMString
is introduced.
Serialization of
CSSMediaRule
and
CSSFontFaceRule
is added.
Updating flag
is added to CSS declaration block to avoid serialize-and-reparse on style attribute.
Serialization of a declaration value is now properly defined.
getComputedStyle
now returns the style rules of the node’s document.
TypeError
is thrown when the pseudo-element passed to
getComputedStyle
is unknown or
::slotted()
CSS
is switched from interface to namespace.
setPropertyValue
and
setPropertyPriority
are removed from
CSSStyleDeclaration
due to lack of interest from implementations.
The
styleSheets
IDL attribute is moved from
Document
to
DocumentOrShadowRoot
LinkStyle.sheet now returns
CSSStyleSheet
instead of
StyleSheet
Deprecated CSSStyleSheet members are defined.
The
CSSRule.type
attribute is deprecated.
Serialization of

is added.
CSSStyleDeclaration.cssText
now returns the empty string for computed style.
Custom properties
are included in
getComputedStyle
MathML IDL is introduced.
Serialization of
CSSKeyframesRule
and
CSSKeyframeRule
is added.
Serialization of media query is changed.
A shorthand is not serialized if there are longhands with other property group / mapping logic in between the longhands of that shorthand.
CSSStyleRule
serialization is aware of nesting now.
Constructable stylesheets is introduced.
11.2.
Changes From 5 December 2013
API for alternative stylesheets is removed:
selectedStyleSheetSet
lastStyleSheetSet
preferredStyleSheetSet
styleSheetSets
enableStyleSheetsForSet()
on
Document
The
pseudo()
method on
Element
and the
PseudoElement
interface is
removed.
The
cascadedStyle
defaultStyle
rawComputedStyle
and
usedStyle
IDL attributes on
Element
are removed.
The
cssText
IDL attribute’s setter on
CSSRule
is changed to do nothing.
IDL attributes of the form
webkitFoo
(with lowercase
) on
CSSStyleDeclaration
are added.
CSSNamespaceRule
is changed back to readonly.
Handling of
@charset
in
insertRule()
is removed.
CSSCharsetRule
is removed again.
Serialization of identifiers and strings is changed.
Serialization of selectors now supports combinators ">>" and "||" and the "i" flag in attribute selectors.
Serialization of :lang() is changed.
Serialization of

and

is changed.
setProperty()
on
CSSStyleDeclaration
is changed.
11.3.
Changes From 12 July 2011 To 5 December 2013
Cross-origin stylesheets are not allowed to be read or changed.
CSSCharsetRule
is re-introduced.
CSSGroupingRule
and
CSSMarginRule
are introduced.
CSSNamespaceRule
is now mutable.
Parse
and
serialize
a CSS declaration block is
now defined.
Shorthands are now supported in
setProperty()
getPropertyValue()
, et al.
setPropertyValue
and
setPropertyPriority
are added to
CSSStyleDeclaration
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.
The
CSS.escape()
static method is introduced.
12.
Security Considerations
No new security considerations have been reported on this specification.
13.
Privacy Considerations
No new privacy considerations have been reported on this specification.
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
cssstyledeclaration-csstext-setter.window.js
(live test)
(source)
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:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
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
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
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 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.
Implementations of Unstable and Proprietary Features
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
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
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
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
add a CSS style sheet
, in § 6.2
addRule()
, in § 6.1.2.1
addRule(selector)
, in § 6.1.2.1
addRule(selector, block, optionalIndex)
, in § 6.1.2.1
addRule(selector, style)
, in § 6.1.2.1
addRule(selector, style, index)
, in § 6.1.2.1
adoptedStyleSheets
, in § 6.2.3
alternate flag
, in § 6.1
appendMedium(medium)
, in § 4.4
associated CSS style sheet
, in § 6.3.2
baseURL
, in § 6.1.2
bleed
, in § 6.4.7
camel-cased attribute
, in § 6.6.1
camel_cased_attribute
, in § 6.6.1
case-sensitive flag
, in § 6.5
change the preferred CSS style sheet set name
, in § 6.2
CHARSET_RULE
, in § 6.4.2
child CSS rules
, in § 6.4
collection of media queries
, in § 4.4
compare media queries
, in § 4.3
computed flag
, in § 6.6
constructed flag
, in § 6.1
constructor()
, in § 6.1
constructor document
, in § 6.1
constructor(options)
, in § 6.1
create a constructed CSSStyleSheet
, in § 6.1
create a CSS style sheet
, in § 6.2
create a MediaList object
, in § 4.4
CSS
, in § 8.1
CSS declaration
, in § 6.5
CSS declaration block
, in § 6.6
cssFloat
, in § 6.6.1
CSSGroupingRule
, in § 6.4.5
CSSImportRule
, in § 6.4.4
CSSMarginRule
, in § 6.4.8
CSSNamespaceRule
, in § 6.4.9
CSSOMString
, in § 3
CSSPageDescriptors
, in § 6.4.7
CSSPageRule
, in § 6.4.7
CSS property to IDL attribute
, in § 6.6.1
CSS rule
, in § 6.4
CSSRule
, in § 6.4.2
CSSRuleList
, in § 6.4.1
CSS rules
, in § 6.1
cssRules
attribute for CSSGroupingRule
, in § 6.4.5
attribute for CSSStyleSheet
, in § 6.1.2
CSSStyleDeclaration
, in § 6.6.1
CSSStyleProperties
, in § 6.6.1
CSSStyleRule
, in § 6.4.3
CSS style sheet
, in § 6.1
CSSStyleSheet
, in § 6.1.2
CSSStyleSheet()
, in § 6.1
CSSStyleSheetInit
, in § 6.1.2
CSSStyleSheet(options)
, in § 6.1
CSS style sheet set
, in § 6.2
CSS style sheet set name
, in § 6.2
cssText
attribute for CSSRule
, in § 6.4.2
attribute for CSSStyleDeclaration
, in § 6.6.1
dashed attribute
, in § 6.6.1
dashed_attribute
, in § 6.6.1
declarations
, in § 6.6
deleteMedium(medium)
, in § 4.4
deleteRule(index)
method for CSSGroupingRule
, in § 6.4.5
method for CSSStyleSheet
, in § 6.1.2
disabled
attribute for StyleSheet
, in § 6.1.1
dict-member for CSSStyleSheetInit
, in § 6.1.2
disabled flag
, in § 6.1
disallow modification flag
, in § 6.1
document or shadow root CSS style sheets
, in § 6.2
ElementCSSInlineStyle
, in § 7.1
enable a CSS style sheet set
, in § 6.2
enabled CSS style sheet set
, in § 6.2
escape a character
, in § 2.1
escape a character as code point
, in § 2.1
escaped as code point
, in § 2.1
escape(ident)
, in § 8.1
fetch a CSS style sheet
, in § 6.3.1
final CSS style sheets
, in § 6.2
FONT_FACE_RULE
, in § 6.4.2
getComputedStyle(elt)
, in § 7.2
getComputedStyle(elt, pseudoElt)
, in § 7.2
getPropertyPriority(property)
, in § 6.6.1
getPropertyValue(property)
, in § 6.6.1
href
attribute for CSSImportRule
, in § 6.4.4
attribute for StyleSheet
, in § 6.1.1
http-default-style
, in § 10.1
IDL attribute to CSS property
, in § 6.6.1
important flag
, in § 6.5
IMPORT_RULE
, in § 6.4.2
insert a CSS rule
, in § 6.4
insertRule(rule)
method for CSSGroupingRule
, in § 6.4.5
method for CSSStyleSheet
, in § 6.1.2
insertRule(rule, index)
method for CSSGroupingRule
, in § 6.4.5
method for CSSStyleSheet
, in § 6.1.2
item(index)
method for CSSRuleList
, in § 6.4.1
method for CSSStyleDeclaration
, in § 6.6.1
method for MediaList
, in § 4.4
method for StyleSheetList
, in § 6.2.2
last CSS style sheet set name
, in § 6.2
layerName
, in § 6.4.4
length
attribute for CSSRuleList
, in § 6.4.1
attribute for CSSStyleDeclaration
, in § 6.6.1
attribute for MediaList
, in § 4.4
attribute for StyleSheetList
, in § 6.2.2
LinkStyle
, in § 6.3.2
location
, in § 6.1
margin
, in § 6.4.7
margin-bottom
, in § 6.4.7
marginBottom
, in § 6.4.7
margin-left
, in § 6.4.7
marginLeft
, in § 6.4.7
margin-right
, in § 6.4.7
marginRight
, in § 6.4.7
MARGIN_RULE
, in § 6.4.2
margin-top
, in § 6.4.7
marginTop
, in § 6.4.7
marks
, in § 6.4.7
media
attribute for CSSImportRule
, in § 6.4.4
attribute for StyleSheet
, in § 6.1.1
dfn for CSSStyleSheet
, in § 6.1
dict-member for CSSStyleSheetInit
, in § 6.1.2
MediaList
, in § 4.4
MEDIA_RULE
, in § 6.4.2
mediaText
, in § 4.4
name
, in § 6.4.8
NAMESPACE_RULE
, in § 6.4.2
namespaceURI
, in § 6.4.9
origin-clean flag
, in § 6.1
owner CSS rule
, in § 6.1
owner node
dfn for CSSStyleDeclaration
, in § 6.6
dfn for CSSStyleSheet
, in § 6.1
ownerNode
, in § 6.1.1
ownerRule
, in § 6.1.2
page-orientation
, in § 6.4.7
pageOrientation
, in § 6.4.7
PAGE_RULE
, in § 6.4.2
parent CSS rule
dfn for CSSRule
, in § 6.4
dfn for CSSStyleDeclaration
, in § 6.6
parent CSS style sheet
dfn for CSSRule
, in § 6.4
dfn for CSSStyleSheet
, in § 6.1
parentRule
attribute for CSSRule
, in § 6.4.2
attribute for CSSStyleDeclaration
, in § 6.6.1
parentStyleSheet
attribute for CSSRule
, in § 6.4.2
attribute for StyleSheet
, in § 6.1.1
parse a CSS declaration block
, in § 6.6
parse a CSS rule
, in § 6.4
parse a CSS value
, in § 6.7.1
parse a group of selectors
, in § 5.1
parse a list of CSS page selectors
, in § 6.4.7
parse a media query
, in § 4.1
parse a media query list
, in § 4.1
persistent CSS style sheet
, in § 6.2
preferred CSS style sheet set name
, in § 6.2
preferred order
, in § 6.6
prefix
, in § 6.4.9
prolog
, in § 6.3.4
property name
, in § 6.5
readonly flag
, in § 6.6
remove a CSS rule
, in § 6.4
remove a CSS style sheet
, in § 6.2
removeProperty(property)
, in § 6.6.1
removeRule()
, in § 6.1.2.1
removeRule(index)
, in § 6.1.2.1
replaceSync(text)
, in § 6.1.2
replace(text)
, in § 6.1.2
resolved value
, in § 9
resolved value special case property
, in § 9
resolved value special case property like color
, in § 9
resolved value special case property like height
, in § 9
resolved value special case property like top
, in § 9
rules
, in § 6.1.2.1
select a CSS style sheet set
, in § 6.2
selectorText
attribute for CSSPageRule
, in § 6.4.7
attribute for CSSStyleRule
, in § 6.4.3
serialize a comma-separated list
, in § 2.1
serialize a CSS component value
, in § 6.7.2
serialize a CSS declaration
, in § 6.6
serialize a CSS declaration block
, in § 6.6
serialize a CSS rule
, in § 6.4
serialize a CSS value
, in § 6.7.2
serialize a function
, in § 2.1
serialize a group of selectors
, in § 5.2
serialize a list of CSS page selectors
, in § 6.4.7
serialize a LOCAL
, in § 2.1
serialize a media feature value
, in § 4.2.1
serialize a media query
, in § 4.2
serialize a media query list
, in § 4.2
serialize an identifier
, in § 2.1
serialize as a string
, in § 2.1
serialize a selector
, in § 5.2
serialize a simple selector
, in § 5.2
serialize a string
, in § 2.1
serialize a URL
, in § 2.1
serialize a whitespace-separated list
, in § 2.1
set
, in § 2
set a CSS declaration
, in § 6.6.1
setProperty(property, value)
, in § 6.6.1
setProperty(property, value, priority)
, in § 6.6.1
sheet
, in § 6.3.2
size
, in § 6.4.7
specified order
, in § 6.4.3
stringification behavior
, in § 4.4
style
attribute for CSSMarginRule
, in § 6.4.8
attribute for CSSPageRule
, in § 6.4.7
attribute for CSSStyleRule
, in § 6.4.3
attribute for ElementCSSInlineStyle
, in § 7.1
STYLE_RULE
, in § 6.4.2
StyleSheet
, in § 6.1.1
styleSheet
, in § 6.4.4
stylesheet base URL
, in § 6.1
StyleSheetList
, in § 6.2.2
styleSheets
, in § 6.2.3
supported CSS property
, in § 2
supported styling language
, in § 2
supportsText
, in § 6.4.4
synchronously replace the rules of a CSSStyleSheet
, in § 6.1.2
text
, in § 6.4
title
attribute for StyleSheet
, in § 6.1.1
dfn for CSSStyleSheet
, in § 6.1
type
attribute for CSSRule
, in § 6.4.2
attribute for StyleSheet
, in § 6.1.1
dfn for CSSRule
, in § 6.4
dfn for CSSStyleSheet
, in § 6.1
unset
, in § 2
update style attribute for
, in § 6.6
updating flag
, in § 6.6
value
, in § 6.5
webkit-cased attribute
, in § 6.6.1
webkit_cased_attribute
, in § 6.6.1
Terms defined by reference
[]
defines the following terms:
a style sheet that is blocking scripts
being rendered
browsing context
content-type metadata
contributes a script-blocking style sheet
document base url
document url
fetch
html elements
long
network error
node document
origin
pseudo-attribute
quirks mode
referrer
request
script-blocking style sheet set
supported property indices
throw
tree order
URL
url
(for request)
URL parser
URL serializer
xml-stylesheet processing instruction
[COMPAT]
defines the following terms:
-webkit-transform
[CSS-ANIMATIONS-1]
defines the following terms:
CSSKeyframeRule
CSSKeyframesRule
cssRules
keyText
name
[CSS-BACKGROUNDS-3]
defines the following terms:
background-color
[CSS-BORDERS-4]
defines the following terms:
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
[CSS-BOX-4]
defines the following terms:
margin-bottom
margin-left
margin-right
margin-top
padding-bottom
padding-left
padding-right
padding-top
[CSS-BREAK-4]
defines the following terms:
break
[CSS-CASCADE-5]
defines the following terms:
computed value
layer name
used value
[CSS-CASCADE-6]
defines the following terms:
@import
[CSS-COLOR-4]
defines the following terms:

color
[CSS-COLOR-5]
defines the following terms:

[CSS-COUNTER-STYLES-3]
defines the following terms:
CSSCounterStyleRule
[CSS-DISPLAY-4]
defines the following terms:
contents
display
none
[CSS-FONTS-4]
defines the following terms:

CSSFontFeatureValuesRule
font-feature-settings
font-size
font-stretch
font-style
font-variant
font-weight
unicode-range
[CSS-FONTS-5]
defines the following terms:
CSSFontFaceRule
[CSS-INLINE-3]
defines the following terms:
normal
[CSS-LISTS-3]
defines the following terms:

[CSS-LOGICAL-1]
defines the following terms:
block-size
inline-size
logical property group
mapping logic
margin-block-end
margin-block-start
margin-inline-end
margin-inline-start
padding-block-end
padding-block-start
padding-inline-end
padding-inline-start
[CSS-NAMESPACES-3]
defines the following terms:
default namespace
namespace prefix
[CSS-NESTING-1]
defines the following terms:
nested declarations rule
[CSS-OVERFLOW-3]
defines the following terms:
overflow
[CSS-POSITION-3]
defines the following terms:
bottom
inset-block-end
inset-block-start
inset-inline-end
inset-inline-start
left
right
top
[CSS-SHADOW-1]
defines the following terms:
::part()
::slotted()
flat tree
[CSS-SIZING-3]
defines the following terms:
height
width
[CSS-UI-4]
defines the following terms:
caret-color
outline-color
[CSS-VALUES-4]
defines the following terms:











keyword
px
||
[CSS-VARIABLES-1]
defines the following terms:
custom property
[CSS-VARIABLES-2]
defines the following terms:
guaranteed-invalid value
[CSS21]
defines the following terms:


line-height
[CSS3-CONDITIONAL]
defines the following terms:

CSSMediaRule
CSSSupportsRule
[CSS3SYN]
defines the following terms:

environment encoding
parse
parse a block's contents
parse a list of component values
parse a rule
parse a stylesheet's contents
serialize an value
[CSSOM-1]
defines the following terms:
location
webkit-cased attribute
[DOM]
defines the following terms:
Document
DocumentOrShadowRoot
Element
ProcessingInstruction
attribute change steps
connected
data
encoding
following
get an attribute by namespace and local name
in a document tree
node
nodes
set an attribute value
shadow-including root
[ENCODING]
defines the following terms:
get an encoding
[HTML]
defines the following terms:
CEReactions
HTMLElement
Window
associated Document
CORS-same-origin
current global object
in parallel
origin
style
[I18N-GLOSSARY]
defines the following terms:
case-sensitive
[INFRA]
defines the following terms:
append
ASCII case-insensitive
ASCII lowercase
ASCII uppercase
code unit
continue
for each
list
string
surrogate
[MathML-Core]
defines the following terms:
MathMLElement
[MEDIAQUERIES-5]
defines the following terms:
aspect-ratio
color
color-index
device-aspect-ratio
device-height
device-width
grid
height
media feature
media query
media query list
media type
monochrome
orientation
resolution
scan
width
[SELECTORS-3]
defines the following terms:
::after
::before
[SELECTORS-4]
defines the following terms:

compound selector
selector list
simple selector
universal selector
[SVG2]
defines the following terms:
SVGElement
[URL]
defines the following terms:
absolute-URL string
[WEBIDL]
defines the following terms:
DOMException
DOMString
Exposed
HierarchyRequestError
IndexSizeError
InvalidStateError
LegacyNullToEmptyString
NewObject
NoModificationAllowedError
NotAllowedError
NotFoundError
ObservableArray
Promise
PutForwards
SameObject
SecurityError
SyntaxError
TypeError
USVString
backing list
boolean
set an indexed value
this
undefined
unsigned long
unsigned short
References
Normative References
[CSS-ANIMATIONS-1]
David Baron; et al.
CSS Animations Level 1
. URL:
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS-BORDERS-4]
Elika Etemad; et al.
CSS Borders and Box Decorations Module Level 4
. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 6
. URL:
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. URL:
[CSS-COLOR-5]
Chris Lilley; Una Kravets; Lea Verou.
CSS Color Module Level 5
. URL:
[CSS-COUNTER-STYLES-3]
Tab Atkins Jr..
CSS Counter Styles Level 3
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-FONTS-4]
Chris Lilley.
CSS Fonts Module Level 4
. URL:
[CSS-FONTS-5]
Chris Lilley.
CSS Fonts Module Level 5
. URL:
[CSS-INLINE-3]
Elika Etemad.
CSS Inline Layout Module Level 3
. URL:
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr..
CSS Lists and Counters Module Level 3
. URL:
[CSS-LOGICAL-1]
Elika Etemad; Rossen Atanassov.
CSS Logical Properties and Values Module Level 1
. URL:
[CSS-NAMESPACES-3]
Elika Etemad.
CSS Namespaces Module Level 3
. URL:
[CSS-NESTING-1]
Tab Atkins Jr..
CSS Nesting Module Level 1
. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. URL:
[CSS-SHADOW-1]
CSS Shadow Module Level 1
. Editor's Draft. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. URL:
[CSS-UI-4]
Tab Atkins Jr.; Florian Rivoal.
CSS Basic User Interface Module Level 4
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-VARIABLES-1]
Tab Atkins Jr..
CSS Custom Properties for Cascading Variables Module Level 1
. URL:
[CSS-VARIABLES-2]
CSS Custom Properties for Cascading Variables Module Level 2
. Editor's Draft. URL:
[CSS21]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3-CONDITIONAL]
Chris Lilley; David Baron; Elika Etemad.
CSS Conditional Rules Module Level 3
. URL:
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr..
CSS Cascading and Inheritance Level 3
. URL:
[CSS3PAGE]
Elika Etemad.
CSS Paged Media Module Level 3
. URL:
[CSS3SYN]
Tab Atkins Jr.; Simon Sapin.
CSS Syntax Module Level 3
. URL:
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. URL:
[DOM]
Anne van Kesteren.
DOM Standard
. Living Standard. URL:
[ENCODING]
Anne van Kesteren.
Encoding Standard
. Living Standard. URL:
[FETCH]
Anne van Kesteren.
Fetch Standard
. Living Standard. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[I18N-GLOSSARY]
Richard Ishida; Addison Phillips.
Internationalization Glossary
. URL:
[INFRA]
Anne van Kesteren; Domenic Denicola.
Infra Standard
. Living Standard. URL:
[MathML-Core]
David Carlisle; Frédéric Wang.
MathML Core
. URL:
[MEDIAQUERIES]
Tab Atkins Jr.; Florian Rivoal.
Media Queries Level 4
. URL:
[MEDIAQUERIES-5]
Tab Atkins Jr.; et al.
Media Queries Level 5
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SELECTORS-3]
Tantek Çelik; et al.
Selectors Level 3
. URL:
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr..
Selectors Level 4
. URL:
[SVG2]
Amelia Bellamy-Royds; et al.
Scalable Vector Graphics (SVG) 2
. URL:
[URL]
Anne van Kesteren.
URL Standard
. Living Standard. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
[XML]
Tim Bray; et al.
Extensible Markup Language (XML) 1.0 (Fifth Edition)
. 26 November 2008. REC. URL:
[XML-STYLESHEET]
James Clark; Simon Pieters; Henry Thompson.
Associating Style Sheets with XML documents 1.0 (Second Edition)
. 28 October 2010. REC. URL:
Non-Normative References
[COMPAT]
Mike Taylor.
Compatibility Standard
. Living Standard. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. URL:
[SVG11]
Erik Dahlström; et al.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
. 16 August 2011. REC. URL:
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
);
};