Using scroll-driven animations, if I wanted to take these shapes, how could I start them in this position (the dark ones) and transition them to the end position (the lightened ones).
Ideally, the shapes are a part of the three columns, and the animation would be sending them to their "real" position.
This seems like it would be somewhat easy if it didn't have to be responsive.
@jensimmons performance metrics in Safari. We don't know what the performance bottlenecks are for at least 50% of Shopify mobile traffic so we can't optimize for it
It was lovely meeting so many of you at #CSSDay! I had a great time. Now off to Spain for CSSWG, and then running a #CSS layout workshop at the end of June.
(use the conference hashtag in allcaps for a 10% discount!)
CSS built-in nesting is awkward, static variables can be useful actually, and what's the point of dropping a consistent API with good DX if we're still transforming our stylesheets anyways?
Chaining together interoperable PostCSS modules to accomplish half of what Sass can do is nearly impossible.
Probably my most prejudiced #CSS hack. Judge if you want, but this one line saves me from an insane amount of alignment issues and overly complicated calc()s.
@bingocaller I've been using it since essentially forever, too.
This is interesting because I've never seen anyone mention it in conversation around CSS… at the very least I'm glad I'm not the only one thinking that this makes things behave way more sensibly.
I don't understand why CSS is so verbose sometimes. Why couldn't I just do: color: --brand-red;
???
Why do I need to surround every use of it with var(...)? Wasn't the double-dash prefix was specifically chosen to not clash with any existing or future properties?
It's always so frustrating writing CSS. Especially compared to all the structure, abstractions, and terseness that programming languages offer.
@css@peterreeves I guarantee the w3c tried to find a way to do this without var(). If you really want to dive through old GitHub issues, it’s probably there (though this one might date back to the older mailing list).
I recall seeing discussion about using $ like Sass, but then deciding that would conflict with existing Sass code, so eventually they settled on the current approach.
@keithjgrant@css@peterreeves And it's not only an implementation concern. We also tend to prioritize readability over terse writing, for the sake of authors.
We can create tooling to write the code faster as experts - but if it's hard to understand/maintain the code later, that's a much bigger issue.
I was kinda hoping calc-size() could resolve intrinsic sizes inside math functions but it doesn't seem to (at least in Chrome Canary). Not sure if that's a bug or if Friday afternoon isn't the best time to try to understand draft #CSS specs 🤯
The way it works: in the first argument is the intrinsic value you want to use, and in the second is the calculation that you intend to do with it, where a special size keyword becomes available as the “variable”.
I found https://buildexcellentwebsit.es extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s #CSS, after many years of mess.
Unfortunately, though, I find the massive use of all those calc() and clamp() functions to be quite heavy in terms of performance… #Lighthouse gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags (😳) even if it’s super simple and built with pure #HTML and CSS!
Do you have any ideas or suggestions? 🤔
Thank you so much for all the interesting things you share! ❤️🚀
(The current unstable development version of my website is at https://dev.tommi.space/, I am using the homepage as reference)
@matthiasott clamp is actually one of the newish things I started using very quickly (the others being variables and nesting) as opposed to thinks like layers, container queries and math functions, none of which I'm really using in production yet.
Many teams are still using decade-old approaches and third-party tools for #CSS layout. That's not just extra work, but will leave you with less reliable results.
Join my new Cascading Layouts online workshop at the end of June!