CSS Houdini Jump-start
Hi there 👋
Have you ever thought of extending CSS capabilities with JavaScript?
With CSS Houdini, today it is possible to extend CSS capabilities with JavaScript. CSS Houdini is a set of APIs exposing parts of the CSS engine for us to take control over creating more dynamic custom CSS Properties or CSS modules using JavaScript. In other words, CSS Houdini enables us to use JavaScript in CSS.
Custom Properties and Values
Using Houdini's Properties and Values API, we can create more controlled (using JavaScript) dynamic CSS Properties and Values. In this example, I will create a dynamic image that can be rendered as an image on any CSS property that takes the image as a value.
image-houdini.js
// register the custom property
window.CSS.registerProperty({
name: '--dynamic-image', // name of the property
syntax: '*', // how to parse the property value, * -> any supported houdini property value
inherits: false, // specify whether the property inherits by default
initialValue: dynamicImage() // value of this property
});
/* compute the property value */
// here I am selecting an image dynamically for morning, afternoon and evening
// based on the current time
function dynamicImage() {
const date = new Date();
const hour = date.getHours();
if (hour < 12) { // morning
return 'url("url-to-morning-img.png")';
} else if (hour > 12 && hour < 18) { // afternoon
return 'url("url-to-afternoon-img.png")';
}
return 'url("url-to-evening-img.png")'; // evening
}
index.html
<!DOCTYPE html>
<html>
<head>
<script src="image-houdini.js"></script>
</head>
<body>
<div style="background-image: var(--dynamic-image); height: 200px"></div>
</body>
</html>
Output
Please refer here for the complete specification of CSS Houdini Properties and Values API.
Worklet
Another feature of CSS Houdini is the worklet. With a worklet we can write CSS modules in JavaScript, much like Service Workers but for CSS. There are a few different types of worklet available, one of them is PaintWorklet.
PaintWorklet
With PaintWorklet, we can generate an image programmatically and assign it to any CSS property that takes an image as a value (like background-image, border-image etc.). Here is how we implement it,
paint-houdini.js
class LogoPainter {
/* use this function to retrieve CSS properties */
static get inputProperties() { return ['--logo-color', '--logo-shadow-color']; }
/* define paint api */
paint(ctx, geom, properties) {
/*
ctx -> canvas drawing context
geom-> paint element's width and height
properties-> CSS properties, could be custom or regular
*/
ctx.fillStyle = properties.get('--logo-color');
ctx.rect(0, 0, geom.width - 7, geom.height - 7);
ctx.fill();
ctx.fillStyle = properties.get('--logo-shadow-color');
ctx.rect(7, 7, geom.width - 7, geom.height - 7);
ctx.fill();
}
}
// register our class under a specific name
registerPaint('logopainter', LogoPainter);
index.html
<!DOCTYPE html>
<html>
<head>
<style>
html {
/* custom properties used in paint worklet */
--logo-color: #004e7c;
--logo-shadow-color: #004e7c1f;
}
.kc {
display: flex;
justify-content: center;
box-sizing: border-box;
padding-top: 15px;
width: 257px;
height: 57px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
</style>
<script>
// check if paintworklet is supported
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('paint-houdini.js'); // load the created module
}
</script>
</head>
<body>
<!--CSS Houdini Paint-->
<div class="kc" style="background-image: paint(logopainter);">KishoreConnect</div>
</body>
</html>
Output
Please refer here for the full list of supported worklet types.
Browser Compatibility
CSS Houdini was still considered an experimental technology at the time of writing this article. Refer here for the browser support and use it wisely :)
Thanks for reading! Stay tuned 🙂
