The traditional way of manipulating CSS properties in JavaScript involves parsing strings with methods like style.cssText
or directly accessing desired style properties on elements. However, these approaches can be inefficient, error-prone, and unwieldy, especially when considering factors like units or multiple string concatenations. Enter the CSS Typed Object Model (Typed OM), a modern API designed to handle CSS styles with greater precision and control.
The CSS Typed OM is an enhancement to the regular CSS Object Model (CSSOM), allowing developers to work directly with CSS values as objects. This means instead of parsing and converting numerical values from strings, you can now manipulate these values as JavaScript objects — each with their own properties and methods.
Understanding the CSS Typed OM
The CSS Typed Object Model introduces interfaces such as CSSStyleValue
, CSSTransformValue
, and CSSUnitValue
. These provide a more systematic approach to specifying and manipulating styles.
For instance, consider manipulating a CSS property using Typed OM:
const element = document.querySelector('.box');
// Directly setting a CSS property using Typed OM
const widthValue = new CSSUnitValue(100, 'px');
element.attributeStyleMap.set('width', widthValue);
In this example, we are setting an element's width to 100 pixels without involving any string conversion or parsing. We create a CSSUnitValue
object representing the value we want, and directly apply it using the attributeStyleMap.set
method.
Reading CSS Values
Another advantage of the CSS Typed OM is its ability to read CSS values as structured types. In the following example, we'll retrieve the width of an element:
// Accessing a CSS property using Typed OM
const widthTypedValue = element.attributeStyleMap.get('width');
console.log(widthTypedValue.value); // Outputs: 100
console.log(widthTypedValue.unit); // Outputs: 'px'
This snippet demonstrates how we can extract both the numeric value and the unit from a CSS property, again without any need for string processing.
Transformations and Complex Styles
One of the more powerful features of the CSS Typed OM is its ability to handle more complex CSS properties, such as transformations, through the CSSTransformValue
interface.
const transformList = new CSSTransformValue([
new CSSTranslate(CSS.px(30), CSS.px(30)),
new CSSScale(1.5, 1.5)
]);
element.attributeStyleMap.set('transform', transformList);
This code uses the CSSTransformValue
to create and set a transformation that both translates and scales an element.
Benefits of Using the CSS Typed OM
The move to the CSS Typed Object Model provides several benefits:
- Performance: By avoiding string parsing and formatting, scripts run faster and become more efficient.
- Precision: With Typed OM, there's no loss of numerical precision due to floating point reassembly required when manipulating string-based styles.
- Simplified Code: JavaScript tasks involving style manipulation become cleaner and easier to read.
Browser Support and Compatibility
Currently, the CSS Typed OM is not supported in all browsers. It’s essential to check for browser support and include appropriate fallbacks to ensure a consistent user experience.
if ('attributeStyleMap' in element) {
// Safe to use CSS Typed OM
} else {
// Fallback code for unsupported browsers
}
In conclusion, the CSS Typed OM empowers developers with fine-tuned control over CSS properties, making style manipulation more intuitive, efficient, and powerful. If browser compatibility matches your target audience, it should be considered a standard tool for JavaScript-based CSS tasks.