A Practical Overview Of CSS Houdini

Adrian Bece writing for Smashing Magazine: Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell …

Demystifying the future of CSS with sparkles of JS

At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini. CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to …

Working with Houdini’s new CSS Typed Object Model (Typed OM)

Chrome 66 will add support for Houdini’s Typed OM. Eric Bidelman from Google has documented how we can use this. CSS now has a proper object-based API for working with values in JavaScript. The days of concatenating strings and subtle bugs are over! The example shown above merely defines a value and is quite a …

CSS Houdini Experiments

At the very end of the Say Hello to Houdini and the CSS Paint API article there’s only a small mention of this site. However it’s that great that it’s worth a link/post on its own. ⚠️ Be sure to use Chrome Canary – with “Experimental Web Platform features” enabled via chrome://flags – when visiting …

CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!

Oh yeah, the CSS Paint API will be enabled by default in Chrome 65: CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of …

Is Houdini ready yet‽

“Is Houdini ready yet‽” is a dedicated page to tracking the status of Houdini. But what is Houdini? Here’s a snippet from Smashing Magazine: Imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. …