What ELSE Is On Your CSS Wishlist?

What else do we wish or want CSS to do? It’s like being out late at night time someplace you shouldn’t be and a stranger in a trenchcoat walks up and whispers in your ear.

“Psst. You wanna purchase some async @imports? I’ve obtained the specificity you need.”

You recognize you shouldn’t entertain the thought however you do it anyway. All your pals doing Cascade Layers. What are you, a sq.?

I preserve pondering of how wonderful it’s to jot down CSS as we speak. There was an electronic mail alternate simply this morning the place I used to be discussing a bunch of concepts for a persistent set of controls within the UI that may have sounded bonkers even one yr in the past if it wasn’t for brand new options, like anchor positioning, scroll timelines, auto-height transitions, and popovers. We’re nonetheless within the early days of all this stuff — amongst many, many extra — and have but to see all of the superior prospects come to fruition. Thrilling occasions!

Chris stored a CSS wishlist, going again so far as 2013 and following up on it in 2019. All of us have issues we’d prefer to see CSS do and we at all times will regardless of what number of sparkly new options we get. Let’s revisit those from 2013:

1. ✅ “I’d like to have the ability to choose a component primarily based on if it comprises one other specific selector.” Hiya, :has()!
2. ❌ “I’d like to have the ability to choose a component primarily based on the content material it comprises.”
3. ❌ “I’d like a number of pseudo-elements.”
4. ✅ “I’d like to have the ability to animate/transition one thing to top: auto;” Yep, we obtained that!
5. 🟠 “I’d like issues from Sass, like @lengthen, @mixin, and nesting.” We obtained the nesting half down with some progress on mixins.
6. ❌ “I’d like ::nth-letter, ::nth-word, and many others.”
7. ✅ “I’d like all the foremost browsers to auto-update.” This one was already fulfilled.

So, a few rating of three.5 out of seven. It might very nicely be that a few of these issues fell out of favor in some unspecified time in the future (haven’t heard any crying for a brand new pseudo-element because the first wishlist). Chris re-articulated the record this fashion:

• Mum or dad queries. As in, choosing a component any-which-way, then choosing the mother or father of that ingredient. We have now some proof it’s attainable with :focus-within.
• Container queries. Choose a specific ingredient when the ingredient itself is below sure circumstances.
• Standardized styling of kind parts.
• Has/Incorporates Selectors.
• Transitions to auto dimensions.
• Mounted up dealing with of viewport items.

And we’ve obtained the overwhelming majority of these below wraps! We have now methods to question mother and father and containers. We’re exploring stylable selects and field-sizing. We find out about :has() and we’re nonetheless going gaga over transitions to intrinsic sizes. We’ve overtly opined whether or not there’s an excessive amount of CSS (there isn’t).

However what else is in your CSS wishlist? Satirically sufficient, Adam Argyle went by way of this train simply this morning and I like the way in which he’s damaged issues down right into a user-facing wishlist and a developer-facing wishlist. I imply, geez, a CSS carousel? Sure, please! I like his record and all lists prefer it.

We’ll spherical issues up and put an inventory collectively — so tell us!