Interop 2026

Home » Interop 2026
Leave a Comment / Coding / By

Interop 2026 is formally a thing. So, you know all of those wild, new CSS features we’re always poking at but always putting under a “lack of browser support” caveat? The Big Three — Blink (Chrome/Edge), WebKit (Safari), and Mozilla (Firefox) — are working together to bring full and consistent support to them!

You can read the blog posts yourself:

An, yes, there’s plenty to get excited about specifically for CSS:

Anchor positioning

From our guide:

CSS Anchor Positioning gives us a simple interface to attach elements next to others just by saying which sides to connect — directly in CSS. It also lets us set a fallback position so that we can avoid the overflow issues we just described.

Advanced attr()

We’ve actually had the attr() function for something like 15 years. But now we’re gonna be able to pass variables in there… with type conversion!

Container style queries

We can already query containers by “type” but only by size. It’ll be so much cooler when we can apply styles based on other styles. Say:

@container style((font-style: italic) and (--color-mode: light)) 
  em, i, q 
    background: lightpink;

The contrast-color() function

Getting the right color contrast between foreground text and background can be easy enough, but it’s been more of a manual type thing that we might switch with a media query based on the current color scheme. With contrast-color() (I always want to write that as color-contrast(), maybe because that was the original name) we can dynamically toggle the color between white and black.

button 
  --background-color: darkblue;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));

Custom Highlights

Highlight all the things! We’ve had ::selection forever, but now we’ll have a bunch of others:

Pseudo-selectorSelects…Notes
::search-textFind-in-page matches::search-text:currentselects the current target
::target-textText fragmentsText fragments allow for programmatic highlighting using URL parameters. If you’re referred to a website by a search engine, it might use text fragments, which is why ::target-text is easily confused with ::search-text.
::selectionText highlighted using the pointer
::highlight()Custom highlights as defined by JavaScript’s Custom Highlight API
::spelling-errorIncorrectly spelled wordsPretty much applies to editable content only
::grammar-errorIncorrect grammarPretty much applies to editable content only

Dialogs and popovers

Finally, a JavaScript-less (and declarative) way to set elements on the top layer! We’ve really dug into these over the years.

Media pseudo-classes

How often have you wanted to style an <audio> or <video> element based on its state? Perhaps with, JavaScript, right? We’ll have several states in CSS to work off:

  • :playing
  • :paused
  • :seeking
  • :buffering
  • :stalled
  • :muted
  • :volume-locked

I love this example from the WebKit announcement:

video:buffering::after 
  content: "Loading...";

Scroll-driven animations

OK, we all want this one. We’re talking specifically about animation that responds to scrolling. In other words, there’s a direct link between scrolling progress and the animation’s progress.

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

Scroll snapping

Nothing new here, but bringing everyone in line with how the specs have changed over the years!

The shape() function

This is one that Temani has been all over lately and his SVG Path to Shape Converter is a must-bookmark. The shape() can draw complex shapes when clipping elements with the clip-path property. We’ve had the ability to draw basic shapes for years — think circle, ellipse(), and polygon() — but no “easy” way to draw more complex shapes. And now we have something less SVG-y that accepts CSS-y units, calculations, and whatnot.

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

View transitions

There are two types of view transitions: same-document (transitions on the same page) and cross-document (or what we often call multi-page transitions). Same-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 expecting this! I mean, we’ve had zoom for years — our Almanac page was published back in 2011 — but as a non-standard property. I must have overlooked that it was Baseline 2024 newly available and worked on as part of Interop 2025. It’s carrying over into this year.

zoom is sorta like the scale() function, but it actually affects the layout whereas scale() it’s merely visual and will run over anything in its way.

That’s a wrap! Bookmark the Interop 2026 Dashboard to keep tabs on how things are progressing along.

Interop 2026 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

​ 

Leave a Comment

Your email address will not be published. Required fields are marked *