What’s Still Missing From CSS in 2025

CSS had a landmark 2024. Cross-document view transitions, scroll-driven animations, anchor positioning, and animating to height: auto all landed in browsers. Despite that haul, developers still have a queue of feature requests. Three members of our team and several readers shared what they’d like to see next.

Conditional Logic and Smarter Values

The if() Conditional Is in the Pipeline

A conditional if() statement is officially on the CSSWG’s radar—the group resolved to add it to the CSS Values Module Level 5 spec. It’s not shipped yet, and a formal definition plus browser implementation could take a while. But when it arrives, it’s expected to be a cornerstone for container style queries, letting authors apply styles conditionally based on the styles of other elements. Combined with :has(), it would make truly context-aware styling far more powerful.

Mixins and Inline Comments

Native CSS mixins would be a welcome luxury. Right now, light abstractions like functions or mixins push many developers toward preprocessors like Sass. A specification draft for CSS mixins already exists, and baking that capability into the platform could let more people write plain CSS exclusively.

On the minor convenience front, support for // inline comments would bring CSS in line with JavaScript and other languages—and prevent a common source of accidental syntax errors.

Fluid Type Without the Math

Developers often reach for clamp() or container query units to scale text, but both require manual calculation. A hypothetical font-size: fit would size a word or heading to its container without the mental overhead. It’s not on any official roadmap, but it’s a persistent wish.

Layout, Layers, and the Top Layer

Better Wrapping Behavior for Flexbox

When flex items wrap, the last row often ends up with awkward empty space or items that stretch to fill the line, depending on the alignment. A more native way to balance flex-wrap layouts—so wrapped lines distribute items more evenly—is high on the wishlist. It’s a small quality-of-life improvement that would save a lot of fiddling.

Cascade Layers have changed how many developers structure CSS. The natural next step would be a layer attribute on <link> tags, so stylesheets can be dropped directly into the appropriate layer from the HTML:

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

That would also enable loading stylesheets conditionally per page and still merging them into your layer order:

<!-- 
Global styles with layers defined, such as:
 @layer reset, typography, components, utilities;
-->
<link rel="stylesheet" href="https://css-tricks.com/styles/main.css"> 

<!-- Add only to pages using card components  -->
<link rel="stylesheet" href="https://css-tricks.com/components/card.css" layer="components">

The idea was proposed in the CSSWG repo, and it’s complicated—browsers are hesitant about unknown attributes, and fallback behavior is tricky. The topic has also gone to the W3C Technical Architecture Group for discussion, so it’s not dead yet.

Elements in the Top Layer Without Popovers

Popovers and dialogs get promoted to the #top-layer, which neatly sidesteps z-index battles. That’s a great feature, but it would be nice to promote arbitrary elements to the top layer directly. The CSS Position Layout Module Level 4 spec covers how the top layer works and notes it’s tied to the Fullscreen API. For now, popovers and dialogs are the only practical routes—but the door may be open for more.

Anchor Positioning Needs Broader Support

Anchor positioning is compelling—it makes attaching tooltips, menus, and onboarding UI to elements trivial. The catch: as of late 2024, only Chromium browsers support it, and fallbacks aren’t easy. A polyfill exists, but adding JavaScript defeats part of the purpose. Developers who waited years for :has() support are willing to wait again, but they’re eager for the feature to reach Baseline.

Counters, Indices, and Randomness

Exposing Sibling Counts and Indices as Integers

Currently, there’s no direct way to reference an element’s index among its siblings or the total number of siblings as an integer. The counter() function returns a string, which isn’t always useful. Workarounds require hardcoding values into HTML attributes:

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

or repeating them manually in CSS:

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

The browser already has this data internally; exposing it would simplify staggering animations and count-based styling. A Working Draft proposal for sibling-count() and sibling-index() functions already exists.

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

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

A Real random() Function

CSS has no native randomness. A random() function with parameters for range, spread, and type would be useful for generative art, subtle variation in textures, and procedural effects directly in stylesheets.

Targeting the Cursor

A natural extension of anchor positioning would be a mode that lets elements anchor to the mouse cursor, pointer, or touch point. That would enable lightweight spotlight effects and context menus without tracking mouse movement in JavaScript.

Styling By Text and State

A String Selector for Words

Selectors based on text content don’t exist, but a string selector to match any occurrence of a specific word in a block of text was suggested—letting authors style every instance of a term without wrapping it in a span in the markup.

A Native .visually-hidden Utility

The accessibility sta