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. Every card below is the feature running in your browser right now, so the page is its own support test.
@supports@supports lines they guard the early ones with.→ CSS in 2026Every feature that became newly or widely available this year, in date order, straight from the dataset.→ Components that size themselves, and grids that finally share their tracks.
At 360px of my own width I go side by side. The window never changed.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 105 · Edge 105 · Firefox 110 · Safari 16 2/22 sites
One short line.
ChooseThis description runs to several lines, which used to push this card’s button out of line with its neighbours.
ChooseTwo lines of text here, a little more than the first.
ChooseYour browser does not have this yet, so the panel above is the fallback.
Replaces: Fixed heights and duplicated track lists to line up the insides of sibling cards. Children join the parent’s grid lines.
Chrome 117 · Edge 117 · Firefox 71 · Safari 16 4/22 sites
Left to right: the accent bar is at the start of the line.
من اليمين إلى اليسار: الشريط في بداية السطر أيضًا.
Your browser does not have this yet, so the panel above is the fallback.
Replaces: margin-left and padding-right, which are wrong the moment a layout runs right to left. inline and block follow the writing mode.
Chrome 89 · Edge 89 · Firefox 66 · Safari 15 15/22 sites
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome not yet · Edge not yet · Firefox not yet · Safari 27 3/22 sites
Less specificity warfare, fewer wrapper classes.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 105 · Edge 105 · Firefox 121 · Safari 15.4 14/22 sites
Your browser does not have this yet, so the panel above is the fallback.
Replaces: A preprocessor kept only for nesting. Rules nest natively, including media and container queries inside the rule they modify.
Chrome 120 · Edge 120 · Firefox 117 · Safari 17.2 1/22 sites
Your browser does not have this yet, so the panel above is the fallback.
Replaces: Specificity escalation and !important. Layers decide which stylesheet wins before specificity is consulted, so a reset can never beat a component.
Chrome 99 · Edge 99 · Firefox 97 · Safari 15.4 5/22 sites
Full reference and fallback → MDN ↗ Learn CSS: the cascade →
I am in the card, so I am styled.
I am inside the slot. The scope stopped before it reached me.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 143 · Edge 143 · Firefox 146 · Safari 26.4 0/22 sites
Perceptual colour spaces, and palettes derived in CSS instead of in a build step.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 111 · Edge 111 · Firefox 113 · Safari 15.4 0/22 sites
Full reference and fallback → MDN ↗ Palette generator (OKLCH) →
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 111 · Edge 111 · Firefox 113 · Safari 16.2 11/22 sites
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 125 · Edge 125 · Firefox 128 · Safari 18 7/22 sites
One declaration holds both values. The checkbox only flips color-scheme.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 123 · Edge 123 · Firefox 120 · Safari 17.5 2/22 sites
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 147 · Edge 147 · Firefox 146 · Safari 26 0/22 sites
Animation that follows scroll and state, without a library listening for either.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 111 · Edge 111 · Firefox 144 · Safari 18 0/22 sites
Scroll this box. The bar is driven by the scroll position, with no listener and no JavaScript.
Keep going.
A little further.
Nearly at the end.
Done. The bar is full.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 115 · Edge 115 · Firefox not yet · Safari 26 1/22 sites
display: none.Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 117 · Edge 117 · Firefox 129 · Safari 17.5 2/22 sites
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 85 · Edge 85 · Firefox 128 · Safari 16.4 8/22 sites
Things that used to need JavaScript and a positioning library.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 116 · Edge 116 · Firefox 125 · Safari 17 2/22 sites
Small properties that remove whole categories of hack.
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 114 · Edge 114 · Firefox 121 · Safari 17.5 14/22 sites
Your browser does not have this yet, so the panel above is the fallback.
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.
Chrome 123 · Edge 123 · Firefox 152 · Safari 26.2 0/22 sites
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.