The objective of the CSS-TAG Houdini Task Force (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web.
CSS Houdini
The objective of the CSS-TAG Houdini Task Force (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web.
CSS Houdini
What this means is that we'll finally be able to Extend CSS via JavaScript. This is important because it's currently not possible to extend CSS with JavaScript, only write JavaScript that mimics CSS. Actually polyfilling CSS, or introducing new features (like CSS Grid), is hard-to-impossible to do, doubly so in a way that's not terrible for performance. CSS Houdini will let authors tap in to the actual CSS engine, finally allowing us to extend CSS, and do so at CSS speeds
Much like Service Workers are a low-level JavaScript API for the browser's cache, Houdini introduces low-level JavaScript APIs for the browser's render engines
This is awesome, and is going to give us a lot of power, but unfortunately, it's not quite ready yet
The demos presented are, at best, based off of working drafts that are still in flux. No compatible implementations exist. What little actually works only really does so in Chrome Canary with Experimental Web Platform Features enabled (chrome://flags/#enable-experimental-web-platform-features). These demos will likely break if not viewed there. Syntax and semantics are likely to change. In fact, in the course of a year, one API has gone through 4ish incompatible API changes. Some of the examples provided are speculative based on previous and current working implementations and may not reflect final syntax. Terms and conditions apply. Not redeemable for cash. Your mileage may vary.
Cool?! Let's get started! Follow the links below to learn more about some of the key Houdini APIs and concepts, including live code you can play with! When you're all done, check out some of the additional resources to learn more!