CSS @property and the new style

Performance. JS would need to run 60 times a second without hiccups. But JS is single-threaded, therefore any time something clogs your main thread you'll skip a frame. Plus, as incredible as modern JS engines are they're still not as efficient as the native code, which leads to extra CPU usage and that spells trouble for battery life.

Can't this be done with Javascript?

I welcome opportunities to avoid javascript in my sites, even if it's more work for me. It makes life easy for visitors who prefer to disable javascript, thereby avoiding many of the exploits, trackers, etc. that plague the web today.

By the same token, I appreciate sites that do not require javascript.

You said what we were all thinking. There was a lot of debate when CSS introduced these animation properties; I didn't have too strong opinions about it. But is has morphed into something rather complex...

Needing a full feature programming language for things purely related to the page aesthetic is not a great idea.

The reasoning: some hosting platforms allow you to personalize your personal page changing the HTML and CSS bits, but not the JS - for security reason, obviously. Itch.io is an exmaple of that, where you can personalize your game and profile. By using CSS animations I can create cool effects without any of the security concern that allowing access to JS gives me. It makes sense and it's nice to be able to do so.

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?

I don't understand this sentiment. If you are not a web developer, and in particular not a frontend web developer, then you probably aren't building html elements with these fancy effects. And if so, then why does it matter what advanced things CSS is capable of?

Can't this be done with Javascript?

You can totally do this with javascript. You can plop in a canvas, and use webgl to program this effect on the GPU, like a real graphics programmer. You would have to recreate all accessibility features of the html button on your own. Is it going to be easier? I doubt it. But you certainly can.

welcome to modern web dev in a nutshell

Right, so you don't really understand the problem area and don't know the syntax, so think that something that you can't immediately understand must be a negative change.

There are still great use cases for using JS to handle animations instead of CSS, such as creating novel, dynamic images or 3D models in a canvas element (particularly when you want it to be interactive in anyway) or to animate SVGs.

My understanding of CSS animations is that they are particularly optimized to run more efficiently and it’s also helpful that it runs outside of the JS runtime, which frees it from any errors in the JS or it adding to the CPU load that may already be chugging along on the page.

Additionally (and this is old info so it may be outdated), using things like `translate3D()` instead of just `translate()` in your CSS will engage the GPU to handle whatever your instructions are, making everything smoother and further unburdening the CPU. This is from my own memory of things I read more than 10 years ago, so it’s possible that even more CSS functions use the GPU at this point, but I’ve not looked it up since.

Anyway, tl;dr: there are performance benefits to using CSS instead of JS for animations.

What you will be animating are styles. The programmatic aspects of animation are fairly straightforward. It just makes sense for it to be in CSS no?

After reading through the mdn article I'm hopelessly confused.

Isn't that literally just css variables?

werent they cascading too, so the variable could be "overwritten" via classes etc? Isn't that even how tailwind does bg-opacity etc?

Wow, reading this, I can _feel_ my brain resist an unfamiliar concept.

Ha, thought it was just me.

This strikes me as very strange. I'm not sure what the benefits are over just using CSS transforms.

Same. I think this article does a terrible job at explaining it.

From the MDN article, it sounds like it's basically the same as plain old CSS variables but scoped to specific elements and/or children with some additional constraints so that it has some awareness of CSS units like angles, percentages, etc...

I probably won't be using it though. Such slight benefits don't justify added complexity and compatibility tradeoffs. I try to avoid using unnecessary new fancy syntax. I kind of stopped caring about new additions to CSS after CSS variables.

I'm sure it's very difficult and stressful to be a surgeon, but once you receive that big paycheck at the end of the week/month while sitting comfortably in your expensive home with a view, scrolling through your stock portfolio on your phone, thinking about what shares/companies you will buy next and where your next holiday will be, it can't be that hard to recover!

What if I need to draw customer’s attention to something? These things do have use cases just like real world neon signs.

It's Flash all over again.

What developers _should_ be doing is disabling such animations if `prefer-reduced-motion` is set in your browser. This way, both people who have trouble seeing stuff when there's too many complex color animations as well as people who "just don't want to deal with all that mess" can specify what they want to see, and the code can change based on their preferences.

Unfortunately, I believe for "custom jobs" like this you'd need to explicitly state that you don't want it to occur because it won't happen by default, unlike some other stuff that's more standard in the browser.

At some point, it will be nice to have an "Information Experience Palette" that is in your locked .env.pii.llm personal AI firewall, gateway. All of your digital DNA is held, managed, protected, and preferred by you, in your own, Sound Voice.

So ultimately, you apply the view to the page and the page conforms to your ingestion preference.

I should carry my own 'css' and be able to just pluck any URL and let me speak to my filter on how to display it.

And it will provide a new way to interact with my browsing history - allowing me to recall how that thing from HN from 3 months ago can tie into this thing, and augment my understanding when I can view them next to eachother... and I can categorize them into tags of the same ilk and have a mental rolodex that lets me re-view my browsing history in the UX lens of my choosing.

/edible.

My take is the opposite. Please do it, let's stop everybody conform to the same aesthetics, the same button, the same effect.

Please do whatever you feel like doing. If you like the aesthetic and it fits the overall design, why not? Don’t let some HN commenter tell you what you can’t do.

It feels like "blink" all over again, although much prettier. I'll probably feel differently about that last part really soon.

It really is a whole alien domain to itself. The syntax being so foreign to most developers doesn't help. But it's so powerful, incredibly powerful, and in most browsers, extremely efficient.

The extremely vast majority of web app developers don't need 99% of what CSS can offer. But it's neat to know it's there.

This is why I hired a designer who knows how to code HTML + CSS (but not much else). I can throw some un-styled elements on a page that are hooked up to the business logic, and the designer can style them however they want. We can iterate on polishing the UI later if needed.

It's a declarative paradigm like that of SQL. From a purely imperative perspective, either does take some time with the spec and some experimentation to grasp as a paradigm, but it's a way of thinking worth the study for more than just being able to use SQL and CSS. (Which are not without worth in their own right!)

In this particular case property is part of the CSS Houdini APIs which allows you to manipulate CSS from JavaScript in a much more powerful way than before. https://developer.mozilla.org/en-US/docs/Web/API/Houdini_API...

JS is always, always my last resort. The amount of JS I've stripped out of code in the last few years as CSS features have arrived in most browsers. I love getting a page to "JavaScript Zero".

If they could just decide on the name[1] for the CSS "masonry" feature so we could finally have that without scripting, I'd be very happy.

[1] https://github.com/w3c/csswg-drafts/issues/9733

I really like CSS. I find it easy enough to understand. It has grown in complexity over the last 10 years, but now you can do the stuff from 10 years ago a lot more simply. And all the code from 10 years ago still works.

After a decade+ of web dev and through making a career of web stuff I learned how much people seem to hate CSS.

Yeah because as soon as you're not tinkering with only your particular combination of device/screen/browser/browser version/OS/OS version but have to implement something reasonably widely supported all the subtle "we're not following the specs" get really annoying to deal with.

Microsoft used to be the most notorious specs violator, today it's Apple.

I think it's fun to play with, and new features are always interesting to explore. But I often get the feeling that CSS features come from a place of "Hmm, what else can we come up with?". I guess there must be a forum with serious discussions somewhere, that I am missing.

people seem to hate CSS.

The people who are vocal about hating CSS are mostly just people who don't understand CSS.

That's perfectly OK. I don't understand APEX, or AP/L, or the framework-of-the-day. But I do understand CSS, and because of that I enjoy it quite a bit.

For some people it clicks, and for other people it doesn't.

The rub comes when someone for whom CSS doesn't click is required by their job to do things in CSS. Naturally, they hate it. I'd hate it if my job made me maintain an Active Directory installation. Not my thing. But CSS isn't inherently bad.

Mine is still pretty minimal, but I've been making a point of using more hand-rolled CSS myself to get a clearer idea of how to work outside of tools like Bootstrap and Tailwind (which I have more direct experience with in professional settings).

Coming from also writing frontends pretty much entirely with JSX (in prod, especially), my understanding of the query logic has generally improved by a lot ever since I happened into a separate rabbit hole on Web scraping.

My related hot take is that the query logic wouldn't be nearly as much of a pain if professional settings used semantic elements more. (Never mind how much bare HTML has defined behaviors you don't then have to maintain, like modals.)

These are things people are already doing in native app code, so we've got to have some web equivalents or everyone's going to be doing everything in walled gardens.

I thought at first that codepen trying to upsell me.

Same. I thought it was neat (though a bit ridiculous) that the codepen examples are doable just with CSS, but if I saw the first call to action button on a website, I'd think it was tacky and cringey.

These sorts of things scream marketing and manipulation. Let me read your site and decide what I want to do. Don't try to distract me by annoyingly drawing my attention to the thing that will make you money.

What are these standard design principals?

What we solved? Layout? Still need to go back a re read some shady aspects of flex and grid. Sticky positioning is one of the most useful features ever; yet if for any any reason doesn’t work it’s very hard or almost impossible to debug and understand why(does any parent up the tree have any overflow?), and good luck finding any good documentation explaining corner cases. Without dev tools and a lot of wasted clicks it’s impossible to debug css from source code alone, you have to inspect that element at runtime. Most native inputs still have very limited styling capabilities(please don’t tell me it’s a good thing), we waited years for native modals and popovers. Last time I checked can’t still animate from display none to block with height. I can go on for days, my point is how did we become so accustomed to all the problems css have and lost any bit of criticism?

I’ve been doing web stuff since 2003. But tailwind is nice and has its benefits.

That said, I’m always shocked when I’m interviewing a front-end candidate and they don’t know CSS. Too many rookies out there that haven’t used anything outside of styled components and tailwind.

Dont fret, there will be a 192 character long tailwind classname specifically for this.

As an avg tailwindcss user, and lover, I concur.

You need @property for the interpolations between values for the animations

CSS properties already existed before this new feature (@property). You could already for instance declare a property "--my-prop: 10px" and use it elsewhere "var(--my-prop)".

This new feature, @property, allows you to define your property ahead of time, what "type" (syntax) it should accept (percentage, angle, color, etc), whether or not the property should inherits values from parents, and give it a default value (initial-value).

This means that if a property is declared as an angle type, and an element says "--my-prop: 5px" it will be ignored. Previously, this would be valid and depending on where you used it it might have unintentional side effects. It also means you can specify something like "--my-prop: initial" and it will use the default value (initial-value), without needing to know what it is exactly.

Thank you. Why the article doesn't describe what @property does or how to use it is mind-boggling. It's completely obfuscated by the overly complex example.

The big win for me has been that this feature let's you animate css variables. A place I used it a while back was a little experiment where I tweaked youtube's design to look "neon" -- eg all the lines and stuff were bright red and glowed. I designed it so the hue of the primary colour was controlled by a single css variable. I then thought why not make this extra insane and animate the hue slowly through the spectrum so that the colour of the page is changing slowly in the background! Apparently you can't animate a css variable without @property. So it's not just letting you use a css variable instead of a raw value, it's letting you animate the css variable -- and, in turn, all the places that css variable is referenced! So with one simple `@keyframes neon-flow { from { --dc-neon-hue: 0; } to { --dc-neon-hue: 360; } }`, I animate everything -- all the primary colours, all the box shadows, etc.

`inherits: false` lets you control how the property is inherited. For example, in normal css, the property `color: red` is inherited. If you set it on a div, all elements in the div will have `color:red` unless they specifically override it. But, say the property `display: flex` does not behave this way. If I set it on the div, only the div becomes display flex. This is exposing the ability to control how your custom property is inherited -- like `color` (`inherits: true`) or like `display` (`inherits: false`).

I believe the type is there so that it can at static time know what to animate. Since a css variable can be anything, unlike a css property. E.g. `from { color: red } to {color: blue}` it knows the types because of the properties. With css variables, it needs to be told what the types are.

Added fun fact: the type syntax is actually the same syntax you'll see on like mdn! https://developer.mozilla.org/en-US/docs/Web/CSS/color#forma... . So it's like exposing the internals of CSS as an API any developer can use :)

Lol that’s how css3pie (http://css3pie.com/) worked, right?

Unclear to me wether you are using the term "unhinged" in a positive or negative way

Hand-written HTML+CSS+JS can scale, but cool-react-demo.dev is more impressive for all sorts of reasons. You also can't blame people for chasing the skills that get you hired.

Lots of factors got us into this framework and transformer hellscape, and the 'people' that made is happen are right here. I'm not without some blame within my own organization for sure.

New Tailwind classes "look-good-mobile md:look-good" /s

It me. I write CSS. I also write javascript, html, vue code, react…

We just haven't needed a lot of pure CSS in the modern era. A lot is abstracted away in frameworks where you can simply set variables to customize the look and feel.

All websites also kind of look the same now, which isn't the worst thing, but it definitely means less need to mess with CSS.

We just call that "front end engineering"

Always has.

You can see them in the specs.

You might have a variable that has the type: A|D, or maybe even A&D.

And you might have a case where a rule can interpolate values of type A, B, or C, but not D.

The @property syntax allows you to say: This variable will only ever have a type of A, so now it can be animated.

You don't unit test CSS.

You E2E test it, and you visual regression test it.

What? Blue LEDs were much cooler! I even modified hardware to swap out green/red for blue (c1997) cause they were so awesome. I have to put a small V-drop cause they were so bright.

This seems like a bad path to go down. Even if ChatGPT were a perfect developer, being able to understand code would be important because communicating specs is hard