CSS @property and the New Style

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

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

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.

e.g. https://developer.chrome.com/docs/css-ui/houdini

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.

https://css-tricks.com/exploring-property-and-its-animating-...

You will particularly like the Airport number/timer flip display type example.

I've been out of web development for awhile, and it took me way too long to figure out what this actually does. I don't think the article does a good job describing it.

From what I gather, this new feature lets you write:

    from var(--gradient-angle)

Instead of just a raw value, like:

    360deg

And the former effectively gets replaced with the latter, sourcing the value from where you defined it in a `@property --gradient-angle {...}` block.

Plus there's the `inherits: false;` bit. I'm not sure what to make of that. What it does is clear enough but I don't understand why. CSS selectors already let you control inheritance. Now you can control it from a second place? I don't follow...

Also, why do I have to define the type in the @property block? I don't have to define types anywhere else in CSS. The browser can see where the @property is used, why can't it infer the type from that?

This website makes me happy.

I've always loved noodling with CSS. After a decade+ of web dev and through making a career of web stuff I learned how much people seem to hate CSS.

I can pour countless hours into exploring and tinkering with hand rolled HTML+CSS. Deploying it just to see how it feels for real on my phone. And 99% of it all never going anywhere.

I guess for most people that's called a waste of time. Well this site sure does make my day =)

I find the animations make everything look like an 00's display ad. In a bad way.

Really hope this aesthetic doesn't catch on.

PFM... Pure f*cking magic is definitely how I feel about some of the things that can be done with CSS animations. Unfortunately, it seems so specifically tuned to CSS and CSS alone that it's hard to learn and conceptualize than doing things via JS programmatically. I just don't think in those terms. I have enough trouble with all the options for css flex usage.

The author has an enthusiasm for a new piece of CSS that I haven't seen in a solid decade. I appreciate it a lot. In my 20s I would have tinkered with the possibilities of this thing for hours/days. Trying to get stuff to work in CSS brought me joy. Now it's kind of easy, thanks to flexbox, grid, and the fact that most websites and apps follow standard design principles. We've "solved" web UI, for the most part.

Just remember that because you can doesn't mean you should. When super bright blue LEDs came out every damn piece of hardware had them just to show their product is new but it didn't add any value to the user.

This demo reminded me of 2001-2002 when I was hanging out on forums about Macromedia Flash: people were making crazy demos with a mix of hand-drawn shapes, animations and ActionScript.

What you can do in modern HTML+CSS+JS is incredible. Too bad people bury it down under millions of layers of frameworks and code transformers.

The prior submissions from this domain never got traction but smooth them are also pretty interesting and educational:

https://news.ycombinator.com/from?site=ryanmulligan.dev

The average Tailwind user can't comprehend this.

While the demo is interesting from a technical standpoint, please don't make buttons animate like this. It seems like everyone is adding nasty purple gradient borders to everything and now they want to animate it. Just because you can do this doesn't mean you should! I'm getting tired of writing custom CSS to remove distracting styles like this from websites.

I'm so glad I work backend...

Is there any software that can generate CSS visually by combining nodes in a graph, akin to shader graphs in game engines? (https://unity-connect-prd.storage.googleapis.com/20200902/le...). It'd be so useful for stuff like this.

From https://www.w3.org/Style/CSS/

> Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

I think somewhere "simple" got lost unfortunately.

At some point it seems like folks working on CSS have a “we need to be paid so let’s add more features”.

Seems pretty gibberish. Theres already CSS vars and a bazillion less/sass/css-in-js preprocessors.

Who really needs this? Why make the spec so complex?

Is it wrong my first thought of this is that it's too complex for me, but I'll tell ChatGPT what I want and it can generate the effect I want with the @property stuff I don't understand.

This must be the mentality of new CS students.

This seems like we will need some wrapper libraries around this. It's super cool, but also super complex, and I am not sure you want all this complexity in your codebase.

It remind me times when I participate in development of VRML Engine. VRML can include JavaScript, but it has timers & interpolations of almost anything (coordinates, texture coordinates, any properties of transformation like angle or axe of rotation, scale, etc) without using scripts. And even can process input events without scripts! It is possible to create simple 3D game without any "real programming" in VRML.

as somebody who spent many years writing "regular" css, this is magic

i wonder if we start to see the "css engineer" job posts sooner or later

Wait, so `@property` isn't scoped by anything else other than the variable name itself right? That means an explicit single global scope for variable names, which is not a new thing but never affected the actual usage until now. I can easily imagine a future where variable names are mangled just like class names...

Here's a @property-based complex animation that I made recently https://indutny.github.io/on-call-rotation/#sindresorhus,jam...

I saw the demo CSS and remembered why I stay away from frontend development. So much for so little

CSS - a language invented to make styling webpages more accessible than regular code!

As an aside, modern CSS would be useful in a non-web configuration language role too, but almost nobody seriously considers it --- instead preferring the usual ad-hoc mix of JSON, YAML, and TOML.

It is a crapload of CSS for a single button, that's for sure. But today we learned some new things. Thanks for the article.

At this point we really need a CSS blocker because it's going to be used to plaster ads and annoyances all over websites that used to require javascript and were easily solved by blocking JS by default. CSS is becoming so complex that it'll be as much of a security risk as JS.

Preferably a blocker that allows a sane subset of CSS so that normal formatting isn't impacted.

How do we unit test such code in CSS?

CSS is turning into Flash.

What the hell, CSS has types now?

Just so everyone understands what this is... they've added typed variables to CSS that can be passed down to children, so CSS is just converging even more to SCSS and friends. The button is flashy, but not really relevant.

TLDR: you didn't actually need @property to do any of this magic.

Neat! Okay, wake me up when we have native CSS mixins.