Let's talk about…

Wait!
It gets better!

Let's talk about JavaScript…

on Internet Explorer

Even Microsoft had good ideas!

Internet Explorer

introduced 2 ways JavaScript could extend CSS:

• 👉 expressions;
• 👉 behaviors.

IE's CSS expressions

.indicator {
  width: 100%;
  color: expression(this.clientWidth > 400 ? 'red' : 'blue');
}

IE's custom behaviors

<!-- boxsizing.htc -->
<component lightWeight="true">
<attach event="onpropertychange" onevent="checkPropertyChange()" />
<attach event="ondetach" onevent="restore()" />
<script type="text/javascript">//<![CDATA[
function checkPropertyChange(){ ... }
...
//]]></script>
</component>

👍

• ✅ extensible CSS;
• ✅ reusable directives;
• ✅ declarative code.

👎

• ❌ IE only;
• 😰 atrocious performance; We're talking about IE, after all
• 😭 used to crash the browser a lot; Because whatever, uncostrained crap was allowed
• 😱 a nightmare to debug 🧟‍ Anyone remembers IE5's devtools? 'cors not, because there were none

What now?

CSS is evolving:

• 👍 slowly, but steady
• 👌 with a clear process
• 🤝 involving all parties.

But no matter what the W3C does

In short…

We're still like this:

So, what can we do?

Enter Houdini

A project inside the W3C to expose parts of the CSS engine to web developers

Houdini modules

• 🎨 Paint API
• ⚡ Typed OM
• 🔢 Properties & Values API
• 🏠 Layout API
• 🎞 AnimationWorklet
• ✍️ Parser API
• 📐 Font Metrics API

Worklets

Think of Workers, but lightweight:

• ❌ no DOM et al. e.g. events, navigator, location…
• ❌ no fetch() Also no dynamic import: it's in the language, but always rejects
• ❌ no postMessage Meaning you can't communicate with the main thread
• ❌ no storage e.g. localStorage, IndexedDB, caches…
• ❌ no setTimeout
• ❌ no side effects e.g. WebRTC, WebUSB, channels, crypto…

What's that for?

// delaunay.js
class DelaunayModule {
  paint(context, geometry, properties) { ... }

  static get inputProperties() {
    return [ '--delaunay-point-area', ... ];
  }
}

registerPaint('delaunay', DelaunayModule);

// main.js
CSS.paintWorklet.addModule('./delaunay.js').then(...);

paint(context, geometry, properties)

context is a stripped-down CanvasRenderingContext2D

• ❌ no text capabilities
• ❌ no image manipulation
• 😥 including reading from the canvas itself

Where can I use it?

• 👉 background-image
• 👉 border-image
• 👉 mask-image
• 👉 list-style-image
• 👉 ::before and ::after
• … possibly anything that can accept a url()
• ❌ except cursor

element.style.fontSize = '20px';

element.attributeStyleMap.set('font-size', CSS.px(20));

What usually happens

const width = someComputation();
element.style.width = `${width}px`;

number ➡ string ➡ CSS parse ➡ CSS value

What happens with Typed OM

const width = someComputation();
element.attributeStyleMap.set('width', CSS.px(width));

number ➡ string ➡ CSS parse ➡ CSS value

Style maps

What's .attributeStyleMap?

It's a Map for style properties

StylePropertyMap

There are two defined on elements:

• 👉 .attributeStyleMap
• ~ .style
• 👉 .computedStyleMap() I have no idea why the didn't call it getComputedStyleMap, if they didn't fear to be verbose
• ~ getComputedStyle() .computedStyleMap() also returns clamped/adjusted values (e.g. for opacity, or rounded for z-index and so on)

And by the way

paint(ctx, geom, properties)

Other perks

• 🤔 Classic CSSOM always returns strings Event for numeric values, like opacity or z-index

  el.style.opacity += 0.1; // oh noes!

• 💥 Invalid values now throw

  el.attributeStyleMap.set('margin', 'foo'); // 😱

#1: the cascade

.box {
  width: 20em;
  width: red;
}

What happens now?

.box {
  --box-width: 20em;
  --box-width: red;
  width: var(--box-width);
}

#2: animations

.box { animation: streeetch 2s infinite; }
@keyframes streeetch {
  from { width: 10em; }
  to   { width: 20em; }
}

.box {
  width: var(--box-width);
  animation: streeetch 2s infinite;
}
@keyframes streeetch {
  from { --box-width: 10em; }
  to   { --box-width: 20em; }
}

Set the type of a custom property

CSS.registerProperty({
  name: '--box-width',
  syntax: '<length>',
  initialValue: CSS.px(0),
  inherits: false
});

Next step 🔭

@property --box-width {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

registerPaint('ripple', class {
  static get inputProperties() {
    return [ '--ripple-color', ... ];
  }
  paint(ctx, { width, height }, props) {
    const color = props.get('--ripple-color');
    ...
    ctx.fillStyle = color;
    ctx.arc(centerX.value, centerY.value,
      radius.value * farthest / 100, 0, Math.PI * 2);
    ctx.fill();
  }
});

We can already do a lot, but…

What can we do?

• 👉 "blockify" the children (or not)
• 👉 give constraints to fragments
• 👉 position the children
• 👉 set the parent's block size

Web Animation API

registerAnimator('my-animator', class {
  constructor(options = {}) {
    this.options = options;
  }
  animate(currentTime, effect) {
    const newTime = bendTheTime(currentTime);
    effect.localTime = newTime;
  }
});

await CSS.animationWorklet.addModule('./my-anim.js');

const effect = new KeyframeEffect(el, frames);
const animation = new WorkletAnimation(
  'my-animator',
  effect
);

animation.play();

Timelines 💫

new Animation(
  effect,
  animationOptions,
  document.timeline
);

What is "time"? 🤔

ScrollTimeline 🎉

const timeline = new ScrollTimeline({
  scrollSource: document.scrollElement,
  orientation: 'vertical',
  timeRange: 1000
});

Other timelines? 🤞

Links #1

• 🔗 CSS-TAG Houdini Editor Drafts drafts.css-houdini.org
• 🔗 Is Houdini ready yet‽ @DasSurma ishoudinireadyyet.com
• 🔗 CSS Houdini @snugug houdini.glitch.me

Links #2

• 🔗 CSS Houdini Experiments @iamvdo css-houdini.rocks
• 🔗 Google Developers: all articles tagged Houdini developers.google.com/web/updates/tags/houdini
• 🔗 Houdini Samples @DasSurma et al. googlechromelabs.github.io/houdini-samples

for (const question of questions) {
  await answer(question)
}