Lachlan's avatar@lachlanjc/notebook

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.

  1. 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  , or JavaScript. Having this be a single property I could apply near-globally to h1 & h2 elements would save a bunch of time in making a polished design. Until then, mastermind Shu Ding’s React Wrap Balancer works incredibly well, and I’m excited to see support come to Satori.
  2. 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 calc or 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-child as a workaround. (You’ll spot an index custom property in a transform in the “steps” section I made last week for Watershed’s new SEC page.)
  3. CSS Grid masonry layout (details). The spec has been around for years, but is only available behind a flag in Firefox. The CSS solution to masonry layout will be a beautiful end to the hacks, and on websites like Scrapbook, a minor godsend compared to JavaScript-based solutions using flexbox column layouts or client-side absolute positioning.
  4. 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.
  5. 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 height from 0 to auto. JavaScript motion libraries like Framer Motion do this automatically, but I’d like those animations to be available in native CSS.
  6. 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.

Bonus readings

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 if statements. 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.)