CSS Typed OM Playground - Online attributeStyleMap Explorer

CSS Typed OM (part of the CSS Houdini APIs) provides a typed, object-based interface for manipulating CSS values in JavaScript. Instead of working with strings like element.style.width = '200px', you use typed objects such as CSSUnitValue, CSSMathValue, and CSSKeywordValue. The attributeStyleMap is a property on every DOM element that returns a StylePropertyMap — a Map-like object for getting and setting CSS properties using these typed values. It provides better performance, type safety, and eliminates string parsing.

Feature	element.style	attributeStyleMap
Value format	Strings only	Typed objects (CSSUnitValue, etc.)
Type safety	None (string parsing)	Full type information preserved
Math operations	Requires calc() strings	CSSMathValue objects, programmatic
Iteration	Manual parsing	Map-like: for...of, entries(), keys()
Performance	String concat + reparse	Direct typed manipulation, faster
Browser support	Universal	Chrome 66+, Edge 79+, Opera 53+

Both ultimately affect the same inline styles — they are synchronized. Setting via one method is reflected in the other.

• CSSUnitValue — Represents a numeric value with a unit. E.g., new CSSUnitValue(200, 'px') or shorthand CSS.px(200). Properties: .value (number) and .unit (string).
• CSSKeywordValue — Represents a CSS keyword like block, none, auto, or color names like red. Created via new CSSKeywordValue('block').
• CSSMathValue — Abstract base for mathematical expressions. Subclasses include CSSMathSum, CSSMathProduct, CSSMathMin, CSSMathMax, and CSSMathClamp. These enable programmatic calc()-like operations without string building.
• CSSTransformValue — Represents a CSS transform as an array of transform components like CSSTranslate, CSSRotate, CSSScale.

As of 2024, CSS Typed OM is supported in Chromium-based browsers: Google Chrome 66+, Microsoft Edge 79+, Opera 53+, Samsung Internet 9.2+, and Android WebView 66+. Firefox and Safari have not yet shipped full support (tracking in Firefox Bug 1709411 and WebKit Bug 205737). You can feature-detect using if (typeof CSSUnitValue === 'function') or if (element.attributeStyleMap) and gracefully fall back to element.style for unsupported browsers.

Yes! CSS custom properties (variables like --my-color) work seamlessly with attributeStyleMap. You can set them using element.attributeStyleMap.set('--my-color', new CSSKeywordValue('blue')) or with parsed values. This is particularly powerful because it allows type-safe manipulation of custom properties that might be consumed by other parts of your stylesheet via var(). Try the Custom Props preset in this playground to see it in action.

Traditional CSS manipulation via element.style requires converting between strings and internal typed representations repeatedly — every time you read a value, the browser serializes it to a string; every time you write, it parses the string back. With Typed OM, values stay in their typed representation, eliminating serialization and parsing overhead. For animation-heavy applications or frequent style updates (e.g., during scroll, pointer events, or Web Animations API usage), this can significantly reduce jank and improve frame rates. Google's benchmarks show up to ~30% faster style operations in some scenarios.

Since attributeStyleMap returns a StylePropertyMap (which behaves like a Map), you can iterate using standard patterns:

// Using for...of
for (const [prop, value] of element.attributeStyleMap) {
  console.log(prop, value.toString(), value.constructor.name);
}
// Using entries()
for (const [prop, value] of element.attributeStyleMap.entries()) {
  console.log(`${prop}: ${value}`);
}
// Using forEach
element.attributeStyleMap.forEach((value, prop) => {
  console.log(prop, value);
});

You can also use .keys(), .values(), .has(prop), and .size.

Shorthand CSS properties like border, margin, padding, background, and font represent multiple longhand properties simultaneously. The Typed OM generally requires you to use longhand properties (e.g., margin-top, border-left-width) when setting values via attributeStyleMap.set(). Attempting to set a shorthand may throw a TypeError. This is by design — it ensures type precision. The playground above primarily uses longhand properties for this reason. You can still get computed values of shorthands via element.computedStyleMap().get('margin') in some cases, but the returned value structure varies.