Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Surprising things that CSS can animate (2020)

codersblock.com

Post reply on HN
Print view View original

31–40 of 48 posts

Re: Surprising things that CSS can animate (2020)

#31

Post by autoexec »

gherkinnn wrote: post #26
autoexec wrote: post #12

None of the examples in the article work with js disabled. I'll say more generally, that as much as I love all the cool things CSS is capable of these days, I think it's gotten to the point where now I want a CSS blocker the same way I block ads and JS by default, ideally something that lets me enable only a sane subset of CSS while blocking everything else. I keep meaning to write one for firefox, but I really don't…

This reminds me of the time I removed tyres from my car’s wheels. I want the predictability of my horse drawn cart back. A wheel breaks, I just take a hammer and some nails to it. Galvanised rubber and metallurgy is something I don’t understand so it must be bad.

> This reminds me of the time I removed tyres from my car’s wheels. I want the predictability of my horse drawn cart back. A wheel breaks, I just take a hammer and some nails to it. Galvanised rubber and metallurgy is something I don’t understand so it must be bad.

I understand CSS and I've done a fair bit of webdesign myself. CSS has evolved to the point where it can be used abusively. Hell, some consider it turing complete (https://github.com/brandondong/css-turing-machine).

CSS can be used for ads, fingerprinting, and exploits. There are perfectly valid reasons for wanting a little less functionality while still allowing for some basic styling.

I mean, it's cool that there are computer games written in pure CSS and other neat tricks, but sometimes you just want a browser to behave itself even in hostile spaces. If that makes my heavily locked down browser a "horse drawn cart" I'm happy to trot forward.

Re: Surprising things that CSS can animate (2020)

#32

Post by autoexec »

bawolff wrote: post #30
beebeepka wrote: post #19

Earlier quoted context omitted.

Not sure what sort of person downvoted you. I, too, have an issue with a page about CSS tricks requiring JS. I may write JS for a living but I do browse the internet without it Edit: someone downvoted you again as I was writing this, heh. Is this even a healthy thing to do on a Saturday morning

Probably because: "i did something unspecified and now it doesn't work" is kind of an annoying comment. More to the point, nobody promised that the page doesn't use javascript, just that the techniques presented do not need js in principle.

It's just weird to me how often people who have their own websites and are perfectly capable of self-hosting demos of things that don't require javascript make the decision to instead use a website to showcase them that requires JS to work or be visible at all.

I fully understand my configuration is unusual. I don't think it's unusual to expect that a certain number of people who don't use JS would be interested in a site that offers cool CSS tricks that don't require it, so it's strange to see those same people being unnecessarily excluded. To the writer's credit they have some source available in their article at least.

Re: Surprising things that CSS can animate (2020)

#33

Post by TuringTest »

nicbou wrote: post #23
63 wrote: post #7

I always love seeing tricks like this from designers but then I never see anything this cool on the web otherwise. Where do all these great designers work and why don't I ever get to see the products they make?

If you browse Awwward-winning websites, you quickly realise that they are annoying to browse. Most of the time, I'm just trying to read text and get an answer. Everything that is not text, formatting or typography gets in the way.

You can have exquisite presentation with good choices of text, formatting and typography (including judicious use of colour, spacing and even animation and textures). A luxury printed book full of beautiful details will feel much better than a cheap paperback.

The best techniques can be applied in subtle ways to improve the overall presentation, without resorting to flashy showcases.

Re: Surprising things that CSS can animate (2020)

#34

Post by drowsspa »

Those CSS animations would be a success in the web of the old days. Reminds me of the whole rounded borders thing: all those hacks and loops to make it work in all browsers (transparent images in the corners, lol), and then finally when there's wide browser support, rounded borders were already out of fashion

Re: Surprising things that CSS can animate (2020)

#35

Post by egberts1 »

IshKebab wrote: post #27
egberts1 wrote: post #3

Yeah, I too had fun with CSS and curvy circular text animation. https://egbert.net/blog/index.html (Sorry, web access is only HTTP/1.1-3, TLSv1.3 and ChaCha-only, no Chrome access possible)

Why the weird cypher requirements? Blocking like 65% of users seems like a very weird choice.

Weird because that's the strongest setting used with the fewest (zero) vulnerabilities there.

Re: Surprising things that CSS can animate (2020)

#36

Post by sibit »

dmitriid wrote: post #25
63 wrote: post #7

I always love seeing tricks like this from designers but then I never see anything this cool on the web otherwise. Where do all these great designers work and why don't I ever get to see the products they make?

Because these animations only work in rigidly specified isolated static objects. Because god forbid any animation touches layout. Well, many of those animations like opacity changes and border animations undoubtedly force the browser to re-layout and repaint the entire screen anyway. So on an actual page you'll se stutters, frame drops and ungodly CPU usage. The only animations that will (barely) work is the `transfo…

> Well, many of those animations like opacity changes [...] undoubtedly force the browser to re-layout and repaint the entire screen anyway.

Depends on the rendering engine. With Blink opacity, filter, and transform will skip past layout and paint after the first render.

Chrome Dev Summit 2018: https://youtu.be/AB9qSUhlxh8?t=754

Re: Surprising things that CSS can animate (2020)

#37

Post by dmitriid »

sibit wrote: post #36
dmitriid wrote: post #25

Earlier quoted context omitted.

Because these animations only work in rigidly specified isolated static objects. Because god forbid any animation touches layout. Well, many of those animations like opacity changes and border animations undoubtedly force the browser to re-layout and repaint the entire screen anyway. So on an actual page you'll se stutters, frame drops and ungodly CPU usage. The only animations that will (barely) work is the `transfo…

> Well, many of those animations like opacity changes [...] undoubtedly force the browser to re-layout and repaint the entire screen anyway. Depends on the rendering engine. With Blink opacity, filter, and transform will skip past layout and paint after the first render. Chrome Dev Summit 2018: https://youtu.be/AB9qSUhlxh8?t=754

> With Blink opacity, filter, and transform will skip past layout and paint after the first render.

Thanks! Didn't realize opacity was mostly fixed. In my head it as still very problematic because I know that opacity changes are very frowned upon by device manufacturers (like smart TVs). The reasons are actually mentioned in the video:

- they "don't trigger layout and can often bypass paint" (so paint isn't always bypassed)

- "compositing is not free. If you are on resource constrained devices, you really need to watch your composited layer count"

The vast majority of devices in the world out there are resource constrained: cheap smartphones are ubiquitous. But then there's also things like smart TVs etc. Hence my reaction to opacity changes :)

Re: Surprising things that CSS can animate (2020)

#38

Post by nicbou »

TuringTest wrote: post #33
nicbou wrote: post #23

Earlier quoted context omitted.

If you browse Awwward-winning websites, you quickly realise that they are annoying to browse. Most of the time, I'm just trying to read text and get an answer. Everything that is not text, formatting or typography gets in the way.

You can have exquisite presentation with good choices of text, formatting and typography (including judicious use of colour, spacing and even animation and textures). A luxury printed book full of beautiful details will feel much better than a cheap paperback. The best techniques can be applied in subtle ways to improve the overall presentation, without resorting to flashy showcases.

I agree with you. I'd love to see good examples of that, because I struggle to create that sort of websites.

For example, how would you redesign the Python docs to feel like a beautifully typeset book does?

Re: Surprising things that CSS can animate (2020)

#39

Post by bouke »

philistine wrote: post #10

I watched all of those animations on Safari. The constant reminder that you wouldn't see anything on Safari had me doubt my sanity.

The only thing that didn't appear to work for me was the code selection. It would only allow selecting the whole code block, and not toggle to allow selecting only a portion. Other than that the animations appeared fine to me as well.

Re: Surprising things that CSS can animate (2020)

#40

Post by 082349872349872 »

drowsspa wrote: post #34

Those CSS animations would be a success in the web of the old days. Reminds me of the whole rounded borders thing: all those hacks and loops to make it work in all browsers (transparent images in the corners, lol), and then finally when there's wide browser support, rounded borders were already out of fashion

That's usually the point of fashion

Meta-fashionistas add a deliberate Stilbruch (style-break)

Post reply on HN