Frontend Feeds

Frontend Masters Blog

My Interop 2027 Picks

Chris Coyier3 min read

Read the original on blog.master.dev ↗

I absolutely love that everyone is chiming in on Interop this year with blog posts. Surely, in no small part, thanks to the official ranking tool. Gotta put in my votes! I’m only doing three, so you know they gotta be good.

#1) margin-trim in CSS

I’m picking this as my top vote because I think about it all the time. I always freaking hate it when I have to do like:

.element {
  
  > *:last-child {
    margin-block-end: 0;
  }
}

Janky.

I’d rather deal with it right on the container:

.element {
  margin-trim: block;
}

The point is that if the element has padding (which it likely does), extra margin on the final element (in any direction) will make that space too big. I love thinking about the container being able to chop off that extra margin. No margin! Bad margin!

The brainworm:

Any time an element has padding in a direction, add margin-trim in that same direction.

Safari has had it for a long time. It’s nice that Chrome just picked it up last month, but now we need Firefox to get on board. That makes this a perfect Interop vote.

#2) random() in CSS

I think once we have it and everyone knows we have it (and it works everywhere), we humans responsible for the CSS are going to reach for it regularly.

Any design effect with details that don’t need to be exactly prescribed could have an element of randomness that might end up looking awesome.

  • Does the placement need to be precise, or could it be randomly offset a little?
  • Does the gradient angle need to be exact, or could it start in a random place each time?
  • Do those grungy speckles need to be exactly where they are, or should they be randomly sized and placed?
  • If a bunch of elements are being animated at once, do they need precise timing, or could they stagger with slightly random timing?
  • Does that curvy clipping path need to be exactly right there, or could it have a bit of random variation?

I think it can add elegance and fun to a design, and even pull off certain effects that might be tedious or annoying without it. Still a fan of my own starfield parallax demo (which is way smoother in Safari and makes me wonder why).

Brecht De Ruyte has a good article on it recently (and we have several of our own as well). I like this demo from Brecht where obviously there is a bunch of randomization involved, but the effect as a whole isn’t random, it’s an established aesthetic put into place.

Browser support also seems close, and the implementation doesn’t seem overly difficult, so let’s get it done!

#3) reading-flow and reading-order in CSS

I hate the fact that if you basically ever use order you’re breaking the law. Just by its very use, if it actually re-orders something, now you’ve broken the connection between visual order and tab order, and that’s an accessibility no-no.

This is the one thing that can actually fix that.

`reading-flow` is great in that means we can fix useful usage of `order` in flex/grid layouts. Not supported everywhere, hence a vote from me in Interop 2027. (Any why no support with grid-lanes?)

Here's a look: pic.twitter.com/frJ2332RUD

— Chris Coyier (@chriscoyier) November 7, 2026

Smarter People Weigh In!

Lots of people are blogging their votes this year. You love to see it.