The way that banner is rendered is really bland. That animation performance is lackluster to say the least. Maybe you're still unsatisfied with grid. CSS has always suffered from a slow-paced evolution but it's probably coming to an end. Houdini is a project that aims to expose the internals of CSS engines to developers, in order to create new and performant ways to extend CSS. We'll see the current state-of-the-art and some neat examples, to conclude with a glance to what the future holds for us.

2. Let's talk about…
JavaScript

3. Wait!
It gets better!

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

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

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

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

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

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

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

11. KILL IT WITH FIRE

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

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

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

15. So, what can we do?

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

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

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

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

20. Are you ready?

21. Paint API

22. What's that for?

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

24. // 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((......));;

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

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

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

28. Typed OM

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

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

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

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

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

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

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

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

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

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

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

40. 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'));; ////

41. Properties and
values

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

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

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

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

46. Why?

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

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

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

50. Bonus
Interpolated custom properties work with
Paint API

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

52. What we've seen so far

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

54. Hello!

55. 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(());;
}}
}}));;

56. 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));;

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

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

59. Layout API

60. Mock-solidMock-solidMock-solid

61. display: layout(my-layout)

62. Children and fragments
Lorem ipsum
dolor sit
amet

63. 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'}};;
});});

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

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

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

68. Animation Worklet

69. CSS Animations
requestAnimationFrame
Web Animation API

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

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

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

73. Animations with Houdini
sine bounce
projectile random

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

75. 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(());;

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

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

78. What is "time"?
☝

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

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

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

82. Hic Sunt LeonesHic Sunt LeonesHic Sunt Leones

83. Font metrics API

84. Layout + font = ❤❤

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

86. ¯_(ツ)_/¯

87. Parser API

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

89. ¯_(¯_(ツツ)_/¯)_/¯¯_(ツ)_/¯

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

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

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

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

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