The future of CSS Specs

CSS remains easy to author:
simple declarative syntax

CSS can evolve more quickly with Houdini.

Extensible Web Manifesto

Favor flexible, low-level APIs

Avoid opinionated, high-level features

Ship quickly and encourage developer feedback

Read the Manifesto

Cross-Browser Initiative

All major vendors are involved. Very rare.
It's a universal problem worth solving.

Is Houdini Ready Yet?

ishoudinireadyyet.com

Modify the Browser Engine

Today

Polyfilling CSS with JS

CSS with Houdini

Houdini Specs

CSS Parser API

• Add new syntax: blocks, pseudo-classes, nesting
• @extends or @media (offline: true)

CSS Typed Object Model

// Without variable types
el.style.left = 5 + 'px';

// With variable types
el.style.left = new CSSUnitValue(5, 'px'));

Adds typed variables to CSSOM

Allows more values to be animated/transitioned.

CSS Props and Values API

CSS.registerProperty({
  name: '--circle-radius',
  syntax: '<number>',
  initialValue: '0',
  inherits: true, // defaults to false
});

Supercharges CSS Custom Properties

Define typed, animatable, transitionable props

Worklets

"mini" Web Workers

CSS Layout API

.gallery {
  display: layout('masonry');
}

<script>
  CSS.layoutWorklet.addModule('./masonry.js');
</script>

Custom layouts with simple CSS declaration!

CSS Paint API

.face {
  background-image: paint('face');
  --face-mood: sad;
}
.face--houdini {
  --face-mood: happy;
}

<script>
  CSS.paintWorklet.addModule('./face.js');
</script>

Declare complex, interactive elements in CSS

Composited Scrolling
and Animation

Animation Worklets (only non-layout CSS props)

Interactions on-par with native apps!!!

CSS Snap, position: sticky,
Animations using gesture as timing function.