CSS Houdini Experiments | Hacker News Reader

CSS Houdini Experiments

css-houdini.rocks

61 pointsjadjoubran14 comments

CSS Houdini is a set of low-level web browser APIs that provide access to the browser's CSS engine.

- https://developer.mozilla.org/en-US/docs/Web/Houdini

It's not yet widely implemented: https://ishoudinireadyyet.com/

For anyone who was suddenly terrified that there's a vast array of very specific and weirdly-named CSS properties on the horizon, fear not - this is something entirely different. This is actually a low-level API for drawing things with CSS, and the funny property names are just what the developers have chosen for these experiments. Check out the link at the bottom of each experiment to see the real code, eg. this one for the "avatar polygons": https://css-houdini.rocks/posts/avatar-polygons/paint.js

> You'll need the latest Chrome

Well that explains why this seemed pretty underwhelming on Firefox

See https://ishoudinireadyyet.com/ for info on browser support

I've seen a good intro on this topic by Jeremy Wagner at CSSConf Budapest

https://youtu.be/VccJldua8tc

I am not a front end developer. Can someone explain the benefit of these low level APIs in a web development context? Is the purpose to eventually have complete GUI toolkits with even the underlying window managers all contained in the browser window? Or is it primarily a performance thing, to get 2d and 3d client side animation? Or something else all together?

Edit: Another possibility -- prettier widgets. I just wonder what need is addressed by making these low level APIs available. (again, not a front end developer, so relatively naive about the whole field, especially state-of-the-art)

It's more like: a lot of web developers have a lot of funky requests we can't possibly all fit in the standard. So instead let's give them the tools to extend CSS themselves.

Ah. That makes a lot more sense. Thank you.

Holy moly, the JS-in-CSS one is wild! Thank you for sharing, a lot of these are really cool.

https://css-houdini.rocks/js-in-css

While these experiments are super neat, JS in CSS makes me a little worried. Will we soon need JS enabled to even see basic page styling as well?

To quote

> "Don’t get me wrong with the title: Houdini is JS-in-CSS (allow JS scripts to be called from CSS). Here, it is more like JS-inside-CSS. You can write the registerPaint’s paint function, directly from CSS. You have access to:"

I’d just like other browsers to show an inkling of support. I’m tired of chro[me/nium] being so far ahead I can’t risk the learning.

Being far ahead does not necessarily mean going in the right direction. Considering the implications of some of the web standards I think having a considered and thoughtful approach is probably not wrong.

Did not know about Houdini. This is awesome!

Reply on news.ycombinator.com