This content originally appeared on daverupert.com and was authored by daverupert.com
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
anchorpositioning andpopoverattribute - A cousin of<selectmenu>,anchorreplaces libraries like Popper for positioning an element offset based on any element, without the parent/child restrictions ofposition: absolute. Thepopoverproposal 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(), anddarken()but in native CSS instead of Sass’s functions which don’t work with CSS custom properties. Let’s throwcolor-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.
This content originally appeared on daverupert.com and was authored by daverupert.com
daverupert.com | Sciencx (2023-01-24T14:37:00+00:00) CSS Wishlist 2023. Retrieved from https://www.scien.cx/2023/01/24/css-wishlist-2023/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.