1.
Let's talk about…
JavaScript

2.
Wait!
It gets better!

3.
Let's talk about JavaScript …
on Internet Explorer
6

4.
Even Microsoft had good ideas!
Usually, with a very poor execution…

5.
Internet Explorer
introduced 2 ways JavaScript could extend CSS:
expressions;
behaviors.

6.
IE's CSS expressions
.indicator.indicator {{
widthwidth:: 100%100%;;
colorcolor:: expressionexpression((this.clientWidth > 400 ?this.clientWidth > 400 ? 'red''red' :: 'blue''blue'));;
}}

7.
IE's custom behaviors
<!-- boxsizing.htc --><!-- boxsizing.htc -->
<<componentcomponent lightWeightlightWeight==""truetrue"">>
<<attachattach eventevent==""onpropertychangeonpropertychange"" oneventonevent==""checkPropertyChange()checkPropertyChange()"" />/>
<<attachattach eventevent==""ondetachondetach"" oneventonevent==""restore()restore()"" />/>
<<scriptscript typetype==""text/javascripttext/javascript"">>//<![CDATA[//<![CDATA[
functionfunction checkPropertyChangecheckPropertyChange(()){{ ...... }}
......
//]]>//]]></</scriptscript>>
</</componentcomponent>>

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

9.
❌IE only;
atrocious performance;
used to crash the browser a lot;
a nightmare to debug

10.
KILL IT WITH FIRE

11.
What now?
CSS is evolving:
slowly, but steady
with a clear process
involving all parties.

12.
But no matter what the W3C
does
CSS will never cover everyone's use cases.

13.
In short…
We're still like this:

14.
So, what can we do?

15.
Enter Houdini
A project inside the W3C to expose parts of the
CSS engine to web developers

16.
Houdini modules
Paint API
⚡Typed OM
Properties & Values API
Layout API
AnimationWorklet
✍ Parser API
Font Metrics API

17.
RENDERING
CYCLE
STYLE LAYOUT
PAINTCOMPOSITE
Collaboration e ortCollaboration e ortCollaboration e ort

18.
Worklets
Think of Workers, but lightweight:
❌no DOM et al. ❌no fetch()
❌no postMessage ❌no storage
❌no setTimeout ❌no side e ects

19.
Are you ready?

20.
Paint API

21.
What's that for?

22.
.delaunay.delaunay {{
background-colorbackground-color:: #f60#f60;;
background-imagebackground-image:: paintpaint((delaunaydelaunay));;
}}

23.
// delaunay.js// delaunay.js
classclass DelaunayModuleDelaunayModule {{
paintpaint((contextcontext,, geometrygeometry,, propertiesproperties)) {{ ...... }}
staticstatic getget inputPropertiesinputProperties(()) {{
returnreturn [[ '--delaunay-point-area''--delaunay-point-area',, ...... ]];;
}}
}}
registerPaintregisterPaint(('delaunay''delaunay',, DelaunayModuleDelaunayModule));;
// main.js// main.js
CSSCSS..paintWorkletpaintWorklet..addModuleaddModule(('./delaunay.js''./delaunay.js'))..thenthen((......));;

24.
paint(context, geometry,
properties)
context is a stripped-down
CanvasRenderingContext2D
❌no text capabilities
❌no image manipulation
including reading from the canvas itself

25.
geometry has just two numeric properties:
↔ width and ↕ height
properties is a Map of the CSS properties
given by inputProperties

26.
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

27.
Typed OM

28.
elementelement..stylestyle..fontSizefontSize == '20px''20px';;
becomes
elementelement..attributeStyleMapattributeStyleMap..setset(('font-size''font-size',, CSSCSS..pxpx((2020))));;

29.
One word:
Performance
and other stu
(ok, that's 4)

30.
What usually happens
constconst widthwidth == someComputationsomeComputation(());;
elementelement..stylestyle..widthwidth == ``${${widthwidth}}px`px`;;
number ➡ string ➡ CSS parse ➡ CSS value

31.
What happens with Typed OM
constconst widthwidth == someComputationsomeComputation(());;
elementelement..attributeStyleMapattributeStyleMap..setset(('width''width',, CSSCSS..pxpx((widthwidth))));;
number ➡ ➡ ➡ CSS valuestring CSS parse

32.
So what's CSS.px() ?
>> CSSCSS..pxpx((1010))
<< ►► CSSUnitValueCSSUnitValue {{valuevalue:: 1010,, unitunit:: "px""px"}}
.cm() , .deg() , .em() , .fr() , .kHz() ,
.ms() , .number() , .percent() , .vh() , …

33.
Typed OM's types (partial list)
CSSKeywordValue
CSSMathValue
CSSTransformValue
CSSVariableReferenceValue
CSSUnparsedValue
CSSStyleValue

34.
Style maps
What's .attributeStyleMap ?
It's a Map for style properties
StylePropertyMap

35.
There are two de ned on elements:
.attributeStyleMap
~ .style
.computedStyleMap()
~ getComputedStyle()

36.
☝computed styles
✌in CSS values
on the element

37.
It's .currentStyle all over again!
… introduced by
Internet Explorer 6

38.
And by the way
paint( properties)
That's a StylePropertyMap too.
ctx, geom,

39.
Other perks
Classic CSSOM always returns strings
elel..stylestyle..opacityopacity +=+= 0.10.1;; // oh noes!// oh noes!
Invalid values now throw
elel..attributeStyleMapattributeStyleMap..setset(('margin''margin',, 'foo''foo'));; ////

40.
Properties and
values

41.
#1: the cascade
.box.box {{
widthwidth:: 20em20em;;
widthwidth:: redred;;
}}
gets ignoredwidth: red

42.
What happens now?
.box.box {{
--box-width--box-width:: 20em20em;;
--box-width--box-width:: redred;;
widthwidth:: varvar((--box-width--box-width));;
}}
It's that gets ignored!--box-width: 20em

43.
#2: animations
.box.box {{ animationanimation:: streeetch 2s infinitestreeetch 2s infinite;; }}
@keyframes@keyframes streeetchstreeetch {{
fromfrom {{ widthwidth:: 10em10em;; }}
toto {{ widthwidth:: 20em20em;; }}
}}
BOX

44.
.box.box {{
widthwidth:: varvar((--box-width--box-width));;
animationanimation:: streeetch 2s infinitestreeetch 2s infinite;;
}}
@keyframes@keyframes streeetchstreeetch {{
fromfrom {{ --box-width--box-width:: 10em10em;; }}
toto {{ --box-width--box-width:: 20em20em;; }}
}}
BOX

45.
Why?

46.
Set the type of a custom property
CSSCSS..registerPropertyregisterProperty(({{
namename:: '--box-width''--box-width',,
syntaxsyntax:: '<length>''<length>',,
initialValueinitialValue:: CSSCSS..pxpx((00)),,
inheritsinherits:: falsefalse
}}));;

47.
All the syntaxes
<color> <length>
<percentage> <length-percentage>
<number> <integer>
<angle> <time>
<url> <image>
<transform-list> <transform-function>
<resolution> <custom-ident>

48.
Combinations too
Space separated: <color>+
Comma separated: <url>#
Type union: <number> | <length>

49.
Bonus
Interpolated custom properties work with
Paint API

50.
Next step
Register properties in CSS
@property@property --box-width--box-width {{
syntaxsyntax:: '<length>''<length>';;
initial-valueinitial-value:: 0px0px;;
inheritsinherits:: falsefalse;;
}}

51.
What we've seen so far

52.
Paint API
Draw images fast in a worklet
⚡Typed OM
Fast and less error-prone values for CSS
Properties and Values
Making custom properties rst class citizens

53.
Hello!

54.
registerPaintregisterPaint(('ripple''ripple',, classclass {{
staticstatic getget inputPropertiesinputProperties(()) {{
returnreturn [[ '--ripple-color''--ripple-color',, ...... ]];;
}}
paintpaint((ctxctx,, {{ widthwidth,, heightheight }},, propsprops)) {{
constconst colorcolor == propsprops..getget(('--ripple-color''--ripple-color'));;
......
ctxctx..fillStylefillStyle == colorcolor;;
ctxctx..arcarc((centerXcenterX..valuevalue,, centerYcenterY..valuevalue,,
radiusradius..valuevalue ** farthestfarthest // 100100,, 00,, MathMath..PIPI ** 22));;
ctxctx..fillfill(());;
}}
}}));;

55.
CSSCSS..registerPropertyregisterProperty(({{
namename:: '--ripple-color''--ripple-color',,
syntaxsyntax:: '<color>''<color>',,
initialValueinitialValue:: '#fff0''#fff0',,
inheritsinherits:: falsefalse
}}));;
CSSCSS..registerPropertyregisterProperty(({{
namename:: '--ripple-radius''--ripple-radius',,
syntaxsyntax:: '<percentage>''<percentage>',,
......
}}));;
......
constconst durationduration ==
buttonbutton..computedStyleMapcomputedStyleMap(())
..getget(('--ripple-duration''--ripple-duration'))
..toto(('ms''ms'))..valuevalue;;
buttonbutton..animateanimate(([[{{
'--ripple-color''--ripple-color':: '#ffffff80''#ffffff80',,
'--ripple-radius''--ripple-radius':: CSSCSS..percentpercent((00))
}},, {{
'--ripple-color''--ripple-color':: '#ffffff00''#ffffff00',,
'--ripple-radius''--ripple-radius':: CSSCSS..percentpercent((100100))
}}]],, durationduration));;

56.
We can already do a lot, but…
Can I use it in
production?

57.
Is HoudiniIs HoudiniIs Houdini ready yetready yetready yet.com.com.com

58.
Layout API

59.
Mock-solidMock-solidMock-solid

60.
display: layout(my-layout)

61.
Children and fragments
Lorem ipsum
dolor sit
amet

62.
CSSCSS..layoutWorkletlayoutWorklet..addModuleaddModule(('./my-layout.js''./my-layout.js'))
registerLayoutregisterLayout(('my-layout''my-layout',, classclass {{
asyncasync layoutlayout((childrenchildren,, edgesedges,, constraintsconstraints,, propertiesproperties,, breakTokenbreakToken)) {{
}}
asyncasync intrinsicSizesintrinsicSizes((childrenchildren,, edgesedges,, propertiesproperties)) {{ }}
staticstatic inputPropertiesinputProperties == [['--foo''--foo']];;
staticstatic childrenInputPropertieschildrenInputProperties == [['--bar''--bar']];;
staticstatic layoutOptionslayoutOptions == {{childDisplaychildDisplay:: 'normal''normal',, sizingsizing:: 'block-like''block-like'}};;
});});

63.
Lorem
ipsum
dolor
sit
amet
minContentSize
Lorem ipsum dolor sit amet
maxContentSize

64.
What can we do?
"blockify" the children (or not)
give constraints to fragments
position the children
set the parent's block size

65.
Easy masonry
googlechromelabs.github.iogooglechromelabs.github.iogooglechromelabs.github.io
/houdini-samples/houdini-samples/houdini-samples

66.
Animation Worklet

67.
CSS Animations
requestAnimationFrame
Web Animation API

68.
Web Animation API
Can do a lot…
Could do much more!

69.
Animation types
linear ease
steps(4, start) cubic-bezier(0, 1, .5, 1.5)

70.
normal reverse
alternate alternate-reverseWe can break thisWe can break thisWe can break this

71.
Animations with Houdini
sine bounce
projectile random

72.
registerAnimatorregisterAnimator(('my-animator''my-animator',, classclass {{
constructorconstructor((optionsoptions == {{}})) {{
thisthis..optionsoptions == optionsoptions;;
}}
animateanimate((currentTimecurrentTime,, effecteffect)) {{
constconst newTimenewTime == bendTheTimebendTheTime((currentTimecurrentTime));;
effecteffect..localTimelocalTime == newTimenewTime;;
}}
});});

73.
awaitawait CSSCSS..animationWorkletanimationWorklet..addModuleaddModule(('./my-anim.js'./my-anim.js
constconst effecteffect == newnew KeyframeEffectKeyframeEffect((elel,, framesframes));;
constconst animationanimation == newnew WorkletAnimationWorkletAnimation((
'my-animator''my-animator',,
effecteffect
));;
animationanimation..playplay(());;

74.
Stateful animators
classclass MyAnimatorMyAnimator {{
constructorconstructor((optsopts,, statestate == {{}})) {{
thisthis.._state_state == statestate;;
}}
getget statestate(()) {{ returnreturn thisthis.._state_state;; }}
}}

75.
Timelines
newnew AnimationAnimation((
effecteffect,,
animationOptionsanimationOptions,,
documentdocument..timelinetimeline
););

76.
What is "time"?
☝

77.
ScrollTimeline
constconst timelinetimeline == newnew ScrollTimelineScrollTimeline(({{
scrollSourcescrollSource:: documentdocument..scrollElementscrollElement,,
orientationorientation:: 'vertical''vertical',,
timeRangetimeRange:: 10001000
});});

78.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Sed
ullamcorper morbi tincidunt ornare massa eget.
Orci porta non pulvinar neque laoreet
suspendisse interdum consectetur. Sed
adipiscing diam donec adipiscing tristique risus
nec. Cras pulvinar mattis nunc sed blandit
libero volutpat sed. Porta non pulvinar neque
laoreet. Pulvinar neque laoreet suspendisse
interdum consectetur libero id faucibus nisl.
Adipiscing at in tellus integer feugiat
scelerisque Orci a scelerisque purus semper

79.
Other timelines?
InputTimeline
Not here yet…Not here yet…Not here yet…

80.
Hic Sunt LeonesHic Sunt LeonesHic Sunt Leones

81.
Font metrics API

82.
Layout + font = ❤❤

83.
Answering questions
How wide will "foo" be?
What's the baseline?
What fonts are being used?
Kerning, ligatures, …

84.
¯_(ツ)_/¯

85.
Parser API

86.
Allowing to parse
values;
rules;
stylesheets;
CSS-like documents.

87.
¯_(¯_(ツツ)_/¯)_/¯¯_(ツ)_/¯

88.
Links #1
CSS-TAG Houdini Editor Drafts
drafts.css-houdini.org
Is Houdini ready yet‽@DasSurma
ishoudinireadyyet.com
CSS Houdini @snugug
houdini.glitch.me

89.
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

90.
Massimo Artizzu
Web dev & architect
at Antreem
/
@MaxArt2501

91.
maxart2501.github.io/css-houdini-
talk/codemotion-mi18/

92.
forfor ((constconst questionquestion ofof questionsquestions)) {{
awaitawait answeranswer((questionquestion))
}}