mdn · hamishwillee · Aug 3, 2026 · Aug 4, 2026 · Aug 4, 2026
@@ -7,7 +7,7 @@ browser-compat: api.CaretPosition
 
 {{APIRef("CSSOM view API")}}
 
-The `CaretPosition` interface represents the caret position, an indicator for the text insertion point.
+The `CaretPosition` interface of the [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API) represents the caret position, an indicator for the text insertion point.
 You can get a `CaretPosition` using the {{domxref("Document.caretPositionFromPoint()")}} method.
 
 ## Instance properties

@@ -7,7 +7,9 @@ browser-compat: api.CSS
 
 {{APIRef("CSSOM")}}
 
-The **`CSS`** interface holds useful CSS-related methods. No objects with this interface are implemented: it contains only static methods and is therefore a utilitarian interface.
+The **`CSS`** interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) groups useful CSS-related static methods.
+
+No objects with this interface are implemented: it contains only static methods and is therefore a utilitarian interface.
 
 ## Static properties
 

@@ -10,14 +10,24 @@ spec-urls:
 
 {{DefaultAPISidebar("CSSOM")}}
 
-The **CSS Object Model** is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.
+The **CSS Object Model** is a set of APIs and interfaces allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.
 
-The values of CSS are represented untyped, that is using {{JSxRef("String")}} objects.
+The values of CSS are represented untyped, that is using {{JSxRef("String")}} objects (except when using the [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Typed_OM_API)).
 
-## Reference
+## Guides
+
+- [CSS Declaration](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration)
+- [CSS Declaration Block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block)
+- [Determining the dimensions of elements](/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
+- [Managing screen orientation](/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
+- [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information)
+- [CSS value serialization](/en-US/docs/Web/API/CSS_Object_Model/CSS_value_serialization)
+
+## Interfaces
+
+These interfaces are defined in the CSSOM specification:
 
 - {{DOMxRef("AnimationEvent")}}
-- {{DOMxRef("CaretPosition")}}
 - {{DOMxRef("CSS")}}
 - {{DOMxRef("CSSConditionRule")}}
 - {{DOMxRef("CSSCounterStyleRule")}}
@@ -46,52 +56,13 @@ The values of CSS are represented untyped, that is using {{JSxRef("String")}} ob
 - {{DOMxRef("CSSStyleRule")}}
 - {{DOMxRef("CSSSupportsRule")}}
 - {{DOMXRef("CSSNestedDeclarations")}}
-- {{DOMxRef("FontFace")}}
-- {{DOMxRef("FontFaceSet")}}
-- {{DOMxRef("FontFaceSetLoadEvent")}}
 - {{DOMxRef("MediaList")}}
-- {{DOMxRef("MediaQueryList")}}
-- {{DOMxRef("MediaQueryListEvent")}}
-- {{DOMxRef("Screen")}}
 - {{DOMxRef("StyleSheet")}}
 - {{DOMxRef("StyleSheetList")}}
 - {{DOMxRef("TransitionEvent")}}
-- {{DOMxRef("VisualViewport")}}
 
 Several other interfaces are also extended by the CSSOM-related specifications: {{DOMxRef("Document")}}, {{DOMxRef("Window")}}, {{DOMxRef("Element")}}, {{DOMxRef("HTMLElement")}}, {{DOMxRef("HTMLImageElement")}}, {{DOMxRef("Range")}}, {{DOMxRef("MouseEvent")}}, and {{DOMxRef("SVGElement")}}.
 
-### CSS Typed Object Model
-
-- {{DOMxRef("CSSImageValue")}}
-- {{DOMxRef("CSSKeywordValue")}}
-- {{DOMxRef("CSSMathClamp")}}
-- {{DOMxRef("CSSMathInvert")}}
-- {{DOMxRef("CSSMathMax")}}
-- {{DOMxRef("CSSMathMin")}}
-- {{DOMxRef("CSSMathNegate")}}
-- {{DOMxRef("CSSMathProduct")}}
-- {{DOMxRef("CSSMathSum")}}
-- {{DOMxRef("CSSMathValue")}}
-- {{DOMxRef("CSSMatrixComponent")}}
-- {{DOMxRef("CSSNumericArray")}}
-- {{DOMxRef("CSSNumericValue")}}
-- {{DOMxRef("CSSPerspective")}}
-- {{DOMxRef("CSSPositionValue")}}
-- {{DOMxRef("CSSRotate")}}
-- {{DOMxRef("CSSScale")}}
-- {{DOMxRef("CSSSkew")}}
-- {{DOMxRef("CSSSkewX")}}
-- {{DOMxRef("CSSSkewY")}}
-- {{DOMxRef("CSSStyleValue")}}
-- {{DOMxRef("CSSTransformComponent")}}
-- {{DOMxRef("CSSTransformValue")}}
-- {{DOMxRef("CSSTranslate")}}
-- {{DOMxRef("CSSUnitValue")}}
-- {{DOMxRef("CSSUnparsedValue")}}
-- {{DOMxRef("CSSVariableReferenceValue")}}
-- {{DOMxRef("StylePropertyMap")}}
-- {{DOMxRef("StylePropertyMapReadOnly")}}
-
 ### Obsolete CSSOM interfaces {{deprecated_inline}}
 
 {{deprecated_header}}
@@ -100,10 +71,16 @@ Several other interfaces are also extended by the CSSOM-related specifications:
 - {{DOMxRef("CSSValue")}} {{deprecated_inline}}
 - {{DOMxRef("CSSValueList")}} {{deprecated_inline}}
 
-## Tutorials
+### CSSOM APIs
 
-- [Determining the dimensions of elements](/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
-- [Managing screen orientation](/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
+- [CSS Font Loading API](/en-US/docs/Web/API/CSS_Font_Loading_API)
+  - : Provides mechanisms for dynamically loading font resources.
+
+- [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Typed_OM_API)
+  - : simplifies CSS property manipulation by exposing CSS values as typed JavaScript objects rather than strings.
+
+- [CSSOM view API](/en-US/docs/Web/API/CSSOM_view_API)
+  - : Enables manipulation of the visual view of a document, including getting the position of element layout boxes, obtaining the width or height of the viewport through script, and also scrolling an element.
 
 ## Specifications
 

@@ -240,7 +240,7 @@ You can use a `CSSUnitValue` or `CSSKeywordValue` to create other objects.
 
 ## CSSStyleValue
 
-The `CSSStyleValue` interface of the [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Object_Model#css_typed_object_model) is the base class of all CSS values accessible through the Typed OM API, including {{domxref('CSSImageValue')}}, {{domxref('CSSKeywordValue')}}, {{domxref('CSSNumericValue')}}, {{domxref('CSSPositionValue')}}, {{domxref('CSSTransformValue')}}, and {{domxref('CSSUnparsedValue')}}.
+The `CSSStyleValue` interface of the [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Typed_OM_API) is the base class of all CSS values accessible through the Typed OM API, including {{domxref('CSSImageValue')}}, {{domxref('CSSKeywordValue')}}, {{domxref('CSSNumericValue')}}, {{domxref('CSSPositionValue')}}, {{domxref('CSSTransformValue')}}, and {{domxref('CSSUnparsedValue')}}.
 
 It has two methods:
 

@@ -13,96 +13,79 @@ browser-compat:
 
 The CSS Typed Object Model API simplifies CSS property manipulation by exposing CSS values as typed JavaScript objects rather than strings. This not only simplifies CSS manipulation, but also lessens the negative impact on performance as compared to {{domxref('HTMLElement.style')}}.
 
+## Concepts and usage
+
 Generally, CSS values can be read and written in JavaScript as strings, which can be slow and cumbersome. CSS Typed Object Model API provides interfaces to interact with underlying values, by representing them with specialized JS objects that can be manipulated and understood more easily and more reliably than string parsing and concatenation. This is easier for authors (for example, numeric values are reflected with actual JS numbers, and have unit-aware mathematical operations defined for them). It is also generally faster, as values can be directly manipulated and then cheaply translated back into underlying values without having to both build and parse strings of CSS.
 
 CSS Typed OM both allows for the performant manipulation of values assigned to CSS properties while enabling maintainable code that is both more understandable and easier to write.
 
-## Interfaces
-
-### `CSSStyleValue`
-
-The {{domxref('CSSStyleValue')}} interface of the CSS Typed Object Model API is the base class of all CSS values accessible through the Typed OM API. An instance of this class may be used anywhere a string is expected.
-
-- {{domxref('CSSStyleValue/parse_static', 'CSSStyleValue.parse()')}}
-  - : Method that allows `CSSNumericValue` to be constructed from a CSS string. It sets a specific CSS property to the specified values and returns the first value as a `CSSStyleValue` object.
-- {{domxref('CSSStyleValue.parseAll_static', 'CSSStyleValue.parseAll()')}}
-  - : Method that sets all occurrences of a specific CSS property to the specified value and returns an array of `CSSStyleValue` objects, each containing one of the supplied values.
-
-### `StylePropertyMap`
-
-The {{domxref('StylePropertyMap')}} interface of the CSS Typed Object Model API provides a representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`.
-
-- {{domxref('StylePropertyMap.set()')}}
-  - : Method that changes the CSS declaration with the given property to the value given.
-- {{domxref('StylePropertyMap.append()')}}
-  - : Method that adds a new CSS declaration to the `StylePropertyMap` with the given property and value.
-- {{domxref('StylePropertyMap.delete()')}}
-  - : Method that removes the CSS declaration with the given property from the `StylePropertyMap`.
-- {{domxref('StylePropertyMap.clear()')}}
-  - : Method that removes all declarations in the `StylePropertyMap`.
-
-### `CSSUnparsedValue`
+## Guides
 
-The {{domxref('CSSUnparsedValue')}} interface of the CSS Typed Object Model API represents property values that reference custom properties. It consists of a list of string fragments and variable references.
-
-- {{domxref("CSSUnparsedValue.CSSUnparsedValue", "CSSUnparsedValue()")}} constructor
-  - : Creates a new `CSSUnparsedValue` object which represents property values that reference custom properties.
-- {{domxref('CSSUnparsedValue.entries()')}}
-  - : Method returning an array of a given object's own enumerable property `[key, value]` pairs in the same order as that provided by a `for...in` loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
-- {{domxref('CSSUnparsedValue.forEach()')}}
-  - : Method executing a provided function once for each element of the `CSSUnparsedValue`.
-- {{domxref('CSSUnparsedValue.keys()')}}
-  - : Method returning a new _array iterator_ object that contains the keys for each index in the array.
-
-### `CSSKeywordValue` Serialization
-
-The {{domxref('CSSKeywordValue')}} interface of the CSS Typed Object Model API creates an object to represent CSS keywords and other identifiers.
-
-- {{domxref("CSSKeywordValue.CSSKeywordValue", "CSSKeywordValue()")}} constructor
-  - : Constructor creates a new {{domxref("CSSKeywordValue.CSSKeywordValue", "CSSKeywordValue()")}} object which represents CSS keywords and other identifiers.
-- {{domxref('CSSKeywordValue.value()')}}
-  - : Property of the `CSSKeywordValue` interface returning or setting the value of the `CSSKeywordValue`.
-
-## CSSStyleValue Interfaces
+- [Using the CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API/Guide)
+  - : An introduction to the main features of the typed object model.
 
-{{domxref('CSSStyleValue')}} is the base class through which all CSS values are expressed. Subclasses include:
+## Interfaces
 
 - {{domxref('CSSImageValue')}}
-  - : An interface representing values for properties that take an image, for example {{cssxref("background-image")}}, {{cssxref("list-style-image")}}, or {{cssxref("border-image-source")}}.
+  - : Represents values for properties that take an image, such as {{cssxref("background-image")}}, {{cssxref("list-style-image")}}, or {{cssxref("border-image-source")}}.
 - {{domxref('CSSKeywordValue')}}
-  - : An interface which creates an object to represent CSS keywords and other identifiers. When used where a string is expected, it will return the value of `CSSKeyword.value`.
+  - : Represent the value of a CSS keyword or other identifier, such as `initial`, or `auto`.
+    When used where a string is expected, it will return the value of `CSSKeyword.value`.
+- {{domxref('CSSMathClamp')}}
+  - : Represents the CSS {{cssxref("clamp","clamp()")}} function.
+- {{domxref('CSSMathInvert')}}
+  - : represents a CSS {{cssxref("calc","calc()")}} value used as `calc(1 / <value>)`. This type is used internally by {{domxref('CSSNumericValue.div','div()')}}, to create an appropriate {{domxref('CSSMathProduct')}}.
+- {{domxref('CSSMathMax')}}
+  - : represents the CSS {{cssxref("max","max()")}} function.
+- {{domxref('CSSMathMin')}}
+  - : represents the CSS {{cssxref("min","min()")}} function.
+- {{domxref('CSSMathNegate')}}
+  - : negates the value passed into it.
+- {{domxref('CSSMathProduct')}}
+  - : represents the result obtained by calling {{domxref('CSSNumericValue.mul','mul()')}} or {{domxref('CSSNumericValue.div','div()')}} on {{domxref('CSSNumericValue')}}.
+- {{domxref('CSSMathSum')}}
+  - : represents the result obtained by calling {{domxref('CSSNumericValue.add','add()')}}, {{domxref('CSSNumericValue.sub','sub()')}}, or {{domxref('CSSNumericValue.toSum','toSum()')}} on {{domxref('CSSNumericValue')}}.
 - {{domxref('CSSMathValue')}}
-  - : A tree of subclasses representing numeric values that are more complicated than a single value and unit, including:
-    - {{domxref('CSSMathMax')}} - represents the CSS {{cssxref("max","max()")}} function.
-    - {{domxref('CSSMathMin')}} - represents the CSS {{cssxref("min","min()")}} function.
-    - {{domxref('CSSMathClamp')}} - represents the CSS {{cssxref("clamp","clamp()")}} function.
-    - {{domxref('CSSMathNegate')}} - negates the value passed into it.
-    - {{domxref('CSSMathInvert')}} - represents a CSS {{cssxref("calc","calc()")}} value used as `calc(1 / <value>)`. This type is used internally by {{domxref('CSSNumericValue.div','div()')}}, to create an appropriate {{domxref('CSSMathProduct')}}.
-    - {{domxref('CSSMathProduct')}} - represents the result obtained by calling {{domxref('CSSNumericValue.mul','mul()')}} or {{domxref('CSSNumericValue.div','div()')}} on {{domxref('CSSNumericValue')}}.
-    - {{domxref('CSSMathSum')}} - represents the result obtained by calling {{domxref('CSSNumericValue.add','add()')}}, {{domxref('CSSNumericValue.sub','sub()')}}, or {{domxref('CSSNumericValue.toSum','toSum()')}} on {{domxref('CSSNumericValue')}}.
-
+  - : The base class for numeric values that are more complicated than a single value and unit, such as `CSSMathMax` and `CSSMathSum`
+- {{domxref('CSSMatrixComponent')}}
+  - : TBD
+- {{domxref('CSSNumericArray')}}
+  - : TBD
 - {{domxref('CSSNumericValue')}}
-  - : An interface representing operations that all numeric values can perform, including:
-    - {{domxref('CSSNumericValue.add')}} - Adds supplied numbers to the `CSSNumericValue`.
-    - {{domxref('CSSNumericValue.sub')}} - Subtracts supplied numbers to the `CSSNumericValue`.
-    - {{domxref('CSSNumericValue.mul')}} - Multiplies supplied numbers to the `CSSNumericValue`.
-    - {{domxref('CSSNumericValue.div')}} - Divides the `CSSNumericValue` by the supplied value, throwing an error if `0`.
-    - {{domxref('CSSNumericValue.min')}} - Returns the minimum value passed
-    - {{domxref('CSSNumericValue.max')}} - Returns the maximum value passed
-    - {{domxref('CSSNumericValue.equals')}} - Returns true if all the values are the exact same type and value, in the same order. Otherwise, false
-    - {{domxref('CSSNumericValue.to')}} - Converts `value` into another one with the specified _unit._
-    - {{domxref('CSSNumericValue.toSum')}}
-    - {{domxref('CSSNumericValue.type')}}
-    - {{domxref('CSSNumericValue/parse_static', 'CSSNumericValue.parse')}} - Returns a number parsed from a CSS string
-
+  - : An interface representing operations that all numeric values can perform, such as addition, multiplication, and so on.
+- {{domxref('CSSPerspective')}}
+  - : TBD
 - {{domxref('CSSPositionValue')}}
   - : Represents values for properties that take a position, for example object-position.
+- {{domxref('CSSRotate')}}
+  - : TBD
+- {{domxref('CSSScale')}}
+  - : TBD
+- {{domxref('CSSSkew')}}
+  - : TBD
+- {{domxref('CSSSkewX')}}
+  - : TBD
+- {{domxref('CSSSkewY')}}
+  - : TBD
+- {{domxref('CSSStyleValue')}}
+  - : Base class of all CSS values accessible through the Typed OM API.
+    An instance of this class may be used anywhere a string is expected.
+- {{domxref('CSSTransformComponent')}}
+  - : TBD
 - {{domxref('CSSTransformValue')}}
   - : An interface representing a list of {{cssxref("transform")}} list values. They "contain" one or more {{domxref('CSSTransformComponent')}}s, which represent individual `transform` function values.
+- {{domxref('CSSTranslate')}}
+  - : TBD
 - {{domxref('CSSUnitValue')}}
   - : An interface representing numeric values that can be represented as a single unit, or a named number and percentage.
 - {{domxref('CSSUnparsedValue')}}
-  - : Represents property values that reference [custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*). It consists of a list of string fragments and variable references.
+  - : Represents property values that reference [custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*). It consists of a list of string fragments and variable references. Represents property values that reference custom properties. It consists of a list of string fragments and variable references.
+- {{domxref('CSSVariableReferenceValue')}}
+  - : TBD
+- {{domxref('StylePropertyMap')}}
+  - : The {{domxref('StylePropertyMap')}} interface of the CSS Typed Object Model API provides a representation of a CSS declaration block that is an alternative to `CSSStyleDeclaration`.
+- {{domxref('StylePropertyMapReadOnly')}}
+  - : TBD
 
 ## Specifications
 

@@ -7,7 +7,7 @@ browser-compat: api.CSSConditionRule
 
 {{ APIRef("CSSOM") }}
 
-An object implementing the **`CSSConditionRule`** interface represents a single condition CSS [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules), which consists of a condition and a statement block.
+The **`CSSConditionRule`** interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) represents a single condition CSS [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules), which consists of a condition and a statement block.
 
 Three objects derive from `CSSConditionRule`: {{domxref("CSSMediaRule")}}, {{domxref("CSSContainerRule")}} and {{domxref("CSSSupportsRule")}}.
 

@@ -7,7 +7,7 @@ browser-compat: api.CSSCounterStyleRule
 
 {{APIRef("CSSOM")}}
 
-The **`CSSCounterStyleRule`** interface represents an {{CSSxRef("@counter-style")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
+The **`CSSCounterStyleRule`** interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) represents an {{CSSxRef("@counter-style")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
 
 {{InheritanceDiagram}}
 

@@ -7,7 +7,7 @@ browser-compat: api.CSSFontFaceDescriptors
 
 {{APIRef("CSSOM")}}
 
-The **`CSSFontFaceDescriptors`** interface represents a CSS declaration block for an {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
+The **`CSSFontFaceDescriptors`** interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) represents a CSS declaration block for an {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
 
 Each descriptor in the body of the corresponding {{cssxref("@font-face")}} at-rule can be accessed using either its kebab-case property name in [bracket notation](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics#bracket_notation) or the camel-case version of the property name in [dot notation](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics#dot_notation).
 For example, you can access the `font-family` CSS descriptor as `style["font-family"]` or `style.fontFamily`, where `style` is a `CSSFontFaceDescriptors` instance.

@@ -7,7 +7,7 @@ browser-compat: api.CSSFontFaceRule
 
 {{APIRef("CSSOM")}}
 
-The **`CSSFontFaceRule`** interface represents an {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
+The **`CSSFontFaceRule`** interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) represents an {{cssxref("@font-face")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
 
 {{InheritanceDiagram}}