This article is part of our State of the Web format we publish on a regular basis. Check out our other articles about the newest tech related stuff on the web.
The CSS Typed Object Model is part of the Houdini effort and provides an improved CSS Object Model. Instead of using the old CSSOM
style property, Typed OM defines the
styleMap property to retrieve an element’s or stylesheet’s CSS values. Instead of returning string values, the new APIs offer a typed value as seen in the following example:
With this behavior some great benefits come along. Instead of building up string values e.g.
3 + 'px', developers now can easily produce more maintainable code by using typed setter and getter APIs for manipulating CSS values. Eric Bidelman, an engineer at Google, published in his blog post a cube animation that is transformed using the new capabilities. To demonstrate the benefits of the new API, the following sample shows an implementation of the same cube animation using the former CSSOM:
Here you can see that the former implementation is much more complex, as CSSOM requires the developer to split and concatinate string values. Instead of directly incrementing the value, some complex caluculations have to be performed first. Another powerful argument is that the new CSS Typed OM achieves a higher performance on processing CSS values, because the browser doesn’t need to serialize and deserialize string values.
A full implementation of the old and new approach can be found on JSFiddle.
Currently, Typed OM only can be used in Chrome version 66+ with only a subset of CSS properties. Whereas Firefox is implementing the new feature Mircrosoft only shows signs of consideration.
With increasing browser support the CSS Typed Object Model will represent a further improvement for the web; dealing with style values never felt so easy.
* Eric Bidelman – Working with the new CSS Typed Object Mode
One thought on “CSS Typed Object Model [State of the Web]”