- Published on
Magic is real with Houdini
Fed up with bloated hacky JavaScript manipulating CSS? Me too!
Enter the Houdini Task Force with one simple goal...outline a collection of drafts to be accepted by W3C & added as common web standards. Well it doesn't seem that simple but these guys are making great strides for the web and developers sake.
Houdini will in essence offer the ability to extend the CSS rendering engine with low-level JavaScript APIs. Which will allow authors to extend the CSS engine offering massive improvements & capabilities from a user experience & performance point of view.
Specifications
Worklets
Worklets themselves aren't really anything to write home about. Similar to a Web Worker a Worklet is more of a concept that makes use of ES2015 class definitions helping to expose these low-level APIs within our browser.
So what is a Worklet? A Worklet is almost like a mini event loop (what is the event loop) that can attach or reposition itself to different events it is configured to. In the words of Surma think of it as your swiss army knife to accessing these low-level APIs.
Let's look at our first low-level API that Worklets give us access to, the CSS Paint API.
As most of these specs are still in the draft phase you may need to enable experimental web features to see them in action. chrome://flags/#enable-experimental-web-platform-features
CSS Paint API
Ok what the hell does this thing do you ask & why should I be excited about it! Imagine being able to programmatically control exactly what, when & how an object is drawn to the screen. With greater control using SVGs or jamming image files into your CSS may well become less of a headache.
Instead of using things like background-image or border-image you can now reference a paint worklet like so paint(myPainter). Enough with the jabber show me the goodies dag-nab-it!
CSS Animation Worklet
This super-sweet Worklet allows us to run a set of instructions on a device at it's native frame rate preventing jumpy & awkward animations. The first port of call for most animations in CSS is CSS Transitions, CSS Animations & the more complex Web Animations API. With the CSS Animation API / Worklet we can listen for any user input even scroll events!
This topic is quite extensive so to prevent boredom I suggest checking out the example below & read more if you fancy.
Read more about CSS Animation Worklet
CSS Layout API
With the ability to create & control your layouts with enormous detail never imagined before! The layout worklet can even help you build your own layouts & pass them into the display property, like so display: layout('myLayout').
Read more about the CSS Layout API
Typed CSSOM
CSS Object Model or Cascading Style Sheets Object Model (Typed CSSOM). If you are familiar with a programming language or two you might have stumbled upon some Object Oriented stuff & data types. What this specification focuses on is the typing part, mainly the typing of CSS values as JavaScript objects.
With Typed CSSOM every CSS value is now a member of a new base class called CSSStyleValue. These values can then be extended to help authors manage calculations & different value types such as rem, px, em & percent.
The Task Force
With engineers from the likes of Apple, Google & Microsoft working together (i know scary right!) on these potentially new web standards how could you not be excited!
Conclusion
I wanted to keep these sections brief...so there you have it! Not all the specifications are fully stable at the moment but Houdini & Worklets won't be going away anytime soon. Keep your ear close to the coconut on this one peoples.