Hacker News Reader

Comment by kelnos | Hacker News Reader

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.

View on HN

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

You aren't the only one thinking this. The surface area and possibilities with CSS amaze me as one of those web developers who had a solid understanding years ago and have returned it recently. The sentiment is a response to feeling overwhelmed and a sense of reduced competence. You can accept it and learn or rail against it. The latter often happens for a while first.

With web development, I've always thought that there is an element missing for many devs: design acumen and appreciation (I need better terms.) Just look at the site linked from this post and you see an attractive personal site. Most devs struggle with these aesthetic elements.

Desktop development is fairly constrained. As an example, devs can make good or bad decisions around use of the toolkit, but it's less of an open canvas than the web. A lot of the expanded scope of CSS can be more easily exploited if you appreciate the design aspects or have designers creating some target design for you. Putting these capabilities in front of devs without those elements doesn't lead to much success which is another factor driving sentiment.

It's like designers are the very first corner to cut. Or the dev is expected to also be a designer. It's a very different skill set. I'll build your mock-ups, or copy the look and feel of something else, but I can't design my way out of a paper bag. My brain just doesn't seem to work that way.

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.

The way animations are done in react native for instance, is that you use JS to define the animation and send it to the native code which actually executes it.

JS should just do the same in the browser instead of relying on an arcane language not designed for this

Good news! You can with the Web Animations API.

Which are CSS animations underneath

Shhh, don't tell him that.

Yes, but you define them with Javascript rather than in CSS which is a key difference since the syntax is more intuitive for some (myself included)

So since the original comment was questioning the necessity of animations in CSS, and JS is essentially using CSS animations for many things, I'd say the answer is yes. It's also a great way for UI designers to use subtle movement to hint at actions/status/next steps/etc without having to execute any JavaScript. When you've got a purely visual task, I'd say involving a general purpose programming tool is the unnecessary part— like using sed or the like vs opening up a repl in Python or whatever.

No - CSS and JavaScript are two ways of defining the same thing, an animation. Safari runs its accelerated animations with CoreAnimation - is CoreAnimation a CSS animation?

Just recently I had to code a little but complex animation and I ended up using the web animations API. It's nice, it was a lot less code than the css counterpart.

But, if I* have to write this same animation in two years and @property is widely available, I'll reach up for that first.

*To be honest, it will be 100% an LLM that writes it for me.

JS animation libraries let you declaratively define and hook into CSS animations.

"Arcane language" not only is CSS one of the core languages of the web, but also if you find this arcane I wonder what you think of the "native" code that react native is generating for the animations.

CSS as an animation engine is completely acceptable, and it's limitations (like the one in TFA) are slowly being pushed back.

  >"Arcane language" 
  >"native" code that react native is generating for the animations.
  >CSS as an animation engine is completely acceptable, and it's limitation
  >TFA

No way that pun is intended, but CSS is kinda a Tunable/Timed Finite Automaton; but being of a lower class of technically-capable expression than Javacscript, which is of a higher set of class of automata.

Whether a language is arcane or not depends on the levels of comfort one is familiar with the language, or how approximately familiar someone is with similar languages.

It explicitly is designed for this, what are you talking about

Also just moving problems to the graphics card. The common rotate, transform, and so on, are all classic graphics hardware tasks.

You still need the CPU to tell the GPU what to do

Right, so you have simple statically defined optimized routines written in c/c++ calling the GPU, like any high performance graphics engine.

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

Is there a future where CSS’ expanding surface area leads to exploits and tracking? For instance, some time ago I saw an article about how font face rules can be used to fingerprint users

https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and...

They try to sandbox it.

There are more clever ways now. Like... everything you interact with is a binary search into a projection of your (2^n-interaction) "guess"-ed/history.

If you interact with it, then it is assumed that you can see it.

Even detecting if the room is generally lit or not via the Ambient Light API can be paired with bright and dark elements to ping flashes off your face, in a dark room, to read whether or not elements were of that certain color.

But lets scrap :Visited and use arcane browser implementations and user behaviors; even something as innocuous as zooming slightly in or out is a session-persistent signal. The browsers explicit and even _inferred_ zoom level can be leveraged. A few irrational numbers and difference in spec implementations and your zoom level on Compromised_Site_A can identify you exactly from Compromised_Site_B even without Javascript.

But let's reset zoom between domains. Easy? sure.

But something still has to get painted to the page, like images, that could be cached....depending on how long they have been visited, and from what domain, and from what order. And the timing between all those are almost certainly unique to few, and sensitive to all.

If you load a thumbnail from Bad_site_a within 100ms in a country that blocked the original resource....thats a paddlin.

Those are just the first few, I could go on.

More than half of the examples you listed only partially use CSS as part of the exploit chain and could be done without CSS at all. For instance, you can certainly flash the screen but CSS is never going to be able to, on its own, read and exfiltrate the data necessary. You're relying on things like access logs at that point.

  CSS is never going to be able to, on its own, read and exfiltrate the data necessary.

CSS knows a lot, and it can send it back via image requests, triggered in states through animations, 'lazier'-loading, unqie font-choosing, etc.

https://blog.sheddow.xyz/css-timing-attack/

  You're relying on things like access logs at that point.

Well, yes. The timing and unique request path make identifying possible. And CSS can be dropped in context by other users, crafted to refer to a different domain, so CSS worms can definitely ex-filtrate data without the webmaster being evil.

uBlock, I exfiltrate: exploiting ad blockers with CSS

https://portswigger.net/research/ublock-i-exfiltrate-exploit...

Yes and yes. You’ve already pointed out fingerprinting, but there are other attacks that can be done.

See:

- CSS keylogger, 2018: https://github.com/maxchehab/CSS-Keylogging

- OWASP cites CSS injection as a mechanism for XSS and data exfiltration: https://owasp.org/www-project-web-security-testing-guide/sta...

Luckily we haven’t seen new classes of attacks here, but being concerned about attack surface of any browser technology is valid and reasonable.

Honest question. Is really "animations" a thing related with styling?

IMHO, I see all those bells & whistles more related to scripting than to styling. I'd prefer to be able to navigate with Javascript disabled and not having to suffer some superfluous animations, but maintain the styles.

At least in terms of animations being superfluous, there's an accessibility setting to reduce animations that at least built in browser CSS animations can reliably respect, whereas with hand-coded Javascript animations, you're relying on each individual author to write code to respect that setting.

I hope someone chimes in to correct me if this is wrong, but AFAIK CSS animations are not automatically disabled by toggling such a setting.

Original idea puts it under the authors control to add @prefers-reduced-motion media queries.

Might be that some browsers do this anyway, otherwise it would be easy with a user script or user style sheet.

This article argues for the spirit of the spec:

https://css-tricks.com/nuking-motion-with-prefers-reduced-mo...

> “animation isn’t unnecessary.”

It has a point, intrusive animation's main bastions are not CSS-based anyway.

For example, there seems to be a continuous (JS- and HTML-based) cat-and-mouse game that makes me require an ad blocker to disable autoplay videos on news sites, regardless of browser preferences.

This part is like the DNT header all over again, incentives don't align.

And the lesson should be that CSS is the most benign battle site for this issue, because it is customizable and not yet locked down behind anti-debugging and obfuscation techniques.

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.

Counterpoint; anywhere but the web, using the same application programming language to define styling and visuals is normal. I get your point though, JS is still an all-or-nothing thing in most use cases.

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.

Reminds me of the rust into linux debacl3

Great feedback IMNSHO. But the key is CSS (cascading STYLE sheets)...

You and I are NOT designers if I may be so bold. In 1996 I was one of about 100 people on new and MAJOR website/application build. From scratch. My role: Billing Lead. As a "full stack dev" only my eCommerce insights were needed from me. It is called FOCUS.

As a StartupBus alumnus of three treks the model was brilliant: Build teams from three skill sets: Devs, Designers, and BizDevs. Focus.

I love that the examples will not be gibberish to the designers of our day.

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?

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.

welcome to modern web dev in a nutshell

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

No, it's not what we all are thinking.

Moving work from JS to the browser’s native, polished, tested implementation with optimized performance is the right thing to do.

It does add another hurdle for Servo and Ladybird, probably intentionally.

It's needlessly conspiratorial to ascribe intention here, especially when the Servo community have already expressed interest in supporting upcoming (difficult!) standards like CSSOM

Are you seriously suggesting that the primary motivation for this feature to be added to CSS is to make life harder for new browser engines?

The thought had crossed my mind, yes. Do you think Google does anything from the kindness of their hearts, without considering Chrome's position? It's one of their most valuable assets.

> Moving work from JS to the browser’s native, polished, tested implementation with optimized performance is the right thing to do.

Of course, not disagreeing with that. It is just done in a way that is complex and cumbersome IMO. CSS is often handled by people with very little programming experience as well. I have worked for companies which gave me HTML templates, and CSS files, and my job as the developer was basically do add dynamic behavior by fetching stuff from their DB and looping over some data here and there to fill out lists/tables with actual content. To me that was very pleasant; but the guy handing me the CSS and HTML templates, had zero programming experience.

I think webdesign already is a copy-n-paste bonanza, where people find something they like, and copy it; if it gets very complicated as well. Developers are often last resort in terms of finding out why something does not work, and I fear complicated CSS after a few rounds of copy-n-paste is going painful to unwrap.

Your comment is quite unfair to the author, who explained every part of the complicated CSS ruleset. It's not a copy-paste, for sure.

I think you misunderstood. Never meant the author of the article copy-n-pasted anything. Not the commenter that I "commented" on either. CSS had grown into something a bit too complex for its own good.

kelnos> This seems like a bit much. More than a bit much.

I just said that web-design, either done by programmers with zero design experience, or by designers with zero programming experience lends itself towards copy-n-paste (from different resources online). I.e. many people copy-n-paste stuff they don't really know much about in order to make their website look decent. If the underlying technology is complex and difficult to understand, this can lead to an unholy mess that (most likely) developers will have to unwrap.

Reply on news.ycombinator.com