CSS

Will CSS Houdini revolutionize web development?

Browser development has often seemed like an endless cycle of disappointment for wed developers. A new standard is recommended, and maybe one browser implements it as a feature. It looks cool. But we can’t allow ourselves to get excited… not yet.

That way lies pain, sadness, and five years to a decade of waiting for the feature to become viable. Remember how long it took us just to get working transparent .PNGs in every browser?

Yeah. That took a while.

Well, that could all be changed in a big way, sort of. Meet the Houdini project. It’s currently just a collection of really good ideas, but it could be a lot more.

All major browsers would implement an API based on the Houdini specs. This API would allow website developers to tap into the browser’s very rendering engine to “explain” to the browser how something should work. In other words, they could add their own site-specific CSS features. The explaining itself would probably be accomplished through JavaScript.

Let’s say you want to build a masonry layout on your site. You don’t want to use an external JavaScript plugin, because those can get bulky and slow. So, instead of using the browser’s JS rendering to calculate everything about your masonry layout, you’d tell the CSS rendering engine how to do it.

Then, in your CSS, you could simply include code that looks something like this:

.div {
    display: layout(masonry);
}

At this point, the browser, having been educated in the finer points of masonry layouts, takes over and does the rest. Since the browser does the rendering natively, it’s a lot faster than using a polyfill.

Here’s another example, with a demo, that does this same thing for parallax layouts.

So, this all sounds like a great idea, right? I do see a couple of potential issues though, and I’m not the first to point them out.

Firstly, this is another feature that it may take years for browsers to implement, and even longer for the majority of users to adopt. This is not a short-term solution.

Secondly, how is this JavaScript getting loaded? Because if it’s included in the HTML like any other JS file, anybody who’s blocking JS, or just having trouble with it, isn’t going to see anything. So, you know, business as usual.

Still, once this feature is implemented, we’ll have even less of an excuse not to use newer CSS features. They’ll be like jQuery plugins. We’ll be able to develop them, share them, and even change them up to do new and crazy things.

At the very least, the code experiments we get out of this should look amazing.

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he's not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy. More articles by Ezequiel Bruni
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress