Skip to main content

Harshal V. LADHE

Interop 2026 and CSS Snapshot 2026: What They Mean for CSS

What Interop 2026 and CSS Snapshot 2026 really mean.
Published at:
Last updated:
Estimated reading time:15 min read
Cover showing a three-circle diagram of Baseline, Interop and CSS Snapshot, with browser score rings, Snapshot stability tiers and the Interop 2027 timeline.(opens full-size image in a new tab)
Baseline, Interop and the CSS Snapshot answer three different questions. Below them: Interop scores as of September 2026, the Snapshot's four stability groups and the Interop 2027 timeline.

Every year, two documents appear that sound as if they answer the question "what's in CSS now?" One is Interop, the project in which browser makers agree on a set of features to make work the same everywhere. The other is the W3C's CSS Snapshot, a list of the specifications that make up CSS. Both get shared widely, and both get misread, usually as a list of features that are ready to use.

Neither of them is that. Interop is a plan for the coming year, measured by tests. The Snapshot is a statement about how mature each specification is. The question "can I use this today?" belongs to a third source, Baseline. Knowing which question each one answers makes all three far more useful.

In this post, we'll cover:

  • The three questions, and which source answers each one
  • What Interop is, how its focus areas are chosen and how it's scored
  • The Interop 2026 focus areas for CSS, and what each one means for you
  • How to read the Interop dashboard
  • Where Interop 2026 stands, and what happens next with Interop 2027
  • What the CSS Snapshot 2026 is, how it groups specifications and what it isn't
  • Why CSS has levels and modules instead of version numbers
  • A simple process for deciding whether to use a new feature

Three Sources, Three Questions

BaselineInteropCSS Snapshot
Question it answersCan I use this in current browsers?Which features are browser makers working to align this year?Which specifications are stable?
Who publishes itThe W3C WebDX Community Group, shown on MDN, caniuse and web.devBrowser makers and other participants, togetherThe W3C CSS Working Group
Based onWhich browser versions support a featureShared tests in the web-platform-tests projectHow mature each specification is
How oftenUpdated continuouslyOnce a year, scored all yearOnce a year
Best used forDeciding what to shipPredicting what will become usableJudging whether syntax is likely to change

The rest of this post is about the second and third columns. If you're new to Baseline: a feature is Baseline newly available once it works in the current versions of Chrome, Edge, Firefox and Safari, and Baseline widely available 30 months after that. For the CSS features that became usable this year, with support versions for each, see What's New in CSS in 2026: What You Can Use Now.

What Interop Is

Browsers don't only differ in which features they support. Two browsers can both "support" a feature and still behave differently in the details, and those differences are often what makes a feature painful to use. Interop exists to fix both problems at once.

It began in 2021 as Compat 2021, focused on a handful of areas developers had reported as the most painful, such as flexbox and grid. It was renamed Interop in 2022 and has run every year since. It's run by representatives of companies that contribute heavily to browser engines, including Apple, Bocoup, Google, Igalia, Microsoft and Mozilla.

When this post talks about engines, it means the three that render almost every page on the web: Blink (Chrome, Edge, Opera and most other Chromium browsers), Gecko (Firefox) and WebKit (Safari, and every browser on iOS). A feature is only dependable once it works the same in all three.

Each year works the same way:

  1. Anyone can propose a focus area. Proposals are filed publicly each September, often by developers, with evidence of why the feature matters and where browsers disagree.
  2. Participants agree on a list. Every focus area needs the participants' agreement, so a feature only gets in if every engine is willing to work on it.
  3. Each focus area gets tests. The tests live in web-platform-tests, the shared test suite every browser engine runs.
  4. Progress is scored all year. Each browser gets a score for the share of focus-area tests it passes, and the project gets an overall "interop" score for the tests that pass in every browser.

Some years also include investigation areas. These aren't scored. They're for problems that need work before they can be tested, such as writing the tests themselves.

Interop 2026: The CSS Focus Areas

Interop 2026 was announced on 12 February 2026, with 20 focus areas, 15 of them new and 5 continuing from 2025, plus four investigation areas. Its CSS focus areas are:

  • Advanced attr(): reading HTML attributes as typed values, such as numbers, lengths and colours, in any property. See HTML Attributes as Real CSS Values with Typed attr().
  • Container style queries: querying a container's custom properties with @container style(). See The Frontier: Style Queries.
  • contrast-color(): picking whichever of black or white contrasts better with a given colour. See contrast-color(): Automatic Readable Text on Any Background.
  • Custom highlights: styling arbitrary ranges of text, such as search results, with ::highlight().
  • Media pseudo-classes: :playing, :paused, :seeking, :buffering, :stalled, :muted and :volume-locked, for styling <audio> and <video> by their state.
  • Scroll-driven animations: animations whose progress follows scrolling, with animation-timeline. See animation-timeline.
  • Scroll snap: consistent snapping behaviour across engines.
  • shape(): responsive, path-like shapes for clip-path and other properties. See Path-Based clip-path with the shape() Function.
  • Anchor positioning, carried over from 2025.
  • View transitions, continuing from 2025 and now extended to cross-document view transitions between pages.
  • CSS zoom, carried over from 2025.

Two more areas matter to CSS authors. Dialogs and popovers covers <dialog closedby>, popover="hint" and the :open pseudo-class, which is how you style an open dialog, <details> or <select>. Web compat includes making the unprefixed user-select work everywhere, so -webkit-user-select is no longer needed. Outside CSS, the 2026 focus areas include the Navigation API, scoped custom element registries, IndexedDB's getAllRecords() and WebTransport.

What the List Tells You

The list mixes two kinds of feature. Some, such as anchor positioning and scroll-driven animations, were already in most browsers and are there to iron out differences. Others, such as typed attr() and the media pseudo-classes, were missing from at least one engine and are there to get them shipped everywhere.

Either way, a focus area is a public commitment by every engine to work on that feature in that year, backed by tests. That makes it the best predictor there is of what will become usable soon. If a feature you want is a 2026 focus area, it's reasonable to expect it to reach all three engines, or to behave much more consistently, within the year. If it isn't, there's no such commitment, even if one browser already has it.

Carried-over areas deserve a second look. They're usually features that are large or hard to get exactly right, and being carried over means they aren't finished yet, not that they've stalled.

Reading the Interop Dashboard

Progress is published on the Interop 2026 dashboard at wpt.fyi. For each focus area, it shows each browser's score, which is the percentage of that area's tests it passes, and an overall interop score for the tests that pass in all of them.

A few things are worth knowing when you read it:

  • Stable and experimental. The dashboard can show scores for stable releases or for preview builds, such as Chrome Canary, Firefox Nightly and Safari Technology Preview. Experimental scores rise first; stable scores are what your users have.
  • A score isn't a support table. A browser can pass 90% of an area's tests and still be missing the part you need, or pass few tests because of edge cases you'll never hit. For a specific property or value, check MDN or caniuse.
  • The interop score is the one to watch. A single browser's score can be high while the others lag. The interop score only rises when the same tests pass everywhere, which is what makes a feature dependable.

Where Interop 2026 Stands

By early September 2026, the experimental builds of every browser passed more than 90% of the focus-area tests:

Browser (experimental build)Score out of 100, 3 September 2026
Chrome98
Edge98
Firefox96
Safari92

For comparison, Interop 2025 ended with an overall interop score of 95, with Chrome at 99, Edge at 98, Firefox at 99 and Safari at 98. Scores usually keep climbing through the last quarter of the year, and stable releases follow the experimental ones by a few weeks to a few months.

What Happens Next: Interop 2027

The cycle for next year is already under way. Proposals for Interop 2027 were open from 3 to 23 September 2026, and the participants are now choosing among them. The current plan is to publish the scope on 4 February 2027 and launch on 11 February 2027, though the dates may move.

Any Interop 2026 focus area that hasn't reached full interoperability by the end of the year is automatically resubmitted for 2027. So if a 2026 feature you care about is still behind in one browser, there's a good chance it will stay on the list for another year. For the 2026 areas that still have gaps, and the other features most likely to become usable in 2027, see What's New in CSS in 2027: What to Expect.

The W3C CSS Snapshot 2026

The CSS Working Group publishes a CSS Snapshot each year. CSS Snapshot 2026 was first published as a W3C Group Note on 26 February 2026 and revised on 26 March and 22 June 2026. The 22 June version is the current one.

To read it, it helps to know how a W3C specification matures. It starts as a Working Draft, which can still change a lot. When the Working Group considers it feature-complete, it becomes a Candidate Recommendation, and browsers are expected to implement it. Once it has proven implementations, it can become a Recommendation, the W3C's final standard. Most CSS modules spend years as Working Drafts or Candidate Recommendations while browsers already ship them.

The Snapshot does two things.

It Lists the Specifications That Make Up CSS

CSS isn't one specification. It's dozens of modules, such as Selectors, Color, Grid Layout and Values and Units, each moving at its own pace. The Snapshot gathers them into one list and groups them by how stable each specification is:

  • The Official Definition: the specifications considered stable and complete enough to define CSS as of the Snapshot.
  • Reliable Candidate Recommendations: modules that are feature-complete and unlikely to change much, though they haven't finished the full W3C process.
  • Fairly Stable Modules with limited implementation experience: specifications that look settled, but haven't been implemented widely enough to prove it.
  • Modules with Rough Interoperability: specifications that are implemented, but where browsers still differ.

It Explains How to Implement CSS Responsibly

The rest of the Snapshot is written for browser makers. It covers how to handle experimental and partial implementations, so that early versions of a feature don't become something websites depend on before the specification is settled. It also lists exceptions: features that are safe to ship before their specification reaches Candidate Recommendation, because they're stable in practice.

What It Isn't

  • It isn't a list of features you can use. The Snapshot says so itself: it includes modules "by specification stability, not Web browser adoption rate". A specification can be stable years before the last browser ships it, and a feature can be in every browser while its specification is still changing.
  • It isn't CSS4. There is no CSS4, and the Snapshot isn't a new version of CSS. It's a description of the language as it stands in 2026.
  • It isn't a W3C Recommendation. A Group Note is published by the Working Group, but it isn't endorsed by the W3C or its members the way a Recommendation is.

For everyday work, the Snapshot is most useful when you depend on syntax that might change, for example when you write a polyfill or a tool that parses CSS. A feature in a module listed as reliable is a safer foundation than one in a module still settling.

Why CSS Has No Version Numbers

CSS 1 and CSS 2 were single specifications. After CSS 2.1, the language was split into modules, so that each part could move forward without waiting for the rest. Modules have levels instead of versions: Selectors Level 4, Color Level 5 and so on. A new level builds on the previous one and doesn't replace it.

Calling everything after CSS 2.1 "CSS3" was a convenient label, not a specification, and there's no CSS4 because there's no longer a single thing to number. That's why the useful question about any year is what became usable, not which version came out, and why the Snapshot describes CSS at a point in time instead of declaring a new version of it.

Deciding Whether to Use a Feature

Put together, the three sources give a simple process for any new feature:

  1. Check Baseline. If it's widely available, use it. If it's newly available, use it with a fallback for older browsers, or behind @supports, depending on how much the page relies on it.
  2. If it isn't Baseline, check Interop. A current focus area means every engine has committed to it, so it's worth learning now and using as a progressive enhancement. Without one, treat it as experimental, and keep anything essential independent of it.
  3. If you're building on its syntax, check the Snapshot. For polyfills, tooling or large design-system decisions, a specification in a stable module is less likely to change under you.
/* Works everywhere */
.card {
  background: white;
  color: black;
}

/* An Interop 2026 focus area: use it where it's supported */
@supports (color: contrast-color(red)) {
  .card {
    --surface: var(--brand, white);
    background: var(--surface);
    color: contrast-color(var(--surface));
  }
}

Frequently Asked Questions

Wrapping Up

Interop and the CSS Snapshot are both worth following, as long as you read them for what they are. Interop is the year's plan, backed by tests and scored in public, and it's the best guide to what will become usable next. The Snapshot is the CSS Working Group's view of which specifications have settled, written mainly for browser makers. For the day-to-day question of what you can ship, Baseline and the support tables remain the right tools.

Key points to remember:

  • Baseline answers "can I use it now?"; Interop answers "what's being aligned this year?"; the Snapshot answers "which specifications are stable?"
  • Interop focus areas are agreed by every engine and measured by shared tests, which makes them a strong predictor
  • The Interop 2026 CSS areas include advanced attr(), container style queries, contrast-color(), custom highlights, scroll-driven animations and shape()
  • On the dashboard, the interop score, not a single browser's score, shows when a feature is dependable
  • By September 2026, every engine scored 92 or higher on experimental builds; Interop 2027 launches in February 2027
  • The CSS Snapshot 2026 is a W3C Group Note that groups specifications by stability; it isn't a feature list, CSS4 or a Recommendation

Every time a new Interop list or CSS Snapshot comes out, I see it shared as a list of things we can finally use, and I wanted one place that untangles the three sources that actually answer different questions. I hope the next time one of them lands in your feed, you know exactly which question it answers, and which tool to open for the rest. 🧭

  • What's New in CSS in 2027: What to Expect

    CSS features closest to working everywhere in 2027.
    An evidence-based look at the CSS features most likely to work in every browser in 2027: typed attr(), customisable select, random(), @function and more.
    Published at:
  • What's New in CSS in 2026: What You Can Use Now

    CSS features that reached every browser in 2026.
    What became usable in CSS in 2026: anchor positioning, scroll-driven animations, @scope, contrast-color() and more, plus Chromium-only and Safari-first CSS.
    Published at:
  • CSS Cascade Layers (@layer): End Specificity Wars in Large Codebases

    Control CSS priority with layer order, not specificity.
    Learn how CSS cascade layers (@layer) set priority by layer order instead of specificity — unlayered styles, the !important reversal, revert-layer, layering third-party CSS, the full cascade sort order, migrating a large codebase and putting utility classes last.
    Published at: