Daveasked people to share their CSS wish lists for 2023, and even thoughit’s well into the second month of the year, I’m going to sprintwild-eyed out of the brush along the road, grab the hitch on the back ofthe departing bandwagon, and try to claw my way aboard. At first I thought I had maybe four or five things to put on my list,but as I worked on it, I kept thinking of one more thing and one morething until eventually I had a list of (checks notes) SIXTEEN?!?!? What the hell.
There’s going to be some overlap with the things being worked on forInterop 2023, and I’m surethere will be overlap with other peoples’ lists. Regardless, here wego.
SubgridBack in the day, I asserted Grid should wait for subgrid. I wasprobably wrong about that, but I wasn’t wrong about the usefulness ofand need for subgrid. Nearly every time I implement a design, I tripover the lack of widespread support.
I have a blog post in my head about how I hacked around this problemfor wpewebkit.org by applying thesame grid column template to nested containers, and how I could make itmarginally more efficient with variables. I keep not writing it, becauseit would show the approach and improvement and then mostly be about thelimitations, flaws, and annoyances this approach embodies. The whole idea just depresses me, and I would probably become impolitic.
So instead I’ll just say that I hope those browser engines that haveyet to catch up with subgrid support will do so in 2023.
Masonry layoutGrid layout is great, and you can use it to create a masonry-stylelayout, but having a real masonry layout mechanism would be better,particularly if you can set it on a per-axis basis. What I mean is, youcould define a bunch of fixed (or flexible) columns and then say therows use masonry layout. It’s not something I’m likely touse myself, but I always think the more layout possibilities there are,the better.
Grid track stylesFor someone who doesn’t do a ton of layout, I find myself wanting tostyle grid lines a surprising amount. I just want to do somethinglike:
display: grid;gap: 1em;grid-rules-columns: 1px dotted red;
…although it would be much better to be able to style separators fora specific grid track, or even an individual grid cell, as well as be able to apply it to an entire grid all at once.
No, I don’t know exactly how this should work. I’m an idea guy! Butthat’s what I want. I want to be able to define what separator lineslook like between grid tracks, centered on the grid lines.
Anchored positioningI’ve wanted this in one form or another almost since CSS2 waspublished. The general idea is, you can position an element in relationto the edges of another element that isn’t a containing block. I wroteabout this a bit in my post on connector lines for wpewebkit.org, butanother place it would have come in handy was with thefootnotes on The Effects of Nuclear Weapons.
See, I wanted those to actually be sidenotes, Tufteee-styleee. Right now, in order to make sidenotes, you have to stick the footnote into the text, right where its footnote reference appears — or, at a minimum, right after the element containing the footnote reference. Neither was acceptable to me, because it would dork up the source text.
What I wanted to be able to do was collect all the footnotes asendnotes at the end of the markup (which we did) and then absolutelyposition each to sit next to the element that referenced them, orhave it pop up there on click, tap, hover, whatever. Anchored positioning would make that not just possible, but fairly easy to do.
ExclusionsFollowing on anchored positioning, I’d love to have CSS Exclusionsfinally come to browsers. Exclusions are a way to mark an element tohave other content avoid it. You know how floats move out of the normalflow, but normal-flow text avoids overlapping them? That’s an exclusion. Now imagine being able to position an element by other means, whethergrid layout or absolute positioning or whatever, and then say “have thecontent of other elements flow around it”. Exclusions! See thisarticle by Rob Weychert for a more in-depth explanation of a commonuse case.
Element transitionsThe web is cool and all, but you know how futuristic interfaces inmovies have pieces of the interface sliding and zooming and popping out and all thatstuff? Element transitions. You can already try themout in Chrome Canary, Batman, and I’d love to see them across theboard. Even more, I’d love some gentle, easy-to-follow tutorials on howto make them work, because even in their single-page form, I found thecoding requirements basically impossible to work out. Make them all-CSS,and explain them like I’m a newb, and I’m in.
Nested SelectorsA lot of people I know are still hanging on to preprocessors solelybecause they permit nested selectors, like:
main {padding: 1em;background: #F1F1F0;h2 {border-block-end: 1px solid gray;}p {text-indent: 2em;}}
The CSS Working Group has been wrestling with this for quite sometime now, because it turns out the CSS parsing rules make it hard tojust add this, there are a lot of questions about how this shouldinteract with pseudo-classes like :is(), there are seriousconcerns about doing this in a way that will be maximallyfuture-compatible, and also there has been a whole lot of argument overwhether it’s okay to clash with Sass syntax or not.
So it’s a difficult thing to make happen in native CSS, and thedebates are both wide-ranging and slow, but it’s on my (and probablynearly everyone else’s) wish list. You can try it out in Safari Technology Preview as I write this, so here’s hoping for accelerating adoption!
More and better :has()Okay, since I’m talking about selectors already, I’ll throw inuniversal, full-featured, more optimized support for:has(). One browser doesn’t support compound selectors, forexample. I’ve also thought that maybe some combinators would be nice,like making a:has(> b) can be made equal toa < b.
But I also wish for people to basically go crazy with:has(). There’s SO MUCH THERE. There are so manythings we can do with it, and I don’t think we’ve touched even a tinyfraction of the possibility space.
More attr()I’ve wanted attr() to be more widely accepted in CSSvalues since, well, I can’t remember. A long time. I want to beable to do something like:
p[data-size] {width: attr(data-width, rem);}<p data-size="27">…</p>
Okay, not a great example, but it conveys the idea. I also talkedabout this in mypost about aligning table columns.I realize adding this would probably lead tosomeone creating a framework called Headgust where all the styling isjammed into a million data-*attributes and the whole of theframework’s CSS is nothing but property: attr() declarations for every single CSS property known to man, but we shouldn’t let that stop us.
Variables in media queriesBasically I want to be able to do this:
:root {--mobile: 35em;}@media (min-width: var(--mobile)) {/* non-mobile styles go here */}
That’s it. This was made possible in container queries, I believe, somaybe it can spread to media (and feature?) queries. I sure hope so!
Logical modifiersYou can do this:
p {margin-block: 1em; margin-inline: 1rem;}
But you can’t do this:
p {margin: logical 1em 1rem;}
I want to be able to do that. We should all want to be ableto do that, however it’s made possible.
Additive valuesYou know how you can set a bunch of values with a comma-separatedlist, but if you want to override just one of them, you have to do thewhole thing over? I want to be able to add another thing to the listwithout having to do the whole thing over. So rather than adding a valuelike this:
background-clip: content, content, border, padding; /* need to addd padding */
…I want to be able to do something like:
background-clip: add(padding);
No, I don’t know how to figure out where in the list it should beadded. I don’t know a lot of things. I just know I want to be able to dothis. And also to remove values from a list in a similar way, since I’mpony-wishing.
Color shading and blendingPreprocessors already allow you to say you want the color of anelement to be 30% lighter than it would otherwise be. Or darker. Orblend two colors together. Native CSS should have the same power. It’s beingworked on. Let’s get it done, browsers.
Cross-boundary stylesI want to be able to apply styles from my external (or even embedded) CSS to a resource like an external SVG. I realize this sets up all kindsof security and privacy concerns. I still want to be able to do it. Every time I have to embed an entire inline SVG into a template just soI can change the fill color of a logo based on its page context, I gritmy teeth just that little bit harder. It tasks me.
Scoped styling (includingimports)The Mirror Universe version of the previous wish is that I want to beable to say a bit of CSS, or an entire style sheet (embedded orexternal), only applies to a certain DOM node and all its descendants.“But you can do that with descendant selectors!” Not always. For thatmatter, I’d love to be able to just say:
```