and I work at Google.
CSS has 400+ properties, and keeps growing.
Cycle time from problem to solution is too long.
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.
: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);
}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.
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.
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.
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) { ... }Imperative form shouldn't be too difficult either:
CSS.customMedia.set("--bar", true);
CSS.customMedia.set("--baz", 500);
CSS.customMedia.set(
"--qux",
new MediaQueryList("(width >= 500px)"));@media (--bar) { ... }
@media (--baz > 600) { ... }
@media (--qux) { ... }@if or @for from Sass to CSS, or @svg to write SVG images inline in your CSS file without data: url hacks.)
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.
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.)
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 heavily optimized today, and JS is expensive.
Maybe LayoutWorker? Research continues.
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.
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.
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.
Ask Me Anything - I Am A Spec Writer