A CSS Wishlist for 2025

2024 is a brilliant year for CSS: cross-document view conversion, scroll-driven animation, anchor positioning, animation height: automatic, and more. While it sounds a bit out of place, we are still looking forward to more features of CSS. Many features!

We brainstormed some ideas...and some of your ideas.

Geoff's Wish List

I think we already have a lot of excellent CSS tools now. We have a lot of great things – and new! ——Function, I'm still trying to learn a lot of them.

But! There is always room for more good stuff, right? Or maybe there is room for four new things. If I can ask for any new CSS features, I'd choose these. 1. Conditional if() statement

It's coming soon! Or if you think the CSS Working Group (CSSWG) has decided to add the if() condition to the CSS Value Module Level 5 specification, then it already exists. This is a huge improvement, even if it takes a year or two (or more?!) to get formally defined and go to the browser.

My understanding of if() is that it is a key component in implementing container-style queries, which is what I ultimately want. Being able to conditionally apply styles according to the style of another element can be said to be the holy grail of CSS. We can already style the element according to the style of other elements: has(), so this will extend this magic, including conditional styles.

2. CSS mixin

This is more like a "icing on the cake" feature, because I feel it belongs entirely to the CSS preprocessor realm and believe it is good to have tools for lightweight abstractions, such as writing functions or mixins in CSS. But if someone offers me a mixin, I certainly wouldn't say no. This is probably the last straw that crushes the CSS preprocessor and allows me to write pure CSS 100% of the time, because now I tend to use Sass when I need mixin or function.

I have written a bunch of notes on the mixin proposal and its initial draft specifications to let you know why I want this feature.

3. // In-line comments

Yes, please! This is a minor developer convenience that makes CSS comparable to annotation writing in other languages. I'm pretty sure writing JavaScript annotations in my CSS should be in my list of stupidest CSS errors (even if I didn't put it there).

4. font-size: fit

I just hate arithmetic, okay? ! Sometimes I just want a word or short title that size fits the container it is in. We can use tools like clamp() for fluid typography, however, this is still a math I don't want to bother with. You might think that using container queries and container queries units for font size setting might be a solution, but that's no better than viewport units.

Ryan's Wish List

I am just a simple, small town CSS developer and am very happy with all the new features that have appeared in my browser over the past few years. What else can I ask for?

5. More anchor positioning in browsers!

I don't need more persuasion about CSS anchor positioning, I already believe it! After learning how it works for most of November, I knew I wouldn't be able to use it anytime soon in December.

At the end of 2024, only Chromium-based browsers support it, and unfortunately, fallback and progressive enhancement are not easy. However, there is a polyfill available (which is great), but that means adding another piece of JavaScript code, which contrasts with the problem solved by anchor positioning.

But I was patient, I waited a long time to get: has entered the browser, and now it has been "newly available" in Baseline for a year (can you believe it?).

6. Raise elements to #top-layerNo need for pop-up?

I like anchor positioning, I like popups, they match very well!

The clever thing about popups is that they appear in #top-layer, so you can avoid stacking issues related to z-index. This may be all most people need, but it will be fun to have other ways to move the elements there. Also, now that I know #top-layer exists, I want to use it to do more things - I want to know what's out there. What exactly happened?

Okay, I probably should start with the specification. It turns out that the CSS Position Layout Module Level 4 draft discusses #top-layer, its purpose, and methods of handling the styles of elements contained therein. Interestingly, #top-layer is controlled by the user agent and seems to be a byproduct of the full screen API.

Dialogues and pop-ups are currently possible, but optimistically, the existence of these features might mean that elements can be promoted to #top-layer in other ways in the future. This is most likely a coyote/road runner type case, as I'm not quite sure what I'll do with it once I get it.

7. Add layer attribute to

tags

Personally, the cascade changed the way I wrote CSS. I think it would be great if we could include a layer attribute on the

tag. Imagine being able to include a CSS reset in your project, for example:

Or, dynamically add the CSS section according to the page you visited and integrate it into your cascade:

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

This feature is proposed on the CSSWG repo, just like most things in life:

It's complicated

<code>
<link href="/styles/main.css" rel="stylesheet">
<link href="/components/card.css" layer="components" rel="stylesheet"></code>

.

Browsers are particularly picky about attributes they don't recognize, plus clear concerns about handling fallbacks. The topic was also submitted to the W3C Technology Architecture Group (TAG) for discussion, so there is still hope!

Juandi's Wish List

I have to admit that I wasn't there when the internet was wild and people had click counters. In fact, I think I'm pretty young compared to your average network connoisseur. While I know how to make layouts with float (the first web course I chose is very outdated), I didn't have to endure it for a long time before using Flexbox or CSS Grid and never gritted my teeth on IE and browser support.

So, compared to the features that the network really needed in the past - and even some of the current ones, the following wish might seem like a trivial request. Anyway, here are three trivial requests I hope to see in 2025:

8. Get child element count and index as integers

This is one of those things you swear it should already be possible with CSS. The situation is as follows: I find myself wanting to know the total number of indexes or child elements of an element in its sibling. I can't use the counter() function because sometimes I need integers instead of strings. The current method is to hardcode the index in HTML:

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

• Milk
• Eggs
• Cheese

Or, write each index in CSS:

<code>
<link href="/styles/main.css" rel="stylesheet">
<link href="/components/card.css" layer="components" rel="stylesheet"></code>

Either way, I always leave the feeling that it should be easier to quote this number; the browser already has this information, and it's just a matter of making it public to the author. It will make the code for interleaved animations more beautiful, concise, or just change the style based on the total number.

Luckily, there is already a working draft proposal for sibling-count() and sibling-index() functions. While the syntax may change, I do hope to hear more about them in 2025.

<code></code>

9. Methods to balance flex-wrap

I stole this from Adam Argyle, but I do wish there was a better way to balance the flex-wrap layout. When elements wrap lines one by one as the container shrinks, they are either left with a gap alone (I don't hate it) or grow to fill it (which makes me feel very painful):

I wish there was a more native way to balance line break elements:

This is definitely annoying.

10. Easier to read/research CSSWG discussion method

I really like CSSWG and everything it does, so I spent a lot of time reading their draft work, GitHub questions or notes about their meetings. But while I like to jump from one link to another in their GitHub, it's hard to find all the questions related to a particular discussion.

I think this raises the bar for getting started in expressing your opinions on certain topics. If you want to get involved in a question, you should understand the big picture of all the discussion (what said, why some things don't work, other things to consider, etc.), but it's usually scattered across several questions or meetings. While the questions may be lengthy, it's not a problem (I like to read them), but it's just not aware that part of the discussion exists somewhere.

So while it's not a direct CSS wish, I'm hoping there's an easier way to get to know the whole story of the discussion before getting involved.

What is on your wish list?

We asked! You answered! Here are a few choices from the crowd:

• Directly rotate the background image, for example background-rotate: 180deg
• CSS random() with parameters of range, extension and type
• A CSS anchor point positioning mode allows positioning the mouse cursor, pointer, or touch point position
• A string selector used to query a specific word in a text block and apply a style every time the word appears
• A native .visually-hidden class.
• position: sticky with a :stuck pseudo-class

I wish you all the best in 2025...

The trajectory of CSS-Tricks has not always been so smooth in the last few years, so our biggest wish for 2025 is to continue writing and inspiring discussions about the web. Happy 2025!

The above is the detailed content of A CSS Wishlist for 2025. For more information, please follow other related articles on the PHP Chinese website!