Working with Houdini’s new CSS Typed Object Model (Typed OM)

Chrome 66 will add support for Houdini’s Typed OM. Eric Bidelman from Google has documented how we can use this.

CSS now has a proper object-based API for working with values in JavaScript. The days of concatenating strings and subtle bugs are over!

The example shown above merely defines a value and is quite a basic one. Typed OM however contains way more stuff. Here’s a few examples:

// CSSUnitValue objects
const {value, unit} = CSS.number('10');
// ~> value === 10, unit === 'number'

// CSSMathValue objects
new CSSMathSum(CSS.vw(100), CSS.px(-10)).toString();
// ~> "calc(100vw + -10px)"

// Basic Arithmetic operations
CSS.percent(50).max(CSS.vw(50)).toString()
// ~> "max(50%, 50vw)"

// Conversions
el.attributeStyleMap.get('width').to('mm');
// ~> CSSUnitValue {value: 132.29166666666669, unit: "mm"}

// …

With the Paint API already being shipped (and more stuff on its way), Chrome is leading the pack when it comes to Houdini support:

Really looking forward to more Houdini features/support, as it will change everything (see these cool experiments for example).

Working with the new CSS Typed Object Model →

CSS Houdini Experiments

At the very end of the Say Hello to Houdini and the CSS Paint API article there’s only a small mention of this site. However it’s that great that it’s worth a link/post on its own.

⚠️ Be sure to use Chrome Canary – with “Experimental Web Platform features” enabled via chrome://flags – when visiting it.

CSS Houdini Experiments →

CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!

Oh yeah, the CSS Paint API will be enabled by default in Chrome 65:

CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of using those, you can now use paint(myPainter) to reference a paint worklet.

Inside a paint worklet a CanvasRenderingContext2D has been made available for you to use. Use it like you would draw on a regular <canvas> element. Next to the CanvasRenderingContext2D you can also access the geometry of the element (e.g. get width and height), and can access other CSS properties (including CSS Variables).

There’s a nice demo included which showcases the rendering of a checkerboard pattern, which can be customised via two CSS Variables:

Here’s code for the painter demoed in the video above:

// checkerboard.js
class CheckerboardPainter {
  // inputProperties returns a list of CSS properties that this paint function gets access to
  static get inputProperties() { return ['--checkerboard-spacing', '--checkerboard-size']; }

  paint(ctx, geom, properties) {
    // Paint worklet uses CSS Typed OM to model the input values.
    // As of now, they are mostly wrappers around strings,
    // but will be augmented to hold more accessible data over time.
    const size = parseInt(properties.get('--checkerboard-size').toString());
    const spacing = parseInt(properties.get('--checkerboard-spacing').toString());
    const colors = ['red', 'green', 'blue'];
    for(let y = 0; y < geom.height/size; y++) {
      for(let x = 0; x < geom.width/size; x++) {
        ctx.fillStyle = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.rect(x*(size + spacing), y*(size + spacing), size, size);
        ctx.fill();
      }
    }
  }
}

registerPaint('checkerboard', CheckerboardPainter);

New possibilities in Chrome 65: CSS Paint API →

💁‍♂️ Want to know more about Houdini? Check out Sam Richard’s talk “Magic Tricks with CSS Houdini” (video)

Sam Richard: Magic Tricks with CSS Houdini

Recording of Sam Richard talking at ColdFront17 about the aforementioned Houdini:

This talk will focus on the working being done by the CSS Houdini Task Force to provide us with the ability to extend the browser’s render engine with JavaScript, above and beyond simply running JS on the main thread or a web worker.

Is Houdini ready yet‽

css-houdini

“Is Houdini ready yet‽” is a dedicated page to tracking the status of Houdini.

But what is Houdini? Here’s a snippet from Smashing Magazine:

Imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. And think about all of the new features you read of in blog posts or hear about at conferences and meetups — things like CSS grids, CSS snap points and sticky positioning. Imagine if you could use all of them today and in a way that was as performant as native CSS features. And all you’d need to do is grab the code from GitHub.

This is the dream of Houdini.

But how?

The Houdini task force has introduced several new specifications that will give developers access to all parts – instead of just the DOM/CSSOM part – of the rendering pipeline. The chart below shows the pipeline and which new specifications can be used to modify which steps.

05-spec-coverage-opt

With Houdini’s APIs one could – for example – implement the Masonry or Grid Layouts, running them at native speed instead of as a script/polyfill:

body {
  display: layout('masonry');
}

Is Houdini ready yet‽ →
Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of →