Sling Academy
Home/JavaScript/Skip String Parsing with the CSS Typed OM in JavaScript

Skip String Parsing with the CSS Typed OM in JavaScript

Last updated: December 12, 2024

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.

Next Article: Streamline Layout Calculations Using the CSS Typed OM in JavaScript

Previous Article: Perform Unit Conversions Using the CSS Typed OM in JavaScript

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration