CSS Typed Object Model API

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.

Guides

Using the CSS Typed Object Model

An introduction to the main features of the typed object model.

Interfaces

CSSImageValue

Represents values for properties that take an image, such as background-image, list-style-image, or border-image-source.

CSSKeywordValue

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.

CSSMathClamp

Represents the CSS clamp() function.

CSSMathInvert

represents a CSS calc() value used as calc(1 / <value>). This type is used internally by div(), to create an appropriate CSSMathProduct.

CSSMathMax

represents the CSS max() function.

CSSMathMin

represents the CSS min() function.

CSSMathNegate

negates the value passed into it.

CSSMathProduct

represents the result obtained by calling mul() or div() on CSSNumericValue.

CSSMathSum

represents the result obtained by calling add(), sub(), or toSum() on CSSNumericValue.

CSSMathValue

The base class for numeric values that are more complicated than a single value and unit, such as CSSMathMax and CSSMathSum

CSSMatrixComponent

TBD

CSSNumericArray

TBD

CSSNumericValue

An interface representing operations that all numeric values can perform, such as addition, multiplication, and so on.

CSSPerspective

TBD

CSSPositionValue

Represents values for properties that take a position, for example object-position.

CSSRotate

TBD

CSSScale

TBD

CSSSkew

TBD

CSSSkewX

TBD

CSSSkewY

TBD

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.

CSSTransformComponent

TBD

CSSTransformValue

An interface representing a list of transform list values. They "contain" one or more CSSTransformComponents, which represent individual transform function values.

CSSTranslate

TBD

CSSUnitValue

An interface representing numeric values that can be represented as a single unit, or a named number and percentage.

CSSUnparsedValue

Represents property values that reference custom 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.

CSSVariableReferenceValue

TBD

StylePropertyMap

The StylePropertyMap interface of the CSS Typed Object Model API provides a representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.

StylePropertyMapReadOnly

TBD

Specifications

Browser compatibility

api.CSSStyleValue

api.StylePropertyMap

api.CSSUnparsedValue

api.CSSKeywordValue

See also

• CSS Painting API
• Using the CSS Typed Object Model
• CSS Houdini