
CSS Houdini Experiments - jadjoubran
https://css-houdini.rocks/
======
kjhughes
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](https://developer.mozilla.org/en-US/docs/Web/Houdini)

\- [https://drafts.css-houdini.org/](https://drafts.css-houdini.org/)

It's not yet widely implemented:
[https://ishoudinireadyyet.com/](https://ishoudinireadyyet.com/)

------
bshimmin
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](https://css-
houdini.rocks/posts/avatar-polygons/paint.js)

------
war1025
> You'll need the latest Chrome

Well that explains why this seemed pretty underwhelming on Firefox

~~~
lucideer
See [https://ishoudinireadyyet.com/](https://ishoudinireadyyet.com/) for info
on browser support

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

[https://youtu.be/VccJldua8tc](https://youtu.be/VccJldua8tc)

------
daveguy
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)

~~~
kabes
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.

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

------
gavinray
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](https://css-houdini.rocks/js-in-css)

------
theklr
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.

~~~
SahAssar
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.

------
shd4
Did not know about Houdini. This is awesome!

------
landonalder
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?

~~~
p410n3
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:"

