I'm not a web developer, but I've built toy websites (without frameworks) and can do basic things in a few web frameworks. I remember when CSS was "invented". After a small amount of time, I could reasonably fit all of it in my head without needing to look anything up.
I looked at the CSS for the first codepen example, and it looks like gibberish to me.
Should we really have a mini animations programming language in the styling system? This seems like a bit much. More than a bit much.
Can't this be done with Javascript? I get that a lot of people have a knee-jerk negative reaction to using JS for everything, but it's a programming language... this is kinda its job.
Wow, reading this, I can _feel_ my brain resist an unfamiliar concept. I recommend people read the MDN article linked to in the first sentence before moving onto the examples in the blog.
I'll have to play around with @property myself to get a sense of how it works - knowing esoteric CSS features is a superpower if you've got a complex UI to implement but wanna minimize JS dependencies.
As someone who really enjoys working with CSS, but also working with colleagues who struggle with it, I strongly recommend Kevin Powell’s YouTube channel.
He has touched on exact feature a few times, here’s a video he uploaded a week ago that shows one useful feature that registered properties enables: https://youtu.be/U8NykwZNbGs
I'm excited about the recent work on CSS (particular Houdini). I haven't felt like this since I got a book of IE 5.5 features. Don't get me wrong -- CSS has gotten a lot of new features over the last 14 years, but they've been like basic things you kind of expect in a style framework, like new layout options or variables.
But IE devs were unhinged. You could build JS code as a module and attach it to elements using CSS.
Finally we're getting those kind of unhinged features again.
A nice short article. If you want to dive deeper with lot more examples, quite a lot of them much simpler to get to have an idea faster, I'd like to suggest an old article from CSS-Tricks. The article is from 2021 but still very valid and well-done.
kelnos ·5 days ago
I looked at the CSS for the first codepen example, and it looks like gibberish to me.
Should we really have a mini animations programming language in the styling system? This seems like a bit much. More than a bit much.
Can't this be done with Javascript? I get that a lot of people have a knee-jerk negative reaction to using JS for everything, but it's a programming language... this is kinda its job.
Show replies
ikesau ·6 days ago
I'll have to play around with @property myself to get a sense of how it works - knowing esoteric CSS features is a superpower if you've got a complex UI to implement but wanna minimize JS dependencies.
Show replies
nraf ·5 days ago
He has touched on exact feature a few times, here’s a video he uploaded a week ago that shows one useful feature that registered properties enables: https://youtu.be/U8NykwZNbGs
There’s also this article that breaks down registered properties with an easy-to-follow example: https://moderncss.dev/providing-type-definitions-for-css-wit...
treflop ·5 days ago
But IE devs were unhinged. You could build JS code as a module and attach it to elements using CSS.
Finally we're getting those kind of unhinged features again.
e.g. https://developer.chrome.com/docs/css-ui/houdini
Show replies
Brajeshwar ·5 days ago
https://css-tricks.com/exploring-property-and-its-animating-...
You will particularly like the Airport number/timer flip display type example.