2023 CSS wishlist
Dave Rupert shared his CSS wishlist for 2023: new specs he’d love to see implemented. While I’d be delighted to have & would use all the features he mentioned, here’s a quick list of what I’d like to use in browsers.
text-wrap: balance;(spec). Visually unbalanced headlines are a typographic menace on the web, but solving them requires custom CSS tweaking (such as
max-width: 16ch;), HTML character entities like
- Sibling functions (proposal). One trick I rely on for visual effects and animations is adding a custom property (usually with React) for an element’s index, then using that in
animation-delay. As with most styling JS, over time CSS should build in the simple, common use cases directly to the language, in this case to write CSS like
animation-delay: calc(sibling-index() * 0.1s);. If you don’t want to or can’t put custom properties in your HTML, this post explains using
:nth-childas a workaround. (You’ll spot an index custom property in a
transformin the “steps” section I made last week for Watershed’s new SEC page.)
- Scroll-linked animations (details, polyfilled demo). Any scroll-related effects need JS right now, which sucks both as a developer & for performance. While these effects can be overused just like AOS used to be, when done well, add an elegant polish.
- Animating to
auto. There’s many cases where I want simple animation, like a mobile navigation menu animating up from the bottom of the screen, where being able to animate a property like
- Bonus: random numbers (proposal). I wouldn’t use these for the majority of projects, and they’re not holding back the web platform in any big way, but random numbers would enable fluid organic shapes (think of
border-radius: random(0, 100)px random(0, 100)px;) & complex generative art in CSS.
Four CSS articles I enjoyed this week:
- Conditional CSS by Ahmad Shadeed describes the many, many ways to apply styles conditionally, even if CSS doesn’t have traditional
ifstatements. I’ve used the delightful conditional border-radius trick he mentions on my personal homepage for awhile.
- Day 88: CSS Motion Path by Manuel Matuzovic, who’s been doing nearly 100 days of blog posts covering new CSS features. I’d missed that browser support for motion paths is looking decent!
- The truth about CSS selector performance by Patrick Brosset shows how rules like “
*is slow” don’t capture the nuance of selector performance at all, and what to watch out for instead.
- Case Study: lynnandtonic.com 2022 refresh by Lynn Fisher unpacks the latest gem in Lynn’s crown of CSS accomplishments. I recently shipped my first
:has()to production (to power a minor visual effect in the watershed.com nav), but as usual she’s come up with a remarkable use case.
(Would you enjoy if I shared more links to what I’m reading about frontend? Let me know.)