A CSS Wishlist For 2025

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

We put our heads collectively and got here up with a couple 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 today. We have now so many fantastic — and new! — issues that I’m nonetheless wrapping my head round lots of them.

However! There’s at all times room for yet one more good factor, proper? Or possibly 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 should 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 reaching Container Fashion Queries, which is what I finally need from this. With the ability to apply types conditionally primarily based on the types of one other aspect is the white whale of CSS, so to talk. We will already model a component primarily based on what different components it :has() so this might develop that magic to incorporate conditional types as nicely.

2. CSS mixins

That is extra of a “nice-to-have” characteristic as a result of I really feel its squarely in CSS Preprocessor Territory and imagine it’s good to have some tooling for mild abstractions, corresponding 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 is likely to be the straw that breaks the CSS preprocessor again and permits me to jot down plain CSS 100% of the time as a result of proper now I have a tendency to achieve for Sass after I want a mixin or operate.

I wrote up a bunch of notes in regards to the mixins proposal and its preliminary draft within the specs to present you an thought of why I’d need this characteristic.

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 ought to be in my listing of dumbest CSS errors (even when I didn’t put it in there).

4. font-size: match

I simply hate doing math, alright?! Generally I simply need a phrase or brief heading sized to the container it’s in. We will use issues like clamp() for fluid typesetting, however once more, that’s math I can’t be bothered with. You may assume 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 bought! After spending a lot of the month of November studying the way it works, I went into December realizing I gained’t actually get to make use of it for some time.

As we shut out 2024, solely Chromium-based browsers have help, and fallbacks and progressive enhancements should not simple, sadly. There’s a polyfill accessible (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 accessible” in Baseline for a 12 months now (are you able to imagine it?).

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

I like anchor positioning, I like popovers, they usually 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 method to transfer a component there could be fascinating. Additionally, now that I do know that the #top-layer exists, I need to do extra with it — I need to know what’s up there. What’s actually happening?

Nicely, I in all probability ought to have began on the spec. Because it seems, the CSS Place Format Module Stage 4 draft talks in regards to the #top-layer, what it’s helpful for, and methods to method styling components contained inside it. Apparently, the #top-layer is managed by the person 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 may imply it’s potential to advertise components to the #top-layer in future methods. This very nicely 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 challenge 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 types with layers outlined, corresponding to:
 @layer reset, typography, elements, utilities;
-->
<hyperlink rel="stylesheet" href="https://css-tricks.com/types/fundamental.css"> 

<!-- Add solely to pages utilizing card elements  -->
<hyperlink rel="stylesheet" href="https://css-tricks.com/elements/card.css" layer="elements">

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

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 nicely, so there’s nonetheless hope!

Juandi’s Wishlist

I need to admit this, I wasn’t round when the net was wild and other people had hit counters. The truth is, I believe I’m fairly younger in comparison with your common net connoisseur. Whereas I do know the right way to make a format utilizing float (the primary net course I picked up was fairly outdated), I didn’t must undergo lengthy earlier than utilizing issues like Flexbox or CSS Grid and by no means grinded my enamel towards IE and browser help.

So, the next needs might appear to be petty requests in comparison with the actually crucial options the net wanted prior to now — 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 just swear it ought to already be potential with simply CSS. The scenario is the next: I discover myself desirous to know the index of a component between its siblings or the entire variety of kids. I can’t use the counter() operate since typically I want an integer as a substitute of a string. The present method is both hardcoding an index on the HTML:

<ul>
  <li model="--index: 0">Milk</li>
  <li model="--index: 1">Eggs</li>
  <li model="--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 ought to 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 types primarily based on the entire rely.

Fortunately, there’s a already proposal in Working Draft for sibling-count() and sibling-index() capabilities. Whereas the syntax might 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 method to stability flex-wrap

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

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

It’s positively annoying.

10. A neater method to learn/analysis CSSWG discussions

I’m an enormous fan of the CSSWG and every little thing they do, so I spent loads of time studying their working drafts, GitHub points, or notes about their conferences. Nevertheless, 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 problem, it is best to have the massive image of all of the dialogue (what has been mentioned, why some issues don’t work, others to think about, and so forth) however it’s often scattered throughout a number of points or conferences. Whereas points will be prolonged, that isn’t the issue (I like studying them), however reasonably not realizing a part of a dialogue existed someplace within the first place.

So, whereas it isn’t immediately a CSS want, I want there was a better method 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 couple of selection choices from the group:

• Rotate direct background-images, like background-rotate: 180deg
• CSS random(), with params for vary, unfold, and sort
• 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 a fantastic 2025…

CSS-Tips trajectory hasn’t been essentially the most easy these final years, so our greatest want for 2025 is to maintain writing and sparking discussions in regards to the net. Pleased 2025!