CSS Will Never Be The Same

CSS Houdini is a complete game changer for CSS. It allows you to do things that I never thought would be possible. You can write your own JavaScript to create custom CSS layout and background methods. You can also create your own custom CSS properties on top of many other features. Houdini will singlehandedly change CSS in a far greater way than even flexbox or grid could.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:20 - Browser Support
01:25 - Paint API
03:35 - Properties & Values API
06:02 - Typed OM
07:49 - Layout API
09:00 - Animation Worklet
10:07 - Parser API & Font Metrics API

#CSSHoudini #WDS #CSS

[TheNewton]

9:00 animation worklet -
A potential project is a CSS-to-houdini-JS-animation converter that checks the perf of both for picking which goes to production

[Andressuquaz]

The property API looks awesome, nonetheless the rest doesn't seem that great, it adds a lot of complexity to the code and doesn't seem to pay out that much

[_nikeee]

I think the first mentioned API will be something that a lot of devs will overuse and will result in slow web pages.

[mookiecodes]

feels like this could be powerful for web based game dev

[asatorftw]

Really not sure what I would use this for honestly. I feel it's kind of like what components and animation handling from any frontend framework already do.

[riskitall]

This is just going to probably slow down web pages. Library’s like this are cool but how many more libraries do we need to fancy up a page?

[nathanielnizard]

Dunno, as a dev you really don't want to access CSS with your JS except if you have extremly good reasons to do so. Those features are for full front devs. It was instructive and I'll keep the properties stuff in mind if by chance I can toy with it on a professionnal project. The others features are more elegant than what we have now but I really never use JS to access dom or css in my front ends, maybe very punctually on one component for a wow effect of some sort and that's it. I'm an orthogonal dude.

[bestfacebookcover]

6:15 Why not just el.setCSS('margin-top:10px') like you would type in a css file anyway? Oh wait, there must be a "new way" to do the same thing? el.style.width = "100px"; and el.style.marginTop='40px';

[srossiter]

More web bloat to paint checker boarders ! I love it so much

[abstrktionLair]

this is exactly how jazzed I was when Paul Miller's article introduced me to houdini in... 2018 🥴 in fairness the support has gotten better since then

[reapi_com]

Powerful yet complicated. And blur the boundary of css and js.

[rischio]

Just starting to learn web dev and I am hearing about tailwind, Houdini...basically a new technology every day...🤣🤣🤣🤣🤣wtf have I gotten myself into

[DFPercush]

If web browsers are anything like graphics rendering APIs, fixed function pipelines will go the way of the dodo. You'll have programmable "shaders" that control where elements appear in absolute coordinates and how they are styled. That's really cool for getting custom effects, but the bad part is, in this case, there's no special hardware that does ridiculous amounts of parallel processing for you. What it really needs is a direct interface to web assembly so we can cut out the javascript layer all together. I imagine it will be very useful for electron apps and other desktop-in-the-browser setups.

[TheDAZ]

More flexibility with borders and adding type to CSS for better animarion is very sweet, but for the rest I think it just add more confusion and encourage people to use JS for things that should be done with CSS, all of that wile being extremely verbose. Don't know if it will be such a huge thing

[whimsy]

Goddammit now I'm gonna have to keep track of three different Houdinis in theee different contexts

[Arttyor]

Saying this will change CSS more than grid or flexbox is such a overstatement

[rjmunt]

I'm guessing paint is more performant because the js runs in a different thread?

[chrs-wltrs]

I don't understand enough about this to be excited, but it sure sounds neat!

[garveziukas]

I feel like those are not going to be used all that much manually but it will be a big feature in frameworks and libraries

[Coding_knight]

bro you might wanna ease on the click bait like titles 😅, besides that awesome video 🤟 as always