5 ms·
That is no longer true! You can do it in CSS with a combination of `@starting-style` and `transition-behavior: allow-discrete`. [1] Another gotcha you'll run i
by jakelazaroff 10mo ago
That is no longer true! You can do it in CSS with a combination of `@starting-style` and `transition-behavior: allow-discrete`. [1]
Another gotcha you'll run into is animating the height. A couple other new features (`interpolate-size: allow-keywords` and `::details-content`) will let you get around that. [2]
Modern CSS is awesome.
[1] https://developer.chrome.com/blog/entry-exit-animations https://developer.chrome.com/blog/entry-exit-animations
[2] https://nerdy.dev/open-and-close-transitions-for-the-details-element https://nerdy.dev/open-and-close-transitions-for-the-details...
- llmslave2 10mo ago@starting-style Has less than 90% browser support making it a non-starter for the time being at least.
- jakelazaroff 10mo agoIt'll just degrade gracefully into not animating the element's entry, so unless the animation is somehow crucial you should still be fine to use it. If you really need to detect whether it's supported there are hacky methods: https://www.bram.us/2024/07/11/feature-detect-css-starting-style-support/ https://www.bram.us/2024/07/11/feature-detect-css-starting-s...
- bryanrasmussen 10mo agoI agree, but must also observe that I have never met a designer who was willing to admit without a knock-down drag-out fight that any animation they put in was not somehow crucial.
- mikedelfino 10mo agoThe trick is they'll see it working for themselves. :)
- sfn42 10mo agoI've never met a designer who wasn't completely fine with my suggestions for more pragmatic solutions. Like just styling a default scrollbar instead of implementing my own scrollbar to make it exactly like the design. Using a default drop-down menu instead of rolling my own just so I can round the corners of the selects. The designers I've worked with are fine with these things. We have more important things to work on than small style details. We can go back and change these things later if anyone actually cares, but generally nobody ever does.
- bryanrasmussen 10mo agoI've never met a designer who cares how it gets done but I have hard time believing they were OK with the corners not being rounded as per the design. They may agree on shipping without the rounded corner, as long as the ticket to round that corner is registered. I suppose though that we have just had very different life experiences, as that is what the HN guidelines would require of us.
- whstl 10mo agoI think you're both right. I have also met a lot of completely unreasonable designers that would insist on the most minimal things (even to the detriment of usability), and would act like assholes towards developers. I have also had situations where developers would beg to work with a certain designer because their experience made development a breeze, even for complex layouts. Funny enough, the projects where this designer worked would always get done, and the visual result was always great.
- llmslave2 10mo agoIt depends on what you're doing. It's common for clients to wonder why the design they saw had fancy animations yet they don't see them on their MacBook...
- paulddraper 10mo ago91% of usage for browsers tracked by caniuse [1]. The biggest gap is Chrome versions > 2 years old. [1] https://caniuse.com/?search=%40starting-style https://caniuse.com/?search=%40starting-style
- RussianCow 10mo agoYou say awesome, I say layers upon layers of opaque incantations I have to remember. Thank god for LLMs.
- nchmy 10mo agoAnd how might you do this in Javascript?
- bryanrasmussen 10mo agothey just said "LLMS"!
- nchmy 10mo agoMy point was that js would be vastly more complicated than these html/css "incantations".
- davidmurdoch 10mo agoMost front end engineers could do it in JS without ever having to look something up. But the CSS to do it is still obscure to most.
- nchmy 10mo agoso, why not answer my question and say how you'd do it in js...?
- deleted 10mo ago[deleted]
- pikuseru 10mo ago“Layers upon layers of opaque incantations” You’ve described software.
- sfn42 10mo ago
- wvenable 10mo agoI can't see how a bunch of esoteric incantations are better than just some straight-forward easy to understand and follow JavaScript.
- yurishimo 10mo agoBecause you need 20x the JS to do the same thing and it’s still not hardware accelerated. These new CSS properties are well supported and will only get better.
- econ 10mo ago<span onclick=" banana. classlist. toggle('hidden') ">click</span> <div id="banana" class="hidden">loris</div>
- spartanatreyu 10mo agoThat's a poor example since it isn't accessible and doesn't work if a pending JS or CSS network request is preventing it from functioning. This is the HTML version, it's not susceptible to halted execution, and it is accessible. <details> <summary>Click</summary> loris </details>
- paulddraper 10mo ago1. CSS is declarative, so it avoid subtle bugs 2. CSS integrates better with HTML, as it has selectors to automatically bind to elements (yes there custom elements for JS)
- onion2k 10mo agoJS animations run on the main thread with everything else, so if your browser is busy doing something else the animation ends up being janky. Using CSS solves that problem.
- dekoidal 10mo agoIs CSS too hard to learn or something?
- port11 10mo agoThe major issue with this is that modern CSS is almost its own job, to the point we used to have Interface Developers at some place I’ve worked (HTML+CSS specialists). I did frontend for over a decade and eventually lost the train on CSS changes, I don’t even know what’s going on there anymore. It’s still awesome, but it’s becoming increasingly silly to ask someone to know modern HTML, CSS, JavaScript, Typescript, some build tools, a couple of frameworks, etc. The amount of JS we ship to clients is a reflection of cost-cutting measures at your workplace, not that every FE dev shuns CSS.
- jakelazaroff 10mo agoWhen I started dabbling in web development, writing HTML and CSS was already its own job, and professional JavaScript developers basically did not exist. This was before TypeScript, before Node, before Ajax, before React or even jQuery. If anything has exploded in complexity in the intervening years, it's the JavaScript part of the equation. I agree that it's increasingly silly to ask someone to be an expert in all of frontend. But the primary driver of that is not all the new CSS features we're getting.
- tomhallett 10mo agoAgreed. Having a "HTML + CSS" engineer on the team was largely due to the number of hacks needed to make css work -- purposely adding invalid html that would only be parsed by specific browsers, ie5 vs ie6 vs netscape being wildly different (opera mobile was out of this world different), using sprites everywhere because additional images would have a noticeable lag time (especially with javascript hover), clearfix divs to overcome float issues. To be clear, I'm not saying "things were harder back then" or "css is simple now", but things with CSS were so wild and the tooling was so bad, that it what a unique skill of it's own that is less needed now, and the shift has been for people to focus on going deeper with js.
- econ 10mo ago<sarcasm>I'm an expert -> just write everything in static html, use css only where defaults are neglected. After relevant tables in the db are updated generate a new static document. Only if that won't fly use json but feel appropriately dirty when you do.
- frizlab 10mo ago* Only works on chromium browser for now. ** Works badly even on chromium browsers (granted I was doing weird stuff, but the animation did not work properly). I estimate that in a few years we will have animations working properly and mostly everywhere on details elements. Not before.