Tyler’s CSS Wish List for 2024

2023 had its up and downs, but at least a bunch of my CSS wishes came true: Relative colors, container queries, :has, subgrid, and @property (with a caveat) landed in every modern browser! That’s amazing!

But 2024 is upon us now, and with it a (mostly) fresh batch of CSS features to dream about…

• The View Transitions API is already pretty popular with developers, but it won’t feel real to me until it’s available beyond Chrome and Edge (and without a feature flag for multi-page transitions).
• Similarly, I’d love for scroll-driven animations to have broader support. Maybe even more than view transitions? Have you seen Roman Komarov’s Fit-to-Width Text demo? Wild stuff!
• I’d also love to toggle display within a transition, a straightforward solution to a classic CSS animation headache.
• Balanced text wrapping will be supported everywhere soon (Safari’s got it in Technical Preview), but now I want pretty wrapping for body copy!
• Since we’re talking typography, let’s get some hanging punctuation support outside of Safari!
• And while we’re at it, Sarah Gebauer made me aware of initial-letter for drop caps.
• I’ve been using CSS naming conventions (BEM, etc.) to manage specificity for more than a decade, so scoped styles feel like a long overdue shake-up.
• Container queries are amazing, but Style Queries seem just as versatile and powerful!
• Whenever I forego a preprocessor these days, I get really tired of repeating the same values in container and media queries. I’d love some custom media and/or custom global properties. (Thanks Paul for suggesting this one!)
• I kinda hate the typical presentation of footnotes on the web, so Eric Meyer’s Nuclear Anchored Footnotes article makes me really excited for CSS anchor positioning.
• I still wish Safari supported more SVG properties via CSS so my rubber button demo worked everywhere.
• display: contents is more accessible than it was a year ago, but Adrian Roselli continues to highlight room for improvement. Less important today thanks to subgrid, but I’d still really like to see this saga resolved.

I should also mention some open proposals I’ve submitted to the CSS Working Group:

• The ability to vertically align to the middle of the font’s cap-height, which would greatly simplify alignment of glyph-like icons and imagery.
• A feature to extend the pointer target size without introducing extra elements or pseudo elements, inspired by some issues with button touch targets.
• Some non-hacky way to set an alternative element as the document’s scrolling element.
• A standardized pseudo element for the date input picker affordance.

And finally, the same wish I made in 2017 and again in 2020… content-aware SVGs in CSS! Let me use currentColor without masks or inlining! Please? I’m asking nicely!