I'm Tab Atkins

and I work at Google.





Wrenching Open the Black Box of CSS

The Problem With CSS

CSS has 400+ properties, and keeps growing.

Cycle time from problem to solution is too long.

What is Houdini?

CSS is the biggest "black box" remaining on the web, impossible to reach into.

Houdini Task Force lets you "escape the box".

Lets JS interact with as many parts of CSS as possible.


Custom Properties

:root {
  --header-color: #006;
  --main-color: #06c;
  --accent-color: #c06;
a { color: var(--main-color); }
a:visited { color: var(--accent-color); }
h1 {
  color: var(--header-color);
  background: linear-gradient(var(--main-color), #0000);

Custom Properties

They look like variables, but IT'S A TRAP

Trojan horse for first "customizable CSS".

You can put anything in a custom property, and process it with JS.

Custom Properties

Currently, custom properties are optimized for variables.

Custom Props Level 2 will introduce more control over properties (inheritance, initial value, animation, etc)

Allow processing of custom values within existing properties.

Better API for responding to properties being set/changed/etc.

Where else can we go?

Now that we've got our foot in the door, what else can we do?

Easy to find a few more CSS constructs that can be made extensible.

Custom Media Queries

Declarative form is easy:

@custom-media --small-screen (max-width: 600px);
@custom-media --medium-screen (min-width: 600.01px) and (max-width: 1000px);
@custom-media --large-screen (min-width: 1000.01px);
@media (--small-screen) { ... }

Custom Media Queries

Imperative form shouldn't be too difficult either:

CSS.customMedia.set("--bar", true);
CSS.customMedia.set("--baz", 500);
     new MediaQueryList("(width >= 500px)"));
@media (--bar) { ... }
@media (--baz > 600) { ... }
@media (--qux) { ... }

And further...

Custom Layout

Flexbox and Grid took so long, but we're so hungry for better layout, they're still useful.

Turnover cycle on layout is way too long.

Layout is a hard problem.

Layout "below"

Existing layout modes are responsive to "natural" size of children.

This is hard to measure today.

Hacks include using an off-screen iframe to measure the laid-out size of elements without disturbing the current page.

(Read the Flexbox Layout Algorithm for examples.)

Layout "above"

Existing layout modes know how to tell their parents about their own "natural" sizes.

Impossible to do well today without hacky/slow resize handlers.

(Read the CSS Sizing spec for details.)

Layout is hard

Layout is heavily optimized today, and JS is expensive.

Maybe LayoutWorker? Research continues.

Custom Paint

Try inventing box-shadow, or border-radius today.

Basically shaders in JS.

Still gives access to standard CSS painting (paint all my children normally), + a canvas for custom effects.

Should help simplify DOMs used for fancy things, letting HTML stay simple+accessible while generating cool effects.

Custom Scroll

Another non-obvious extension point.

Layout effects responding to scroll properly is hard. (Think position:fixed, or parallax, or pull-to-refresh, or large headers shrinking+sticking when you scroll down.)

Exact form of control/responsiveness still being debated.

Secret Super Bonus!

At last CSSWG meeting, got agreement from WG to explore adding @extend, or something similar, to CSS.

Doing @extend properly, within the engine, is complicated; may end up with a simplified form.

(For example, maybe only "feature" selectors - class/id/tagname.)

Placeholder selectors seem like a shoe-in as well.

The End

Ask Me Anything - I Am A Spec Writer