A CSS Wishlist for 2025

2024 has been one of many biggest years for CSS: cross-document view transitions, scroll-driven animations, anchor positioning, animate to top: auto, and plenty of others. It appears out of contact to ask, however what else do we wish from CSS? Properly, many issues!

We put our heads collectively and got here up with a number of concepts… together with a number of of yours.

Geoff’s wishlist

I’m of the thoughts that we have already got a BUNCH of fantastic CSS goodies lately. We now have so many fantastic — and new! — issues that I’m nonetheless wrapping my head round a lot of them.

However! There’s at all times room for another good factor, proper? Or perhaps room for 4 new issues. If I may ask for any new CSS options, these are those I’d go for.

1. A conditional if() assertion

It’s coming! Or it’s already right here in the event you contemplate that the CSS Working Group (CSSWG) resolved so as to add an if() conditional to the CSS Values Module Stage 5 specification. That’s an enormous step ahead, even when it takes a 12 months or two (or extra?!) to get a proper definition and make its approach into browsers.

My understanding about if() is that it’s a key element for attaining Container Fashion Queries, which is what I in the end need from this. Having the ability to apply kinds conditionally primarily based on the kinds of one other ingredient is the white whale of CSS, so to talk. We are able to already fashion a component primarily based on what different parts it :has() so this is able to develop that magic to incorporate conditional kinds as effectively.

2. CSS mixins

That is extra of a “nice-to-have” function as a result of I really feel its squarely in CSS Preprocessor Territory and consider it’s good to have some tooling for mild abstractions, comparable to writing capabilities or mixins in CSS. However I actually wouldn’t say “no” to having mixins baked proper into CSS if somebody was providing it to me. That may be the straw that breaks the CSS preprocessor again and permits me to put in writing plain CSS 100% of the time as a result of proper now I have a tendency to succeed in for Sass after I want a mixin or perform.

I wrote up a bunch of notes concerning the mixins proposal and its preliminary draft within the specs to provide you an concept of why I’d need this function.

3. // inline feedback

Sure, please! It’s a minor developer comfort that brings CSS as much as par with writing feedback in different languages. I’m fairly certain that writing JavaScript feedback in my CSS must be in my checklist of dumbest CSS errors (even when I didn’t put it in there).

4. font-size: match

I simply hate doing math, alright?! Typically I simply desire a phrase or quick heading sized to the container it’s in. We are able to use issues like clamp() for fluid typesetting, however once more, that’s math I can’t be bothered with. You would possibly suppose there’s a potential answer with Container Queries and utilizing container question models for the font-size however that doesn’t work any higher than viewport models.

Ryan’s wishlist

I’m only a easy, small-town CSS developer, and I’m fairly glad with all the brand new options coming to browsers over the previous few years, what extra may I ask for?

5. Anchor positioning in additional browsers!

I don’t want anymore convincing on CSS anchor positioning, I’m offered! After spending a lot of the month of November studying the way it works, I went into December understanding I gained’t actually get to make use of it for some time.

As we shut out 2024, solely Chromium-based browsers have assist, and fallbacks and progressive enhancements usually are not simple, sadly. There’s a polyfill obtainable (which is superior), nevertheless, that does imply including one other chunk of JavaScript, contrasting what anchor positioning solves.

I’m affected person although, I waited a very long time for :has to come back to browsers, which has been “newly obtainable” in Baseline for a 12 months now (are you able to consider it?).

6. Selling parts to the #top-layer with out popover?

I like anchor positioning, I like popovers, and so they go very well collectively!

The neat factor with popovers is how they seem within the #top-layer, so that you get to keep away from stacking points associated to z-index. That is in all probability all most would wish with it, however having another solution to transfer a component there could be fascinating. Additionally, now that I do know that the #top-layer exists, I wish to do extra with it — I wish to know what’s up there. What’s actually happening?

Properly, I in all probability ought to have began on the spec. Because it seems, the CSS Place Structure Module Stage 4 draft talks concerning the #top-layer, what it’s helpful for, and methods to strategy styling parts contained inside it. Curiously, the #top-layer is managed by the consumer agent and appears to be a byproduct of the Fullscreen API.

Dialogs and popovers are the best way to go for now however, optimistically talking, these options present would possibly imply it’s potential to advertise parts to the #top-layer in future methods. This very effectively could also be a coyote/roadrunner-type scenario, as I’m not fairly certain what I’d do with it as soon as I get it.

7. Including a layer attribute to <hyperlink> tags

Personally talking, Cascade Layers have modified how I write CSS. One factor I believe could be ace is that if we may embody a layer attribute on a <hyperlink> tag. Think about with the ability to embody a CSS reset in your undertaking like:

<hyperlink rel="stylesheet" href="https://cdn.com/some/reset.css" layer="reset">

Or, relying on the web page visited, dynamically add components of CSS, blended into your cascade layers:

<!-- 
International kinds with layers outlined, comparable to:
 @layer reset, typography, parts, utilities;
-->
<hyperlink rel="stylesheet" href="/kinds/fundamental.css"> 

<!-- Add solely to pages utilizing card parts  -->
<hyperlink rel="stylesheet" href="/parts/card.css" layer="parts">

This function was proposed over on the CSSWG’s repo, and like most issues in life: it’s sophisticated.

Browsers are particularly finicky with attributes they don’t know, plus particular issues round dealing with fallbacks. The subject was additionally introduced over to the W3C Technical Structure Group (TAG) for dialogue as effectively, so there’s nonetheless hope!

Juandi’s Wishlist

I have to admit this, I wasn’t round when the online was wild and folks had hit counters. In reality, I believe I’m fairly younger in comparison with your common net connoisseur. Whereas I do know easy methods to make a structure utilizing float (the primary net course I picked up was fairly outdated), I didn’t need to undergo lengthy earlier than utilizing issues like Flexbox or CSS Grid and by no means grinded my tooth in opposition to IE and browser assist.

So, the next needs could appear to be petty requests in comparison with the actually obligatory options the online wanted previously — and even some within the current. Regardless, listed here are my three petty requests I might want to see in 2025:

8. Get the youngsters rely and index as an integer

That is a kind of issues that you simply swear it ought to already be potential with simply CSS. The scenario is the next: I discover myself eager to know the index of a component between its siblings or the full variety of youngsters. I can’t use the counter() perform since generally I would like an integer as a substitute of a string. The present strategy is both hardcoding an index on the HTML:

<ul>
  <li fashion="--index: 0">Milk</li>
  <li fashion="--index: 1">Eggs</li>
  <li fashion="--index: 2">Cheese</li>
</ul>

Or alternatively, write every index in CSS:

li:nth-child(1) { --index: 0; }
li:nth-child(2) { --index: 1; }
li:nth-child(3) { --index: 2; }

Both approach, I at all times go away with the sensation that it must be simpler to reference this quantity; the browser already has this data, it’s only a matter of exposing it to authors. It might make prettier and cleaner code for staggering animations, or just altering the kinds primarily based on the full rely.

Fortunately, there’s a already proposal in Working Draft for sibling-count() and sibling-index() capabilities. Whereas the syntax could change, I do hope to listen to extra about them in 2025.

ul > li {
  background-color: hsl(sibling-count() 50% 50%);
}

ul > li {
  transition-delay: calc(sibling-index() * 500ms);
}

9. A solution to steadiness flex-wrap

I’m stealing this one from Adam Argyle, however I do want for a greater solution to steadiness flex-wrap layouts. When parts wrap one after the other as their container shrinks, they both are left alone with empty house (which I don’t dislike) or develop to fill it (which hurts my soul):

I want for a extra native approach of balancing wrapping parts:

It’s undoubtedly annoying.

10. A neater solution to learn/analysis CSSWG discussions

I’m an enormous fan of the CSSWG and every thing they do, so I spent numerous time studying their working drafts, GitHub points, or notes about their conferences. Nonetheless, as a lot as I like leaping from hyperlink to hyperlink of their GitHub, it may be arduous to search out all of the associated points to a selected dialogue.

I believe this raises the barrier of entry to giving your opinion on some subjects. If you wish to take part in a difficulty, you need to have the large image of all of the dialogue (what has been mentioned, why some issues don’t work, others to contemplate, and so forth) but it surely’s normally scattered throughout a number of points or conferences. Whereas points may be prolonged, that isn’t the issue (I like studying them), however fairly not understanding a part of a dialogue existed someplace within the first place.

So, whereas it isn’t instantly a CSS want, I want there was a better solution to get the total image of the dialogue earlier than leaping in.

What’s in your wishlist?

We requested! You answered! Listed here are a number of selection alternatives from the group:

• Rotate direct background-images, like background-rotate: 180deg
• CSS random(), with params for vary, unfold, and kind
• A CSS anchor place mode that permits focusing on the mouse cursor, pointer, or contact level positions
• A string selector to question a sure phrase in a block of textual content and apply styling each time that phrase happens
• A local .visually-hidden class.
• place: sticky with a :caught pseudo

Wishing you an excellent 2025…

CSS-Tips trajectory hasn’t been probably the most easy these final years, so our largest want for 2025 is to maintain writing and sparking discussions concerning the net. Comfortable 2025!

---

A CSS Wishlist for 2025 initially revealed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the publication.