Interop 2026 | CSS-Tips

Interop 2026 is formally a factor. So, you recognize all of these wild, new CSS options we’re at all times poking at however at all times placing beneath a “lack of browser assist” caveat? The Huge Three — Blink (Chrome/Edge), WebKit (Safari), and Mozilla (Firefox) — are working collectively to convey full and constant assist to them!

You possibly can learn the weblog posts your self:

An, sure, there’s lots to get enthusiastic about particularly for CSS:

Anchor positioning

From our information:

CSS Anchor Positioning provides us a easy interface to connect components subsequent to others simply by saying which sides to attach — immediately in CSS. It additionally lets us set a fallback place in order that we are able to keep away from the overflow points we simply described.

Superior attr()

We’ve really had the attr() perform for one thing like 15 years. However now we’re gonna have the ability to cross variables in there… with sort conversion!

Container type queries

We are able to already question containers by “sort” however solely by measurement. It’ll be a lot cooler after we can apply types primarily based on different types. Say:

@container type((font-style: italic) and (--color-mode: mild)) {
  em, i, q {
    background: lightpink;
  }
}

The contrast-color() perform

Getting the correct coloration distinction between foreground textual content and background may be simple sufficient, nevertheless it’s been extra of a guide sort factor that we would swap with a media question primarily based on the present coloration scheme. With contrast-color() (I at all times need to write that as color-contrast(), perhaps as a result of that was the unique title) we are able to dynamically toggle the coloration between white and black.

button {
  --background-color: darkblue;
  background-color: var(--background-color);
  coloration: contrast-color(var(--background-color));
}

Customized Highlights

Spotlight all of the issues! We’ve had ::choice without end, however now we’ll have a bunch of others:

Dialogs and popovers

Lastly, a JavaScript-less (and declarative) method to set components on the highest layer! We’ve actually dug into these through the years.

Media pseudo-classes

How usually have you ever needed to type an or ingredient primarily based on its state? Maybe with, JavaScript, proper? We’ll have a number of states in CSS to work off:

• :taking part in
• :paused
• :looking for
• :buffering
• :stalled
• :muted
• :volume-locked

I like this instance from the WebKit announcement:

video:buffering::after {
  content material: "Loading...";
}

Scroll-driven animations

OK, all of us need this one. We’re speaking particularly about animation that responds to scrolling. In different phrases, there’s a direct hyperlink between scrolling progress and the animation’s progress.

#progress {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

Scroll snapping

Nothing new right here, however bringing everybody in step with how the specs have modified through the years!

The form() perform

That is one which Temani has been throughout these days and his SVG Path to Form Converter is a must-bookmark. The form() can draw complicated shapes when clipping components with the clip-path property. We’ve had the power to attract primary shapes for years — assume circle, ellipse(), and polygon() — however no “simple” manner to attract extra complicated shapes. And now we’ve got one thing much less SVG-y that accepts CSS-y items, calculations, and whatnot.

.clipped {
  width: 250px;
  top: 100px;
  box-sizing: border-box;
  background-color: blue;
  clip-path: form(
    from high left,
    hline to 100%,
    vline to 100%,
    curve to 0% 100% with 50% 0%,
  );
}

View transitions

There are two sorts of view transitions: same-document (transitions on the identical web page) and cross-document (or what we frequently name multi-page transitions). Similar-page transitions went Baseline in 2025 and now browsers are working to be cross-compatible implementations of cross-document transitions.

CSS zoom property

Oh, I wasn’t anticipating this! I imply, we’ve had zoom for years — our Almanac web page was printed again in 2011 — however as a non-standard property. I should have missed that it was Baseline 2024 newly obtainable and labored on as a part of Interop 2025. It’s carrying over into this 12 months.

zoom is sorta just like the scale() perform, nevertheless it really impacts the structure whereas scale() it’s merely visible and can run over something in its manner.

That’s a wrap! Bookmark the Interop 2026 Dashboard to maintain tabs on how issues are progressing alongside.