Interop 2026 | CSS-Tips

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

You’ll be able to 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 offers us a easy interface to connect parts subsequent to others simply by saying which sides to attach — straight 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 truly had the attr() perform for one thing like 15 years. However now we’re gonna have the ability to cross variables in there… with kind conversion!

Container type queries

We will already question containers by “kind” however solely by measurement. It’ll be a lot cooler after we can apply kinds based mostly on different kinds. Say:

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

The contrast-color() perform

Getting the proper colour distinction between foreground textual content and background might be straightforward sufficient, however it’s been extra of a handbook kind factor that we’d change with a media question based mostly on the present colour scheme. With contrast-color() (I at all times wish to write that as color-contrast(), perhaps as a result of that was the unique title) we are able to dynamically toggle the colour between white and black.

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

Customized Highlights

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

Dialogs and popovers

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

Media pseudo-classes

How typically have you ever wished to type an or component based mostly 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 consistent with how the specs have modified through the years!

The form() perform

That is one which Temani has been throughout recently and his SVG Path to Form Converter is a must-bookmark. The form() can draw advanced shapes when clipping parts with the clip-path property. We’ve had the flexibility to attract fundamental shapes for years — suppose circle, ellipse(), and polygon() — however no “straightforward” means to attract extra advanced shapes. And now we now have one thing much less SVG-y that accepts CSS-y models, 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 varieties of view transitions: same-document (transitions on the identical web page) and cross-document (or what we regularly 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 revealed again in 2011 — however as a non-standard property. I will need to have missed that it was Baseline 2024 newly accessible 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, however it truly impacts the structure whereas scale() it’s merely visible and can run over something in its means.

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