The Future of CSS

DrupalCon Vienna 2017

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?


Modify the Browser Engine


Browser rendering diagram displaying the DOM with full JavaScript access and the CSSOM with partial JavaScript access.
Image credit: Smashing Magazine

Polyfilling CSS with JS

Browser rendering diagram displaying effect of JavaScript polyfilling process on the render pipeline.
Image credit: Smashing Magazine

CSS with Houdini

Future browser rendering diagram with proposed Houdini specs in place.
Image credit: Smashing Magazine

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

  name: '--circle-radius',
  syntax: '<number>',
  initialValue: '0',
  inherits: true, // defaults to false

Supercharges CSS Custom Properties

Define typed, animatable, transitionable props


"mini" Web Workers

Web Workers Worklets
DOM access
Event Listeners
Execute quickly

CSS Layout API

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

Custom layouts with simple CSS declaration!


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

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.

In Progress


Thanks for Reading

Say hi: