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 peak: auto, and plenty of others. It appears out of contact to ask, however what else do we would like 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 great CSS goodies nowadays. We have now so many great — and new! — issues that I’m nonetheless wrapping my head round lots of them.

However! There’s all the time room for yet one more good factor, proper? Or possibly room for 4 new issues. If I might 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 when you take into account that the CSS Working Group (CSSWG) resolved so as to add an if() conditional to the CSS Values Module Degree 5 specification. That’s an enormous step ahead, even when it takes a yr 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 part for reaching Container Model Queries, which is what I in the end need from this. With the ability to apply types conditionally based mostly on the types of one other component is the white whale of CSS, so to talk. We will already fashion a component based mostly on what different components it :has() so this could increase that magic to incorporate conditional types 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, resembling writing features 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 perhaps 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 once I want a mixin or perform.

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

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 checklist 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 desire a phrase or quick 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 suppose there’s a attainable 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 might 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 figuring out I received’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 will not be 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 yr now (are you able to consider it?).

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

I like anchor positioning, I like popovers, and so they go rather 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 can be attention-grabbing. 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?

Properly, I in all probability ought to have began on the spec. Because it seems, the CSS Place Structure Module Degree 4 draft talks in regards to the #top-layer, what it’s helpful for, and methods to strategy styling components contained inside it. Curiously, 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 attainable to advertise components 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 feel can be ace is that if we might embody a layer attribute on a <hyperlink> tag. Think about having 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 elements of CSS, blended into your cascade layers:

<!-- 
World types with layers outlined, resembling:
 @layer reset, typography, parts, utilities;
-->
<hyperlink rel="stylesheet" href="https://css-tricks.com/types/most important.css"> 

<!-- Add solely to pages utilizing card parts  -->
<hyperlink rel="stylesheet" href="https://css-tricks.com/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 other people had hit counters. In truth, I feel I’m fairly younger in comparison with your common net connoisseur. Whereas I do know tips on how to make a format utilizing float (the primary net course I picked up was fairly outdated), I didn’t must endure lengthy earlier than utilizing issues like Flexbox or CSS Grid and by no means grinded my enamel in opposition to IE and browser assist.

So, the next needs could seem to be petty requests in comparison with the actually vital options the online wanted prior to now — and even some within the current. Regardless, listed below 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 type of issues that you just swear it ought to already be attainable with simply CSS. The scenario is the next: I discover myself desirous to know the index of a component between its siblings or the whole variety of youngsters. I can’t use the counter() perform since generally I want an integer as an alternative 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 all the time go away with the sensation that it ought to be simpler to reference this quantity; the browser already has this information, it’s only a matter of exposing it to authors. It will make prettier and cleaner code for staggering animations, or just altering the types based mostly on the whole rely.

Fortunately, there’s a already proposal in Working Draft for sibling-count() and sibling-index() features. 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 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 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 components:

It’s undoubtedly annoying.

10. A neater method to learn/analysis CSSWG discussions

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

I feel this raises the barrier of entry to giving your opinion on some subjects. If you wish to take part in a difficulty, it’s 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 many others) but it surely’s often scattered throughout a number of points or conferences. Whereas points might be prolonged, that isn’t the issue (I really like studying them), however fairly not figuring out 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 neater method to get the total image of the dialogue earlier than leaping in.

What’s in your wishlist?

We requested! You answered! Listed below are a number of alternative 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 enables concentrating 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 essentially the most clean these final years, so our largest want for 2025 is to maintain writing and sparking discussions in regards to the net. Joyful 2025!