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.
popoverattribute - A cousin of
anchorreplaces libraries like Popper for positioning an element offset based on any element, without the parent/child restrictions of
position: absolute. The
popoverproposal 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
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.