Houdini: The JavaScript API to Extend CSS
We will be finally able to extend CSS in JavaScript via Houdini
As we all know, CSS is a style sheet language that enhances the presentations written by HTML, like mark-up languages. Many requirements come from the community in the fast-growing tech world, such as CSS native nesting requirements, getting parent selectors. Getting rid of SASS, get better styling options for select and input options, more filter options, more display options, etc.
It seems impossible for CSS specifications to keep up with the various feature demands from the industry.
The possible solution is a native way of extending CSS using various APIs. However, Google developers have introduced a method to overcome this issue and powerup the developers when styling.
Introduction to Houdini
Houdini introduces low-level JavaScript APIs for the browser’s render engines.
Houdini is a hypernym that describes a series of low-level browser APIs, making it easier for authors to access the CSS object model and extend CSS by hooking into the browser’s rendering engine’s styling and layout process. This means that developers now have much more control and power over the styles they write.
Need for Houdini over CSS Polyfills?
There are three steps in the rendering pipeline; converting HTML, CSS, and JavaScript into pixels on the browser screen.
Step 01: Browser reads page content and builds Render Tree, which designs the page layout
Step 02: Painting will take place to convert the page layout into pixels.
Step 03: Composite all the painted elements into one page.
To increase the performance of a webpage, it is crucial to optimize the critical render path.
One of CSS’s critical issues is that it takes quite a considerable amount of time to improve or implement a new CSS feature to its fully-supported level.
Currently, developers use JavaScript Polyfills as a substitute for the lack of browser support for the newest CSS features. However, there are critical drawbacks to this approach.
- It requires extra code. The simplest CSS polyfills require more than just rewriting individual property values.
- It does not work with cross-origin (non-CORS) stylesheets.
- It performs poorly when changes are needed (DOM changes, scroll/resize handlers, etc.)
- Need to re-rewrite in any DOM change, which means it requires knowledge of the DOM.
Performance issues: After Polyfill makes changes to the DOM styles, it causes the render process to run again, and the whole page re-renders.
Tip: Build better Component Libs and Design Systems
Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.
OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →
Key Houdini APIs
Houdini Typed Object Model
Developers already use the CSS Object Model for a long time which the function is to extract the computed style. It returns a string and is a performance-wise drawback.
document.body.style.width // returns the width as a string ("3px")
window.getComputedStyle(document.body).widthTyped Object models work the same but convert strings into meaningfully typed JS representations using two methods.
document.body.attributeStyleMap.get("width") //returns with the type of the value (3px)
document.body.computedStyleMap().get("width")Painting API
When it comes to styling web pages, the appearance can be changed due to many scenarios such as when using URL(), applying gradient effects, etc.
Painting API enhances the complaisance of CSS. Function in the API is to draw directly into HTML elements by writing custom functions using paint() and <image> CSS functions. These functions create an image which the rendering engine can use on behalf of the property against which it is used.
For example, developers can use these functions to set complex custom backgrounds on HTML elements.
canvas {
background-image: paint(TestPaintedImg);
}Houdini Worklets
The Worklet is almost similar to Web Workers(light-weighted), enabling access to the rendering pipeline. The main advantage of Worklets is that developers can use Web Assembly and JavaScript code to perform complex audio processing and graphics rendering. Worklets extend the rendering engine.
04 Worklet types
PaintWorklet: Generate images programmatically where a CSS property expects an image/file.AudioWorklet: Use for audio processing using custom AudioNodes.AnimationWorklet: To implement high-performance animations.LayoutWorklet: Defines positioning and dimensions of custom elements.
Other than these four main APIs, there are two APIs that are still under development (CSS Parser API, CSS Layout API)
Advantages of Houdini
Houdini considers mainly all about providing a flexible developer environment and enhances performance in the page rendering cycle. Other than that, there are some key advantages as well.
- Houdini enables faster parse times than using JavaScript for style changes. Most importantly, Houdini does not wait until the completion of the first rendering cycle. The reason is that Houdini consists of understandable styles for a readable first cycle creation.
- Working with CSS values in JavaScript made it easier with Houdini’s Object-based API.
- Using string-based CSS manipulation, HTMLElement style is replaced with Houdini’s CSS object model (Typed Object Model), which exposes values as JavaScript objects to better CSS manipulation.
- Houdini’s key feature, Worklets: Has access to the custom properties of elements. Also, Worklets enables developers to create modular CSS using a single line to import configurable components.
//acessing custom elements
li{
background-image: paint(testComponent, fill, 12px);
--highlights: red;
--lowlights: blue;
}//import configureable components
<script>
CSS.paintWorklet.addModule('csscomponent.js');
</script>
- Browser compatibility: Chrome is leading the way with most of the Houdini APIs. However, most of the APIs are still under development.
Conclusion
Even though developers can invent their grids, regional implementations, custom elements, etc., using Houdini APIs, it is not the best idea for now because developers need to consider privacy, accessibility, and security concerns. So, my opinion is it is better to start small before moving into more advanced projects.
Thank you for reading the article. Cheers!
