Title: CSS Object Model (CSSOM)
ED: https://drafts.csswg.org/cssom/
TR: https://www.w3.org/TR/cssom-1/
Previous Version: https://www.w3.org/TR/2016/WD-cssom-1-20160317/
Previous Version: https://www.w3.org/TR/2013/WD-cssom-20131205/
Previous Version: https://www.w3.org/TR/2011/WD-cssom-20110712/
Previous Version: https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/
Group: CSSWG
Status: ED
Work Status: Exploring
Shortname: cssom
Level: 1
Editor: Daniel Glazman, Disruptive Innovations http://disruptive-innovations.com/, daniel.glazman@disruptive-innovations.com, w3cid 13329
Former Editor: Simon Pieters, Opera Software AS http://www.opera.com, simonp@opera.com
Former Editor: Glenn Adams, Cox Communications, Inc. http://www.cox.com, glenn.adams@cos.com, http://www.w3.org/wiki/User:Gadams
Former Editor: Anne van Kesteren, Opera Software ASA http://www.opera.com, annevk@annevk.nl, https://annevankesteren.nl/
!Legacy issues list: Bugzilla
Abstract: CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and of course CSS itself.
Ignored Terms: EmptyString, mediaText, cssText, InvalidCharacterError, SecurityError, SyntaxError, IndexSizeError, HierarchyRequestError, InvalidStateError, InvalidModificationError, NoModificationAllowedError, CORS-same-origin, group of selectors, list of css page selectors, CSSCharsetRule, ProcessingInstruction, EventTarget, EventListener, Event, EventInit, Element, Range, Node, Text, style, CSSFontFaceRule, -webkit-transform
Ignored Vars: m1, m2, camel_cased_attribute, webkit_cased_attribute, dashed_attribute
Include Can I Use Panels: true
Can I Use URL: https://drafts.csswg.org/cssom/
Can I Use URL: https://www.w3.org/TR/cssom-1/
Ignore Can I Use URL Failure: https://drafts.csswg.org/cssom/
Ignore Can I Use URL Failure: https://www.w3.org/TR/cssom-1/

urlPrefix: https://html.spec.whatwg.org/multipage/
    urlPrefix: infrastructure.html
        type: dfn
            text: html elements
            text: tree order
            text: document base url
            text: content-type metadata; url: #content-type
    urlPrefix: browsers.html
        type: interface; text: WindowProxy
        type: dfn
            text: browsing context
            text: auxiliary browsing context
            text: familiar with
            text: same origin
    urlPrefix: webappapis.html
        type: dfn
            text: responsible browsing context
            text: incumbent settings object
            text: event loop
            text: event handlers
            text: event handler event type
            text: event handler IDL attributes
    urlPrefix: infrastructure.html
        type: dfn
            text: split a string on commas
            text: skip whitespace
            text: collect a sequence of characters
            text: space character
            text: rules for parsing integers
    urlPrefix: xhtml.html
        type: dfn
            text: xml parser
    urlPrefix: semantics.html
        type: dfn
            text: a style sheet that is blocking scripts
            text: style sheet ready
urlPrefix: https://dom.spec.whatwg.org/#concept-
    type: dfn
        text: dispatch; url: event-dispatch
        text: event
        text: event listener
        text: quirks mode; url: document-quirks
        text: fire an event; url: event-fire
        text: node document
        text: document url
urlPrefix: https://www.w3.org/TR/CSS21/visuren.html
    type: dfn; text: anonymous block box; url: #anonymous-block-level
urlPrefix: http://heycam.github.io/webidl/#
    type: interface; urlPrefix: idl-
        text: double
        text: long
    type: dfn; urlPrefix: dfn-
        text: converted to an IDL value
        text: throw
        text: supported property indices
urlPrefix: https://encoding.spec.whatwg.org/#; spec: ENCODING
    type: dfn; text: get an encoding; url: concept-encoding-get
urlPrefix: https://url.spec.whatwg.org/#concept-
    type: dfn
        text: URL
        text: URL parser
        text: URL serializer
urlPrefix: https://www.w3.org/TR/xml-stylesheet/#dt-
    type: dfn; text: xml-stylesheet processing instruction
    type: dfn; text: pseudo-attribute
urlPrefix: https://fetch.spec.whatwg.org/#concept-
    type: dfn;
        text: fetch
        text: request
        for: request
            text: url; url: request-url
            text: origin; url: request-origin
            text: referrer; url: request-referrer
        text: network error

spec:css-display-3; type:value; for:display; text:table
spec:css-color-4; type:property; text:color
spec:css-position-3; type:property; text:left
spec:html5; type:element; text:style
spec:css-namespaces-3; type:dfn; text:namespace prefix
spec:dom; type:interface; text:Document
spec:html; type:dfn; text:ascii case-insensitive
spec:html; type:dfn; text:case-sensitive
spec:css-logical; type:property; text:inline-size
spec:css-variables-1; type:dfn; text:custom property
spec:selectors-3; type:selector; text:::before
spec:selectors-3; type:selector; text:::after
spec:css-fonts-4; type:descriptor; text:unicode-range
spec:css-fonts-4; type:descriptor; text:font-variant
spec:css-fonts-4; type:descriptor; text:font-feature-settings
spec:css-fonts-4; type:descriptor; text:font-stretch
spec:css-fonts-4; type:descriptor; text:font-weight
spec:css-fonts-4; type:descriptor; text:font-style

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

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

typedef USVString CSSOMString;

typedef DOMString CSSOMString;

1. If the media query list is empty, then return the empty string.
2. Serialize each media query in the list of media queries, in the same order as they appear in the list of media queries, and then serialize the list.

1. If the media query is negated append "not", followed by a single SPACE (U+0020), to s.
2. Let type be the serialization as an identifier of the media type of the media query, converted to ASCII lowercase.
3. If the media query does not contain media features append type, to s, then return s.
4. If type is not "all" or if the media query is negated append type, followed by a single SPACE (U+0020), followed by "and", followed by a single SPACE (U+0020), to s.
5. Sort the media features in lexicographical order.
6. Then, for each media feature:
   1. Append a "(" (U+0028), followed by the media feature name, converted to ASCII lowercase, to s.
   2. If a value is given append a ":" (U+003A), followed by a single SPACE (U+0020), followed by the serialized media feature value, to s.
   3. Append a ")" (U+0029) to s.
   4. If this is not the last media feature append a single SPACE (U+0020), followed by "and", followed by a single SPACE (U+0020), to s.
7. Return s.

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

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

all and (color) and (color)

(color)

[Exposed=Window,
 LegacyArrayClass]
interface MediaList {
  stringifier attribute [TreatNullAs=EmptyString] CSSOMString mediaText;
  readonly attribute unsigned long length;
  getter CSSOMString? item(unsigned long index);
  void appendMedium(CSSOMString medium);
  void deleteMedium(CSSOMString medium);
};

1. Create a new MediaList object.
2. Set its {{MediaList/mediaText}} attribute to text.
3. Return the newly created MediaList object.

1. Empty the collection of media queries.
2. If the given value is the empty string, then return.
3. Append all the media queries as a result of parsing the given value to the collection of media queries.

1. Let m be the result of parsing the given value.
2. If m is null, then return.
3. If comparing m with any of the media queries in the collection of media queries returns true, then return.
4. Append m to the collection of media queries.

1. Let m be the result of parsing the given value.
2. If m is null, then return.
3. Remove any media query from the collection of media queries for which comparing the media query with m returns true. If nothing was removed, then throw a {{NotFoundError}} exception.

1. If there is only one simple selector in the compound selectors which is a universal selector, append the result of serializing the universal selector to s.
2. Otherwise, for each simple selector in the compound selectors that is not a universal selector of which the namespace prefix maps to a namespace that is not the default namespace serialize the simple selector and append the result to s.
3. If this is not the last part of the chain of the selector append a single SPACE (U+0020), followed by the combinator ">", "+", "~", ">>", "||", as appropriate, followed by another single SPACE (U+0020) if the combinator was not whitespace, to s.
4. If this is the last part of the chain of the selector and there is a pseudo-element, append "::" followed by the name of the pseudo-element, to s.

type selector

universal selector

1. If the namespace prefix maps to a namespace that is not the default namespace and is not the null namespace (not in a namespace) append the serialization of the namespace prefix as an identifier, followed by a "|" (U+007C) to s.
2. If the namespace prefix maps to a namespace that is the null namespace (not in a namespace) append "|" (U+007C) to s.
3. If this is a type selector append the serialization of the element name as an identifier to s.
4. If this is a universal selector append "*" (U+002A) to s.

attribute selector

1. Append "[" (U+005B) to s.
2. If the namespace prefix maps to a namespace that is not the null namespace (not in a namespace) append the serialization of the namespace prefix as an identifier, followed by a "|" (U+007C) to s.
3. Append the serialization of the attribute name as an identifier to s.
4. If there is an attribute value specified, append "=", "~=", "|=", "^=", "$=", or "*=" as appropriate (depending on the type of attribute selector), followed by the serialization of the attribute value as a string, to s.
5. If the attribute selector has the case-sensitivity flag present, append " i" (U+0020 U+0069) to s.
6. Append "]" (U+005D) to s.

class selector

Append a "." (U+002E), followed by the serialization of the class name as an identifier to s.

ID selector

Append a "#" (U+0023), followed by the serialization of the ID as an identifier to s.

pseudo-class

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

:lang()

The serialization of a comma-separated list of each argument's serialization as a string, preserving relative order.

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

The result of serializing the value using the rules to serialize an <an+b> value.

:not()

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

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 {{MediaList/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 {{MediaList/mediaText}} attribute does not change the corresponding attribute on the owner node.

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.

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

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

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

If this property is specified to an attribute of the owner node, the title must be set to the value of that attribute. Whenever the attribute is set, changed or removed, the title must be set to the new value of the attribute, or to the empty string if the attribute is absent.

alternate flag

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

The following CSS style sheets have their alternate flag set:

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

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

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.

[Exposed=Window]
interface StyleSheet {
  readonly attribute CSSOMString type;
  readonly attribute USVString? href;
  readonly attribute (Element or ProcessingInstruction)? ownerNode;
  readonly attribute StyleSheet? parentStyleSheet;
  readonly attribute DOMString? title;
  [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
  attribute boolean disabled;
};

[Exposed=Window]
interface CSSStyleSheet : StyleSheet {
  readonly attribute CSSRule? ownerRule;
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  void deleteRule(unsigned long index);
};

1. If the origin-clean flag is unset, throw a {{SecurityError}} exception.
2. 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 {{CSSStyleSheet/insertRule()}} or {{CSSStyleSheet/deleteRule()}} methods can result in mutations reflected in the returned object.

1. If the origin-clean flag is unset, throw a {{SecurityError}} exception.
2. Return the result of invoking insert a CSS rule rule in the CSS rules at index.

1. If the origin-clean flag is unset, throw a {{SecurityError}} exception.
2. Remove a CSS rule in the CSS rules at index.

1. Create a new CSS style sheet object and set its properties as specified.
2. Then run the add a CSS style sheet steps for the newly created CSS style sheet.

   If the origin-clean flag is unset, this can expose information from the user's intranet.

1. Add the CSS style sheet to the list of document CSS style sheets at the appropriate location. The remainder of these steps deal with the disabled flag.
2. If the disabled flag is set, then return.
3. 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.
4. 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.
5. Set the disabled flag.

1. Remove the CSS style sheet from the list of document CSS style sheets.
2. Set the CSS style sheet's parent CSS style sheet, owner node and owner CSS rule to null.

1. If name is the empty string, set the disabled flag for each CSS style sheet that is in a CSS style sheet set and return.
2. Unset the disabled flag for each CSS style sheet in a CSS style sheet set whose CSS style sheet set name is a case-sensitive match for name and set it for all other CSS style sheets in a CSS style sheet set.

1. enable a CSS style sheet set with name name.
2. Set last CSS style sheet set name to name.

1. Let current be the preferred CSS style sheet set name.
2. Set preferred CSS style sheet set name to name.
3. 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.

[Exposed=Window,
 LegacyArrayClass]
interface StyleSheetList {
  getter StyleSheet? item(unsigned long index);
  readonly attribute unsigned long length;
};

partial interface Document {
  [SameObject] readonly attribute StyleSheetList styleSheets;
};

1. Let origin be document's origin.
2. Let request be a new request, with the url parsed URL, origin origin, referrer referrer, and if specified the set of parameters parameters.
3. Let response be the result of fetching request.
4. Wait until response is available.
5. If response is a network error, return an error.
6. 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.
7. If response is not in a supported styling language return an error.
8. Return response.

[Exposed=Window,
 NoInterfaceObject]
interface LinkStyle {
  readonly attribute StyleSheet? sheet;
};

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

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

ProcessingInstruction implements LinkStyle;

1. If an instance of this algorithm is currently running for node, abort that instance, and stop the associated fetching if applicable.
2. If node has an associated CSS style sheet, remove it.
3. If node is not an xml-stylesheet processing instruction, then return.
4. If node does not have an href pseudo-attribute, then return.
5. Let title be the value of the title pseudo-attribute or the empty string if the title pseudo-attribute is not specified.
6. If there is an alternate pseudo-attribute whose value is a case-sensitive match for "yes" and title is the empty string, then return.
7. If there is a type pseudo-attribute whose value is not a supported styling language the user agent may return.
8. Let input URL be the value specified by the href pseudo-attribute.
9. Let document be node's node document
10. Let base URL be document's document base URL.
11. Let referrer be document's address.
12. Let parsed URL be the return value of invoking the URL parser with the string input URL and the base URL base URL.
13. If parsed URL is failure, then return.
14. Let response be the result of fetching a CSS style sheet with parsed URL parsed URL, referrer referrer and document document.
15. If response is an error, then return.
16. 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:
    1. If the element has a charset pseudo-attribute, get an encoding from that pseudo-attribute's value. If that succeeds, return the resulting encoding and abort these steps.
    2. Otherwise, return the document's character encoding. [[!DOM]]

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

1. Let title be the value of the first of all the title parameters. If there are no such parameters it is the empty string.
2. If one of the (other) link relation types is an ASCII case-insensitive match for "alternate" and title is the empty string, then return.
3. Let input URL be the value specified. Issue: Be more specific
4. Let base URL be the document's document base URL. Issue: Is there a document at this point?
5. Let referrer be the document's address.
6. Let origin be the document's origin.
7. Let parsed URL be the return value of invoking the URL parser with the string input URL and the base URL base URL.
8. If parsed URL is failure, then return.
9. Let response be the result of fetching a CSS style sheet with parsed URL parsed URL, referrer referrer and document being the document. Issue: What if the HTML parser hasn't decided on quirks/non-quirks yet?
10. 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.

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.

1. Let rule be the return value of invoking parse a rule with string.
2. If rule is a syntax error, return rule.
3. Let parsed rule be the result of parsing rule according to the appropriate CSS specifications, dropping parts that are said to be ignored. If the whole style rule is dropped, return a syntax error.
4. Return parsed rule.

{{CSSStyleRule}}

The result of concatenating the following:

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

{{CSSImportRule}}

The result of concatenating the following:

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

@import url("import.css");

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

{{CSSMediaRule}}

The result of concatenating the following:

1. The string "@media", followed by a single SPACE (U+0020).
2. The result of performing serialize a media query list on rule's media query list.
3. A single SPACE (U+0020), followed by the string "{", i.e., LEFT CURLY BRACKET (U+007B), followed by a newline.
4. The result of performing serialize a CSS rule on the each rule, seperated by a newline and indented by two spaces, in rule's CSSRules list.
5. A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)

{{CSSFontFaceRule}}

The result of concatenating the following:

1. The string "@font-face {", followed by a single SPACE (U+0020).
2. The string "font-family:", followed by a single SPACE (U+0020).
3. The result of performing serialize a string on the rule’s font family name.
4. The string ";", i.e., SEMICOLON (U+003B).
5. If the rule's associated source list is not empty, follow these substeps:
   1. A single SPACE (U+0020), followed by the string "src:", followed by a single SPACE (U+0020).
   2. The result of invoking serialize a comma-separated list on performing serialize a URL or serialize a LOCAL for each source on the source list.
   3. The string ";", i.e., SEMICOLON (U+003B).
6. 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).
7. 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).
8. 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).
9. 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).
10. 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).
11. 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).
12. A single SPACE (U+0020), followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D).

Issue: Need to define how the {{CSSFontFaceRule}} descriptors' values are serialized.

{{CSSPageRule}}

Issue: 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 {{CSSNamespaceRule/prefix}} attribute (if any), followed by a single SPACE (U+0020) if there is a prefix, followed by the serialization as URL of the {{CSSNamespaceRule/namespaceURI}} attribute, followed the character ";" (U+003B).

1. Set length to the number of items in list.
2. If index is greater than length, then throw an {{IndexSizeError}} exception.
3. Set new rule to the results of performing parse a CSS rule on argument rule.
4. If new rule is a syntax error, throw a {{SyntaxError}} exception.
5. If new rule cannot be inserted into list at the zero-index position index due to constraints specified by CSS, then throw a {{HierarchyRequestError}} exception. [[!CSS21]] Note: For example, a CSS style sheet cannot contain an @import at-rule after a style rule.
6. 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.
7. Insert new rule into list at the zero-indexed position index.
8. Return index.

1. Set length to the number of items in list.
2. If index is greater than or equal to length, then throw an {{IndexSizeError}} exception.
3. Set old rule to the indexth item in list.
4. If old rule is an @namespace at-rule, and list contains anything other than @import at-rules, and @namespace at-rules, throw an {{InvalidStateError}} exception.
5. Remove rule old rule from list at the zero-indexed position index.
6. Set old rule's parent CSS rule and parent CSS style sheet to null.

[Exposed=Window,
 LegacyArrayClass]
interface CSSRuleList {
  getter CSSRule? item(unsigned long index);
  readonly attribute unsigned long length;
};

[Exposed=Window]
interface CSSRule {
  const unsigned short STYLE_RULE = 1;
  const unsigned short CHARSET_RULE = 2; // historical
  const unsigned short IMPORT_RULE = 3;
  const unsigned short MEDIA_RULE = 4;
  const unsigned short FONT_FACE_RULE = 5;
  const unsigned short PAGE_RULE = 6;
  const unsigned short MARGIN_RULE = 9;
  const unsigned short NAMESPACE_RULE = 10;
  readonly attribute unsigned short type;
  attribute CSSOMString cssText;
  readonly attribute CSSRule? parentRule;
  readonly attribute CSSStyleSheet? parentStyleSheet;
};

If the object is a {{CSSStyleRule}}

Return STYLE_RULE (numeric value 1).

If the object is a {{CSSImportRule}}

Return IMPORT_RULE (numeric value 3).

If the object is a {{CSSMediaRule}}

Return MEDIA_RULE (numeric value 4).

If the object is a {{CSSFontFaceRule}}

Return FONT_FACE_RULE (numeric value 5).

If the object is a {{CSSPageRule}}

Return PAGE_RULE (numeric value 6).

If the object is a {{CSSMarginRule}}

Return MARGIN_RULE (numeric value 9).

If the object is a {{CSSNamespaceRule}}

Return NAMESPACE_RULE (numeric value 10).

Otherwise

Return a value defined on the CSSOM Constants wiki page.

[Exposed=Window]
interface CSSStyleRule : CSSRule {
  attribute CSSOMString selectorText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

1. Run the parse a group of selectors algorithm on the given value.
2. If the algorithm returns a non-null value replace the associated group of selectors with the returned value.
3. Otherwise, if the algorithm returns a null value, do nothing.

readonly flag

Unset.

declarations

The declared declarations in the rule, in specified order.

parent CSS rule

The context object.

owner node

Null.

[Exposed=Window]
interface CSSImportRule : CSSRule {
  readonly attribute USVString href;
  [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
  [SameObject] readonly attribute CSSStyleSheet styleSheet;
};

[Exposed=Window]
interface CSSGroupingRule : CSSRule {
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  void deleteRule(unsigned long index);
};

[Exposed=Window]
interface CSSPageRule : CSSGroupingRule {
           attribute CSSOMString selectorText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

1. Run the parse a list of CSS page selectors algorithm on the given value.
2. If the algorithm returns a non-null value replace the associated list of CSS page selectors with the returned value.
3. Otherwise, if the algorithm returns a null value, do nothing.

readonly flag

Unset.

declarations

The declared declarations in the rule, in specified order.

parent CSS rule

The context object.

owner node

Null.

[Exposed=Window]
interface CSSMarginRule : CSSRule {
  readonly attribute CSSOMString name;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

readonly flag

Unset.

declarations

The declared declarations in the rule, in specified order.

parent CSS rule

The context object.

owner node

Null.

[Exposed=Window]
interface CSSNamespaceRule : CSSRule {
  readonly attribute CSSOMString namespaceURI;
  readonly attribute CSSOMString prefix;
};

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.

readonly flag

Unset if the object can be manipulated. Set if it can not be manipulated. Unless otherwise stated it is unset.

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.

1. Let declarations be the return value of invoking parse a list of declarations with string.
2. Let parsed declarations be a new empty list.
3. For each item declaration in declarations, follow these substeps:
   1. Let parsed declaration be the result of parsing declaration according to the appropriate CSS specifications, dropping parts that are said to be ignored. If the whole declaration is dropped, let parsed declaration be null.
   2. If parsed declaration is not null, append it to parsed declarations.
4. Return parsed declarations.

1. Let s be the empty string.
2. Append property to s.
3. Append ": " (U+003A U+0020) to s.
4. Append value to s.
5. If the important flag is set, append " !important" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E U+0074) to s.
6. Append ";" (U+003B) to s.
7. Return s.

1. Let list be an empty array.
2. Let already serialized be an empty array.
3. Declaration loop: For each CSS declaration declaration in declaration block's declarations, follow these substeps:
   1. Let property be declaration's property name.
   2. If property is in already serialized, continue with the steps labeled declaration loop.
   3. If property maps to one or more shorthand properties, let shorthands be an array of those shorthand properties, in preferred order, and follow these substeps:
      1. Let longhands be an array consisting of all CSS declarations in declaration block's declarations that that are not in already serialized and have a property name that maps to one of the shorthand properties in shorthands.
      2. Shorthand loop: For each shorthand in shorthands, follow these substeps:
         1. If all properties that map to shorthand are not present in longhands, continue with the steps labeled shorthand loop.
         2. Let current longhands be an empty array.
         3. Append all CSS declarations in longhands have a property name that maps to shorthand to current longhands.
         4. If there is one or more CSS declarations in current longhands have their important flag set and one or more with it unset, continue with the steps labeled shorthand loop.
         5. Let value be the result of invoking serialize a CSS value of current longhands.
         6. If value is the empty string, continue with the steps labeled shorthand loop.
         7. 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.
         8. Append serialized declaration to list.
         9. Append the property names of all items of current longhands to already serialized.
         10. Remove the items present in current longhands from longhands.
   4. If property is in already serialized, continue with the steps labeled declaration loop.
   5. Let value be the result of invoking serialize a CSS value of declaration.
   6. Let serialized declaration be the result of invoking serialize a CSS declaration with property name property, value value, and the important flag set if declaration has its important flag set.
   7. Append serialized declaration to list.
   8. Append property to already serialized.
4. Return list joined with " " (U+0020).

1. If the readonly flag is set, then return.
2. If the updating flag is set, then return.
3. If localName is not "style", or namespace is not null, then return.
4. If value is null, empty the declarations.
5. Otherwise, let the declarations be the result of parse a CSS declaration block from a string value.

1. Let owner node be the owner node.
2. If owner node is null, or the readonly flag is set, then return.
3. Let value be the result of getting an attribute given null, "style", and owner node.
4. If value is not null, let the declarations be the result of parse a CSS declaration block from a string value.

1. Assert: declaration block's readonly flag is unset.
2. Let owner node be declaration block's owner node.
3. If owner node is null, then return.
4. Set declaration block's updating flag.
5. Set an attribute value for owner node using "style" and the result of serializing declaration block.
6. Unset declaration block's updating flag.

1. Order shorthands lexicographically.
2. Move all items in shorthands that begin with "-" (U+002D) last in the list, retaining their relative order.
3. Move all items in shorthands that begin with "-" (U+002D) but do not begin with "-webkit-" last in the list, retaining their relative order.
4. Order shorthands by the number of longhand properties that map to it, with the greatest number first.

[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] void setProperty(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value, [TreatNullAs=EmptyString] optional CSSOMString priority = "");
  [CEReactions] void setPropertyValue(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value);
  [CEReactions] void setPropertyPriority(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString priority);
  [CEReactions] CSSOMString removeProperty(CSSOMString property);
  readonly attribute CSSRule? parentRule;
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString cssFloat;
};

1. If the readonly flag is set, then throw a {{NoModificationAllowedError}} exception.
2. Empty the declarations.
3. 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.
4. Update style attribute for the CSS declaration block.

1. If property is not a custom property, follow these substeps:
   1. Let property be property converted to ASCII lowercase.
   2. If property is a shorthand property, then follow these substeps:
      1. Let list be a new empty array.
      2. For each longhand property longhand that property maps to, in canonical order, follow these substeps:
         1. 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.
         2. If declaration is null, then return the empty string.
         3. Append the declaration to list.
      3. If important flags of all declarations in list are same, then return the serialization of list.
      4. Return the empty string.
2. 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.
3. Return the empty string.

1. If property is not a custom property, follow these substeps:
   1. Let property be property converted to ASCII lowercase.
   2. If property is a shorthand property, follow these substeps:
      1. Let list be a new array.
      2. For each longhand property longhand that property maps to, append the result of invoking {{CSSStyleDeclaration/getPropertyPriority()}} with longhand as argument to list.
      3. If all items in list are the string "important", then return the string "important".
2. 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".
3. Return the empty string.

1. If the readonly flag is set, then throw a {{NoModificationAllowedError}} exception.
2. If property is not a custom property, follow these substeps:
   1. Let property be property converted to ASCII lowercase.
   2. If property is not a case-sensitive match for a supported CSS property, then return.
3. If value is the empty string, invoke {{CSSStyleDeclaration/removeProperty()}} with property as argument and return.
4. If priority is not the empty string and is not an ASCII case-insensitive match for the string "important", then return.
5. Let component value list be the result of parsing value for property property. Note: value can not include "!important".
6. If component value list is null, then return.
7. If property is a shorthand property, then for each longhand property longhand that property maps to, in canonical order, 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.
8. Otherwise, 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.
9. Update style attribute for the CSS declaration block.

1. If property is a case-sensitive match for a property name of a CSS declaration in declarations, let declaration be that CSS declaration.
2. Otherwise, append a new CSS declaration with the property name property to declarations and let declaration be that CSS declaration.
3. Set declaration's value to component value list.
4. If the important flag is set, set declaration's important flag. Otherwise, unset declaration's important flag.

1. If the readonly flag is set, then throw a {{NoModificationAllowedError}} exception.
2. If property is not a custom property, follow these substeps:
   1. Let property be property converted to ASCII lowercase.
   2. If property is not a case-sensitive match for a supported CSS property, then return.
3. If value is the empty string, invoke {{CSSStyleDeclaration/removeProperty()}} with property as argument and return.
4. Let component value list be the result of parsing value for property property. Note: value can not include "!important".
5. If component value list is null, then return.
6. If property is a shorthand property, then for each longhand property longhand that property maps to, in canonical order, set the CSS declaration value longhand to the appropriate value(s) from component value list, and with the list of declarations being the declarations.
7. Otherwise, set the CSS declaration value property to the value component value list, and with the list of declarations being the declarations.
8. Update style attribute for the CSS declaration block.

1. If property is a case-sensitive match for a property name of a CSS declaration in declarations, let declaration be that CSS declaration.
2. Otherwise, append a new CSS declaration with the property name property to declarations and let declaration be that CSS declaration.
3. Set declaration's value to component value list.

1. If the readonly flag is set, then throw a {{NoModificationAllowedError}} exception.
2. If property is not a custom property, follow these substeps:
   1. Let property be property converted to ASCII lowercase.
   2. If property is not a case-sensitive match for a supported CSS property, then return.
3. If priority is not the empty string and is not an ASCII case-insensitive match for the string "important", then return.
4. If property is a shorthand property, then for each longhand property longhand that property maps to, in canonical order, set the CSS declaration priority longhand with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations.
5. Otherwise, set the CSS declaration priority property with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations.
6. Update style attribute for the CSS declaration block.

1. If property is a case-sensitive match for a property name of a CSS declaration in declarations, let declaration be that CSS declaration.
2. Otherwise, return.
3. If the important flag is set, set declaration's important flag. Otherwise, unset declaration's important flag.

1. If the readonly flag is set, then throw a {{NoModificationAllowedError}} exception.
2. If property is not a custom property, let property be property converted to ASCII lowercase.
3. Let value be the return value of invoking {{CSSStyleDeclaration/getPropertyValue()}} with property as argument.
4. Let removed be false.
5. If property is a shorthand property, for each longhand property longhand that property maps to:
   1. If longhand is not a property name of a CSS declaration in the declarations, continue.
   2. Remove that CSS declaration and let removed be true.
6. 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.
7. If removed is true, Update style attribute for the CSS declaration block.
8. Return value.

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString _camel_cased_attribute;
};

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString _webkit_cased_attribute;
};

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString _dashed_attribute;
};

element.style['font-size'];

1. Let output be the empty string.
2. Let uppercase next be unset.
3. If the lowercase first flag is set, remove the first character from property.
4. For each character c in property:
   1. If c is "-" (U+002D), let uppercase next be set.
   2. Otherwise, if uppercase next is set, let uppercase next be unset and append c converted to ASCII uppercase to output.
   3. Otherwise, append c to output.
5. Return output.

1. Let output be the empty string.
2. If the dash prefix flag is set, append "-" (U+002D) to output.
3. For each character c in attribute:
   1. If c is in the range U+0041 to U+005A (ASCII uppercase), append "-" (U+002D) followed by c converted to ASCII lowercase to output.
   2. Otherwise, append c to output.
4. Return output.

1. Let list be the value returned by invoking parse a list of component values from value.
2. Match list against the grammar for the property property in the CSS specification.
3. If the above step failed, return null.
4. Return list.

1. If this algorithm is invoked with a list list, follow these substeps:
   1. Let shorthand be the shorthand property that exactly maps to all the longhand properties in list. If there are multiple such shorthand properties, use the first in preferred order.
   2. If shorthand cannot represent the values of list in its grammar, then return the empty string.
   3. Let trimmed list be a new empty array.
   4. For each CSS declaration declaration in list, if declaration's value is not the initial value, or if declaration is a required component of the shorthand property, append declaration to trimmed list.
   5. If trimmed list is empty, append the value of the first item in list to trimmed list.
   6. Let values be a new empty array.
   7. For each CSS declaration declaration in trimmed list, invoke serialize a CSS value of declaration, and append the result to values.
   8. Return the result of joining values as appropriate according to the grammar of shorthand.
2. Let values be a new empty array.
3. Append the result of invoking serialize a CSS component value of declaration's value to values.
4. If the grammar of the property name of declaration is defined to be whitespace-separated, return the result of invoking serialize a whitespace-separated list of values.
5. If the grammar of the property name of declaration is defined to be comma-separated, return the result of invoking serialize a comma-separated list of values.

keyword

The keyword converted to ASCII lowercase.

<angle>

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

<color>

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

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

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

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

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

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

In the above rules, the string ", " denotes a COMMA (U+002C) followed by a single SPACE (U+0020). If <color> is a component of a specified value, then return the color as follows:

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

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

<alphavalue>

If the value is internally represented as an integer between 0 and 255 inclusive (i.e. 8-bit unsigned integer), follow these steps:

1. Let alpha be the given integer.
2. If there exists an integer between 0 and 100 inclusive that, when multiplied with 2.55 and rounded to the closest integer (rounding up if two values are equally close), equals alpha, let rounded be that integer divided by 100.
3. Otherwise, let rounded be alpha divided by 0.255 and rounded to the closest integer (rounding up if two values are equally close), divided by 1000.
4. Return the result of serializing rounded as a <number>.

Otherwise, return the result of serializing the given value as a <number>.

<counter>

The return value of the following algorithm:

1. Let s be the empty string.
2. If <counter> has three CSS component values append the string "counters(" to s.
3. If <counter> has two CSS component values append the string "counter(" to s.
4. Let list be a list of CSS component values belonging to <counter>, omitting the last CSS component value if it is "decimal".
5. Let each item in list be the result of invoking serialize a CSS component value on that item.
6. Append the result of invoking serialize a comma-separated list on list to s.
7. Append ")" (U+0029) to s.
8. Return s.

<frequency>

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

<identifier>

The identifier serialized as an identifier.

<integer>

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

<length>

A length of zero is represented by the literal string "0px". Absolute lengths: the number of millimeters serialized as per <number> followed by the literal string "mm". Issue: Rumor has it absolute lengths will become relative lengths. Centimeters would be compatible with <resolution>... Relative lengths: the <number> component serialized as per <number> followed by the unit in its canonical form as defined in its respective specification.

<number>

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.

<percentage>

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

<resolution>

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

<shape>

The return value of the following algorithm:

1. Let s be the string "rect(".
2. Let list be a list of the CSS component values belonging to <shape>.
3. Let each item in list be the result of invoking serialize a CSS component value of that item.
4. Append the result of invoking serialize a comma-separated list on list to s.
5. Append ")" (U+0029) to s.
6. Return s.

<string>

<family-name>

<specific-voice>

The string serialized as a string.

<time>

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

<uri>

The absolute-URL string serialized as URL.

[Exposed=Window,
 NoInterfaceObject]
interface ElementCSSInlineStyle {
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

HTMLElement implements ElementCSSInlineStyle;

SVGElement implements ElementCSSInlineStyle;

partial interface Window {
  [NewObject] CSSStyleDeclaration getComputedStyle(Element elt, optional CSSOMString? pseudoElt);
};

1. Let doc be the {{Document}} associated with the Window object on which the method was invoked.
2. Let obj be elt.
3. If pseudoElt is as an ASCII case-insensitive match for either ":before" or "::before" let obj be the ''::before'' pseudo-element of elt.
4. If pseudoElt is as an ASCII case-insensitive match for either ":after" or "::after" let obj be the ''::after'' pseudo-element of elt.
5. Return a live CSS declaration block with the following properties:

   readonly flag

   Set.

   declarations

   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. Note: This means that even if obj is in a different document (e.g. one fetched via XMLHttpRequest) it will still use the style rules associated with the document that is associated with the global object on which {{Window/getComputedStyle()}} was invoked to compute the CSS declaration block.

   parent CSS rule

   Null.

   owner node

   obj.

The {{Window/getComputedStyle()}} method exposes information from CSS style sheets with the origin-clean flag unset. Utility APIs {#utility-apis} ============================ The CSS.escape() Method {#the-css.escape()-method} ------------------------------------------------------ The CSS interface holds useful CSS-related functions that do not belong elsewhere.

[Exposed=Window]
interface CSS {
  static CSSOMString escape(CSSOMString ident);
};

var element = document.querySelector('#' + CSS.escape(id) + ' > img');

var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');

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

'line-height'

'outline-color'

A resolved value special case property like 'color' defined in another specification

The resolved value is the used value.

'block-size'

'height'

'inline-size'

'margin-block-end'

'margin-block-start'

'margin-bottom'

'margin-inline-end'

'margin-inline-start'

'margin-left'

'margin-right'

'margin-top'

'padding-block-end'

'padding-block-start'

'padding-bottom'

'padding-inline-end'

'padding-inline-start'

'padding-left'

'padding-right'

'padding-top'

'width'

A resolved value special case property like 'height' defined in another specification

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

'bottom'

'left'

'inset-block-end'

'inset-block-start'

'inset-inline-end'

'inset-inline-start'

'right'

'top'

A resolved value special case property like 'top' defined in another specification

If the property applies to a positioned element and the resolved value of the 'display' property is not ''display/none'' or ''display/contents'', and the property is not over-constrained, then the resolved value is the used value. Otherwise the resolved value is the computed value.

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

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.