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?
.element::box(1)
.element::box(2)Noted in Other Wishlists
#Here are some things others have wished for that are definitely a priority for me as well:
- A way to detect when sticky position is active (ripe for the plucking when style container queries mature) from Ahmad Shadeed
- Also from Ahmad is the clever idea for flex-wrap detection, an idea which he expanded into an article
- CSS OG Eric Meyer requests extending attr() for more contexts than the content property, such as for widths, and I would love it for
calc()and so many other things that I've forgotten at this point. It's really one of those things that make you hit your head against your desk when you have the perfect use case, and it doesn't work. - Line wrap balancing was noted by Tyler Sticka, which would prevent orphans and be far more robust than using
<br>which breaks down (pun intended) when dealing with international content or really any responsive design
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.
- responsive queries based on custom variable values can be achieved with style container queries (Chrome 111) and recently resolved was to allow length custom property values in size container queries, too
- relative color syntax is the magical ability to transform a color into a new color, available so far in Safari 16.4
color-contrast()is a proposed function to dynamically have the browser select the color with appropriate contrast from a list of palette options (no browser support yet)leading-trimfixes that annoying issue of the mystery space above/below single-line text, like in a button as brilliantly demonstrated by Ahmad Shadeed, currently only in Safari Tech Preview and Una cautions its at risk of a name changemargin-trimprovides control over removing leftover margin space as explained by Manuel Matuzović, currently only in Safari Tech Preview- display order is an active CSSWG issue to address the mismatch that can occur between the tabbing order of elements that have been re-arranged visually via the
orderproperty of flex or grid
Recently Made Possible
#In the last couple of years, long-standing issues I have encountered many times over my 15+ year career were resolved.
- container queries to orchestrate layout changes relative to the container instead of the viewport
- parent/ancestor/sibling selections became possible with :has()
- shorthand for bilateral margin and padding can be done with the logical properties of
margin-inlineorpadding-inilnewhich sets the left/right at once (in a horizontal writing mode) as well asmargin-blockorpadding-blockto set the top/bottom at once (in a horizontal writing mode) - themable form controls are possible for a subset of types including checkboxes, radio buttons, range input, and progress using the
accent-colorproperty - individual transform properties arrived to separately set
scale,rotate, andtranslate - As of Safari 16.4, the
outlineproperty will follow theborder-radiusacross browsers (meaning it will also be rounded instead of keeping square corners)
Other Wishlists
#Be sure to peruse the lists of these other folks, and consider making your own!