My CSS Wishlist 2023

Feb 19, 2023

The amount of stuff that has landed in CSS in the past few years is kind of mind-boggling, and difficult to keep up with! Other folks have been posting the (impressively small, all things considered) list of things they've wished for, so I decided to join in. The other wishlists I know of to date are in the last section.

My Wishlist

One reason I continue to use Sass is to use loops. And, part of the reason for that is scenarios where I want access to the index of the thing I'm styling, like dynamic nth-child rules. Recently Kevin Pennekamp showed off a trick of hacking around getting an index by setting global custom properties against nth-child selectors.

My wish is for an actual index keyword that is available as a number so that it can be used in the types of scenarios Kevin describes, like within calc(), color functions, transforms, opacity, and more.

/* Alternating background colors if `index` existed */
background-color: hsl(calc(60 * index) 80% 60%);

The last frontier in providing reasonably cross-browser custom form controls is inheritably resizable checkboxes and radio buttons. Presently you can apply a custom size in Chromium and Firefox, but Safari prohibits resizing, leading folks to still create complete style overrides.

Did you know an easy way to achieve gradient borders is with border-image? Unfortunately, once you apply border-image, you're forced into a square corner appearance, so my wish is to retain border-radius when using border-image.

Finally, while we have ::before and ::after, I'm looking for a not-so-secret third (and fourth) thing, like perhaps ::box-before and ::box-after. The before and after pseudo-elements are basically treated like inline text by default until you introduce your own positioning. They also count towards the accessible name for some assistive tech and browser combos, and they are sometimes an extra focus stop for Narrator (the Windows screen reader). This causes problems when trying to use them not as content at all, but as decorative flourishes which is what I'm actually after 90% or more of the time.

While I think two ::box- pseudo-elements may be enough for me, Jim Nielsen takes a different angle and requests unlimited pseudo-elements. Maybe we could meet in the middle with a ::box pseudo-element that accepts an index kind of like nth-child, so it could be overridden later?


Noted in Other Wishlists

Here are some things others have wished for that are definitely a priority for me as well:

Already on the CSSWG Radar

The following are also high on my wishlist, and are being worked on with partial support in canary/nightly builds or at least movement in the specs.

Recently Made Possible

In the last couple of years, long-standing issues I have encountered many times over my 15+ year career were resolved.

Other Wishlists

Be sure to peruse the lists of these other folks, and consider making your own!