CSS Wishlist 2023

2022 was a massive year for CSS. We got CSS Layers, more subgrid support, the impossible :has() selector, and WE GOT CONTAINER QUERIES! 🎉  Thank you to everyone who worked on those. A lot of the success for CSS this past year was due to an incredible cross-browser effort called Interop 2022, a loose agreement amongst browsers to try to work on some of the same features so feature support gaps between browsers are shorter.

I’m thankful for what we’ve gotten, but I don’t want to stop dreaming. I have no idea what’s in store for Interop 2023, but here’s my Top 5 short list of CSS features I want based on the work I do on a daily basis.

• <selectmenu> - Technically HTML, but fully style-able select menus. This exists in Chrome Canary behind a flag (and Origin Trial?). According to Edge this is one of the biggest asked for features ever.
• CSS anchor positioning and popover attribute - A cousin of <selectmenu>, anchor replaces libraries like Popper for positioning an element offset based on any element, without the parent/child restrictions of position: absolute. The popover proposal extends that to building custom tooltips and popups on the top-layer. Even yesterday I had an issue with an overflow issue with a custom popup that needed a top-layer in side a dialog also on the top-layer, so I could use this. I know Open UI was working on hard on this, not sure the status of either proposal.
• leading-trim - I probably have one or two optical CSS alignment “bugs” a month, leading to a lot of magic numbers appearing in my codebase. I have Capsize hacks littering my code, and that’s okay but it’d be great to have an official solution based on font-metrics, not me eyeballing pixels. Here’s the spec, but my knowledge no one has picked this up.
• Relative Color Syntax - Not a day goes by that I don’t wish I had color functions like alpha(), lighten(), and darken() but in native CSS instead of Sass’s functions which don’t work with CSS custom properties. Let’s throw color-contrast() in there too while we’re at it, make it easier to have sufficient contrast, please. If I recall, some of this work is in Safari already, but I don’t know the status of the latest spec.
• View Transitions API - The ultimate SPA killer? In its current implementation it’s targeting SPAs, but when/if this gets to MPAs, the web permantently changed for the better. This would save billions of lines a code each year and unlock neater, smoother, more performant page transitions.

That’s my list. I’d love to know yours.