The name #CSS Houdini refers to the black-box magic 🧙‍♀️that CSS brings to the Web: browsers do lots of amazing work, but leave little for devs to intervene. Houdini aims at “developing features that explain the «magic» of Styling and Layout on the web” github.com/w3c/css-houdini-d…

Apr 9, 2018 · 9:35 AM UTC

1
1
1
2
@philwalton published a great intro on the scope and goals of the work in @SmashinMagazine a couple of years ago smashingmagazine.com/2016/03…
1
In a nutshell, #CSS Houdini will let you build polyfills for CSS and experiment with crafting new CSS properties or values ⚗️ (which can then be fed into the standardization process, per the Extensible Web Manifesto github.com/extensibleweb/man… )
2
1
1
The concept of worklet we described a few weeks ago is one of the many exciting outcomes of this work
Worklets are a lower-cost way of running code very efficiently as part of the various rendering pipelines of the browser (e.g. while painting, laying out, animating or playing audio) developer.mozilla.org/en-US/…
1
Opening up the CSS black box requires specifying and exposing to #JavaScript a lot more of the #CSS machinery. Among other things, this includes a much improved and more strongly typed object model for CSS property values github.com/w3c/css-houdini-d…
"Working with the new CSS Typed Object Model": developers.google.com/web/up… Calling this .className => .classList, but for the style="" attribute. Proper object model for CSS vals, math methods, unit conversion, parsing. No more manipulating strings to get/set inline styles.
1
1
2
@DasSurma is threatening to flood his feed with #Houdini, so follow him if you want to hear live from the meeting
This week I’m at @csswg in Berlin. First day is exclusively about #Houdini. On the agenda: - Typed OM - Custom Layout - Custom Paint - Animation Worklet github.com/w3c/css-houdini-d… (Mute #Houdini for the week if you are not interested)
3