0Pricing
CSS Academy · Lesson

The CSS Typed Object Model (OM)

Work with CSS values as typed JavaScript objects instead of strings using the CSS Typed OM API.

The CSS Typed Object Model (OM) is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is the CSS Typed OM?

The CSS Typed Object Model (Typed OM) is part of the CSS Houdini project. It exposes CSS values as typed JavaScript objects rather than plain strings, enabling faster manipulation, richer arithmetic, and type safety.

Old vs New

Traditional CSSOM returns strings; Typed OM returns objects with type information:

// Old CSSOM (string)
const old = element.style.opacity; // '0.5'

// CSS Typed OM (typed object)
const opacity = element.computedStyleMap().get('opacity');
// CSSUnitValue { value: 0.5, unit: 'number' }

computedStyleMap()

Access computed typed values for any element:

const styles = element.computedStyleMap();
const width = styles.get('width');
console.log(width.value); // 400
console.log(width.unit);  // 'px'

attributeStyleMap for Inline Styles

Set and get typed inline style values via element.attributeStyleMap:

element.attributeStyleMap.set('opacity', CSS.number(0.5));
element.attributeStyleMap.set('margin-top', CSS.px(16));

const opacity = element.attributeStyleMap.get('opacity');
console.log(opacity.value); // 0.5

CSS Numeric Factory Methods

The CSS namespace provides factory methods for creating typed values:

CSS.px(100)        // CSSUnitValue(100, 'px')
CSS.percent(50)    // CSSUnitValue(50, 'percent')
CSS.em(1.5)        // CSSUnitValue(1.5, 'em')
CSS.number(0.5)    // CSSUnitValue(0.5, 'number')
CSS.deg(180)       // CSSUnitValue(180, 'deg')

Arithmetic on Typed Values

CSSMathValue enables CSS math operations in JavaScript without string concatenation:

const width = CSS.px(100).add(CSS.percent(10));
// Equivalent to calc(100px + 10%)

const margin = CSS.px(16).mul(2);
// 32px

Performance Benefits

Typed OM is significantly faster than string-based CSSOM for frequent manipulations (e.g., animation frames). Values do not need to be parsed from strings on every access — they are already structured objects.

CSSStyleValue Types

Typed OM value types include:

  • CSSUnitValue: number + unit (100px)
  • CSSKeywordValue: keyword (auto, none)
  • CSSImageValue: image (url())
  • CSSMathValue: calc expressions
  • CSSColorValue: color values (experimental)

Typed OM in Animation

In the Web Animations API, use typed values for more precise animation control:

element.animate(
  [{ opacity: CSS.number(0) }, { opacity: CSS.number(1) }],
  { duration: 300, fill: 'forwards' }
);

Browser Support

CSS Typed OM (Level 1) is supported in Chrome 66+, Edge 79+. Firefox and Safari support is partial or behind flags. Check caniuse.com before using in production. The API surface continues to grow.

When to Use Typed OM

Use Typed OM when:

  • Building CSS Paint or Layout Worklets (required)
  • Animating many elements per frame in JavaScript
  • Building CSS tooling or preprocessors
  • You need type-checked CSS value manipulation

Quick Check

What does element.computedStyleMap().get("width") return compared to getComputedStyle(element).width?

Recap

CSS Typed OM replaces string-based CSSOM with typed JavaScript objects. Use computedStyleMap() for read access and attributeStyleMap for inline style writes. CSS factory methods (CSS.px(), CSS.percent()) create typed values. The API is faster than string-based manipulation and required for Paint and Layout Worklets.

Frequently asked questions

Is the “The CSS Typed Object Model (OM)” lesson free?

Yes — the full text of “The CSS Typed Object Model (OM)” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “The CSS Typed Object Model (OM)”?

Work with CSS values as typed JavaScript objects instead of strings using the CSS Typed OM API. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The CSS Typed Object Model (OM)” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. The CSS Typed Object Model (OM)
  2. CSS Properties and Values API (@property)
  3. CSS Paint API: Worklets
  4. CSS Layout API and Scope
← Back to CSS Academy