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
displaywithin 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
prettywrapping 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-letterfor 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: contentsis 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!
Tyler Sticka has over 20 years of experience designing interfaces for the web and beyond. He co-owns Cloud Four, where he provides creative direction to their multidisciplinary team. He’s also an artist, writer, speaker and reluctant developer. You can follow Tyler on his personal site or on Mastodon.