Modern CSS
CSS changed more between 2022 and 2026 than in the ten years before. Most of what a preprocessor, a positioning library or a scroll listener used to do is now one declaration. The only question left is whether your users’ browsers have it, and that has a dated answer.
@supportsComponents that size themselves, and grids that finally share their tracks.
Replaces: Media queries that guess at a component’s width from the viewport. The component asks its own container instead, so the same card works in a sidebar and in a hero.
Shipped by 5 of the 24 sites we have decoded.
Replaces: Fixed heights and duplicated track lists to line up the insides of sibling cards. Children join the parent’s grid lines.
Shipped by 8 of the 24 sites we have decoded.
Replaces: margin-left and padding-right, which are wrong the moment a layout runs right to left. inline and block follow the writing mode.
Shipped by 16 of the 24 sites we have decoded.
Replaces: A JavaScript positioning library for tooltips, menus and popovers. One element is tethered to another in CSS, with fallbacks when it would overflow.
Not yet complete in Chrome, Edge, Firefox. The dataset counts a feature as supported only when every part of it has shipped, so an engine listed here may already have most of it. Check the MDN table before ruling it out.
Shipped by 5 of the 24 sites we have decoded.
Less specificity warfare, fewer wrapper classes.
Replaces: Toggling a class on a parent from JavaScript. A parent can be styled by what it contains: a card with an image, a form with an invalid field.
Shipped by 16 of the 24 sites we have decoded.
Replaces: A preprocessor kept only for nesting. Rules nest natively, including media and container queries inside the rule they modify.
Shipped by 1 of the 24 sites we have decoded.
Replaces: Specificity escalation and !important. Layers decide which stylesheet wins before specificity is consulted, so a reset can never beat a component.
Shipped by 9 of the 24 sites we have decoded.
Live demo and fallback → MDN reference ↗ Learn CSS: the cascade →
Replaces: BEM-length class names invented to stop styles leaking. A rule applies from one element down to a boundary you name, and no further.
In every core browser since Mar 2026. It becomes widely available 30 months after that.
Shipped by 0 of the 24 sites we have decoded.
Perceptual colour spaces, and palettes derived in CSS instead of in a build step.
Replaces: HSL, whose "lightness" is not the lightness an eye sees. Equal steps in OKLCH look like equal steps, so a tint ramp does not go muddy in the middle.
Shipped by 1 of the 24 sites we have decoded.
Live demo and fallback → MDN reference ↗ Palette generator (OKLCH) →
Replaces: A Sass function, or a hand-picked hex for every hover state. Two colours are mixed in the browser, in the colour space you choose.
Shipped by 12 of the 24 sites we have decoded.
Replaces: A token for every variant of a brand colour. Hover, muted and border colours are derived from one source value by channel arithmetic.
In every core browser since Sept 2024. It becomes widely available 30 months after that.
Shipped by 9 of the 24 sites we have decoded.
Replaces: Every colour declared twice, once inside a prefers-color-scheme block. One declaration carries both values.
In every core browser since May 2024. It becomes widely available 30 months after that.
Shipped by 2 of the 24 sites we have decoded.
Live demo and fallback → MDN reference ↗ Pattern: dark mode →
Replaces: Computing in JavaScript whether text on a dynamic background should be black or white. The browser picks the readable one.
In every core browser since Apr 2026. It becomes widely available 30 months after that.
Shipped by 0 of the 24 sites we have decoded.
Animation that follows scroll and state, without a library listening for either.
Replaces: A router-level animation library. The browser snapshots the old and new states and animates between them, across full page loads too.
In every core browser since Oct 2025. It becomes widely available 30 months after that.
Shipped by 1 of the 24 sites we have decoded.
Replaces: A scroll listener and an IntersectionObserver driving classes. An animation’s progress is tied to scroll position, off the main thread.
Not yet complete in Firefox. The dataset counts a feature as supported only when every part of it has shipped, so an engine listed here may already have most of it. Check the MDN table before ruling it out.
Shipped by 2 of the 24 sites we have decoded.
Replaces: A requestAnimationFrame trick to animate something in from display: none. The entry state is declared, and the transition just runs.
In every core browser since Aug 2024. It becomes widely available 30 months after that.
Shipped by 2 of the 24 sites we have decoded.
Replaces: Gradients and custom properties that snap instead of animating. A typed property can be interpolated, so a gradient angle or a hue can transition.
In every core browser since Jul 2024. It becomes widely available 30 months after that.
Shipped by 9 of the 24 sites we have decoded.
Things that used to need JavaScript and a positioning library.
Replaces: A hand-rolled dropdown with focus handling, an escape-key listener and a z-index fight. The top layer, light dismiss and keyboard behaviour come with the attribute.
In every core browser since Jan 2025. It becomes widely available 30 months after that.
Shipped by 3 of the 24 sites we have decoded.
Small properties that remove whole categories of hack.
Replaces: Manual line breaks and max-width guesses to stop a headline ending on one orphaned word. The browser balances the lines.
In every core browser since May 2024. It becomes widely available 30 months after that.
Shipped by 17 of the 24 sites we have decoded.
Replaces: A script that resizes a textarea as you type. The field grows to fit its content.
In every core browser since Jun 2026. It becomes widely available 30 months after that.
Shipped by 1 of the 24 sites we have decoded.
Every status, date and browser version on this page is read at build time from web-features (version 3.39.0, Apache-2.0), the open dataset maintained by the W3C WebDX Community Group that MDN’s badges are drawn from. We do not restate it from memory, and we did not decide what counts as safe: widely available means every core browser has had it for at least 30 months, newly available means every core browser has it now. The one sentence on what each feature replaces is ours.
See these features in real sites: decode any page to read the CSS it declares, or start from the basics in Learn CSS and the CSS tools.