Kishore's Blog

CSS Houdini Jump-start

CSS Houdini Jump-start

Kishore's photo
Kishore
·

3 min read

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

morning.png

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

image.png

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 🙂

CSSJavaScriptHTML5