Podcast Link to the Podcast
Notes CSS Typed Object Model (Typed OM) CSS Typed OM API allow manipulating CSS styles through a typed JS representation rather than a simple string. Provide performance win. Browser understands the structured JS representation and no longer needs to parse CSS string from scratch. const div = document . createElement ( ' div ' ); // browser needs to parse the string to understand and use it div . style . height = ' 5px ' ; // browser understands and use the value as 5px div . style . height = CSS . px ( 5 ); Enter fullscreen mode Exit fullscreen mode Built-in error handling. You can't provide invalid value to a type. div . attributeStyleMap . set ( ' color ' , CSS . px ( 10 )) // TypeError: Failed to set, invalid type for property Enter fullscreen mode Exit fullscreen mode Rather than manipulating raw string, developer can create / transform CSS in a meaningful object const _5px = CSS . px ( 5 ); // 5px const _15px = _5px . add ( CSS . px ( 10 )); // 15px; const div = document . createElement ( ' div ' ); div . style . height = _15px ; // <div style="height: 15px;"></div> Enter fullscreen mode Exit fullscreen mode API based on functional programming concept To check browser support Typed OM, currently (21 Nov 2020) supported in Safari Tech Preview & Chromium // checking browser support if ( window . CSS && CSS . number ) { // 😍 browser supports Typed OM! } Enter fullscreen mode Exit fullscreen mode computedStyleMap <script> const element = document . querySelector ( ' #app ' ); console . log ( element . computedStyleMap (). get ( ' font-size ' )); // Specification: CSSUnitValue { value: 2, unit: 'rem' } // Chrome: CSSUnitValue { value: 32, unit: 'px' } console . log ( window . getComputedStyle ( element ). fontSize ); // "32px" </script> <div id= "app" style= "font-size: 2rem;" ></div> Enter fullscreen mode Exit fullscreen mode attributeStyleMap parse, modify inline styles <script> const element = document . querySelector ( ' #app ' ); const inlineStyles = element . attributeStyleMap ; console . log ( inlineStyles . get ( ' font-size ' )); // CSSUnitValue { value: 2, unit: 'rem' } inlineStyles . set ( ' height ' , CSS . px ( 10 )); // < div id = " app " style = " font-size: 2rem; height: 10px; " >< /div > inlineStyles . clear (); // < div id = " app " style = "" >< /div > inlineStyles . append ( ' background-image ' , ' linear-gradient(yellow, green) ' ); inlineStyles . append ( ' background-image ' , ' linear-gradient(to bottom, blue, red) ' ); // < div id = " app " // style="background-image: linear-gradient(yellow, green), // linear-gradient(to bottom, blue, red)"> < /div > inlineStyles . delete ( ' background ' ); // < div id = " app " style = "" >< /div > inlineStyles . has ( ' opacity ' ); // false </script> <div id= "app" style= "font-size: 2rem;" ></div> Enter fullscreen mode Exit fullscreen mode <script> // `attributeStyleMap` only gets inline style console . log ( element . attributeStyleMap . get ( ' color ' )); // null console . log ( element . computedStyleMap (). get ( ' color ' )); // CSSStyleValue { /* red */ } </script> <div id= "app" style= "font-size: 2rem;" ></div> <style> #app { color : red ; } </style> Enter fullscreen mode Exit fullscreen mode Types of CSSStyleValue CSSImageValue CSSKeywordValue CSSNumericValue CSSPositionValue CSSTransformValue CSSUnparsedValue create CSSStyleValue CSSStyleValue . parse ( ' font-size ' , ' 32px ' ); // CSSUnitValue { value: 2, unit: 'px' } CSSStyleValue . parse ( ' transform ' , ' translate3d(10px, 20px, 30px) scale(1.5) ' ); /* CSSTransformValue { 0: CSSTranslate { is2D: false x: CSSUnitValue { value: 10, unit: 'px' } y: CSSUnitValue { value: 20, unit: 'px' } z: CSSUnitValue { value: 30, unit: 'px' } } 1: CSSScale { is2D: true x: CSSUnitValue { value: 1.5, unit: 'number' } y: CSSUnitValue { value: 1.5, unit: 'number' } z: CSSUnitValue { value: 1, unit: 'number' } } } */ Enter fullscreen mode Exit fullscreen mode CSSImageValue does not cover linear-gradient CSSKeywordValue display: none, none is a CSSKeywordValue CSSStyleValue . parse ( ' display ' , ' none ' ); // CSSKeywordValue { value: 'none' } const keywordValue = new CSSKeywordValue ( ' flex ' ); // CSSKeywordValue { value: 'flex' } keywordValue . value ; // 'flex' Enter fullscreen mode Exit fullscreen mode CSSNumericValue CSSNumericValue has a few subclasses, eg: CSSUnitValue, CSSMathValue // Convert units CSS . px ( 48 ). to ( ' in ' ) // CSSUnitValue { value: 0.5, unit: 'in' } CSS . px ( 48 ). to ( ' rem ' ) // Error // Cannot transform absolute unit to relative unit Enter fullscreen mode Exit fullscreen mode CSSMathValue CSSMathNegate, CSSMathMin, CSSMathMax, CSSMathSum, CSSMathProduct, CSSMathInvert new CSSMathSum ( CSS . px ( 5 ), CSS . px ( 10 )); // 15px div . attributeStyleMap . set ( ' width ' , new CSSMathMax ( CSS . rem ( 10 ), CSS . px ( 30 ))); // <div style="width: max(10rem, 30px)"></div> Enter fullscreen mode Exit fullscreen mode CSSPositionValue const position = new CSSPositionValue ( CSS . px ( 20 ), CSS . px ( 50 )) position . x ; // CSSUnitValue { value: 20, unit: 'px' } position . y ; // CSSUnitValue { value: 50, unit: 'px' } Enter fullscreen mode Exit fullscreen mode CSSTransformValue CSSTranslate, CSSScale, CSSRotate, CSSSkew, CSSSkewX, CSSSkewY, CSSPerspective, CSSMatrixComponent const transformValue = CSSStyleValue . parse ( ' transform ' , ' translate3d(10px, 20px, 30px) scale(1.5) ' ); // iterate through each transformation for ( const transform of transformValue ) { console . log ( transform ); } // CSSTranslate { ... } // CSSScale { ... } // get DOMMatrix out of the transformValue transformValue . toMatrix (); // DOMMatrix { a: 1.5, b: 0, c: 0, ... } Enter fullscreen mode Exit fullscreen mode CSSUnparsedValue CSSCustomProperty, that is not Houdini Property the value is parsed as string <script> const element = document . querySelector ( ' #app ' ); element . attributeStyleMap . get ( ' --length ' ); // CSSUnparsedValue { 0: 3px } </script> <div id= "app" style= "--length: 3px;" > Enter fullscreen mode Exit fullscreen mode References 
Top comments (1)
About 3 years since this post, this CSS Typed OM and other Houdini features like defining/declaring custom properties is still like an experimental. I mean, Firefox still does not support them, making me hesitate on using them.