That’s My Rank

Have you ever wondered why new CSS features and other web technologies very often seem to just work across browsers these days? The reason is probably: Interop.

The Interop Project is a collaborative effort between major browser makers — Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla — to improve the Web by making it more consistent and reliable across all browsers. The idea is that instead of each company implementing web standards slightly differently, each year, Interop defines shared goals for the “interoperability” of web standards like HTML and CSS, which are created in organizations such as the W3C or WHATWG. The teams then run automated web platform tests to see if each browser engine correctly supports those standards and track progress publicly to ensure that modern web platform features behave the same everywhere.

It’s hard to overstate the positive impact the Interop Project has had in recent years. For years and years, web developers have had to wrestle with all the quirks and inconsistencies between the different implementations of web standards in browsers. These days, however, both existing features like CSS Grid and Flexbox and even brand-new ones tend to behave much more consistently across browsers. As a consequence, we spend less time wrestling with browsers and more time building reliable, accessible components and interfaces.

But Interop doesn’t happen in a vacuum. What really makes it work is the feedback from the community, from the people designing and building for the Web. Every bug report, every test case, every blog post or social media post pointing out a favorite feature or that something behaves oddly helps the people working on browser engines get a better idea of what the web community actually needs. That’s why you will sometimes notice Jen Simmons or Rachel Andrew ask on social media which features people would like to see prioritized next. And that’s why Jake Archibald, of Mozilla, has now created a neat little tool to get feedback on which Interop proposals matter most: Interop Feature Ranking – a web app where you can rank the proposals you care most about.

The list of proposals is pretty exhaustive. But don’t worry, you don’t have to rank them all. Just scroll through the list, pick the ones that catch your eye, and rank them in whatever order makes sense to you. That’s exactly what I did, so below you’ll find my own little ranking. Your mileage may vary, of course. It’s also neither easy nor necessary to find the “perfect” order. These are simply the features that stood out to me that either caused actual problems in one of my past projects or that I’d love to see working more consistently across browsers.

And now, I’m curious to see how your rankings looks like – and also what the folks involved with Interop will decide to prioritize in 2026. 🍿

Here’s the link again: 👉 Interop Feature Ranking

That’s my rank (top = most important) #

1. CSS @container style()

   Apply styles based on the values of custom properties of a container.
2. CSS @supportsfor at-rules, nesting, and other CSS syntax
3. CSS anchor positioning

   Places an element based on the position of another element.
4. Improve compatibility of pointer events on touch devices
5. < img sizes="auto" loading="lazy" > , and similar on < source>

   Avoids needing to specify sizesin cases where the image has already received layout by CSS.
6. CSS text-box and related longhand properties

   Sets the spacing above and below text based on a font's typographic features.
7. CSS margin-trim

   Removes the margins of child elements when they meet the edges of the container.
8. CSS text-wrap: pretty

   Prioritizes better layout over speed when text is broken into multiple lines.

9. CSS scroll-driven animations

   animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user' s scroll position.

10. CSS accent-color property

    Sets a color for checkboxes, radio buttons, and other form controls.

11. CSS @scope

    Sets the scope for a group of rules.

12. CSS ::beforeand ::afteron replaced elements

    Such as < input> , < img> , and < video> .

13. CSS contrast-color() function

    Picks a color that has guaranteed contrast against a specified foreground or background color.

14. CSS interpolate-size property and calc-size() function

    Allows animating to height: autoand other intrinsic sizing keywords.

15. CSS attr() usage in all properties

    Previously only supported in the contentproperty.

16. CSS hyphenate-limit-chars, hyphenate-limit-lines, hyphenate-limit-last and hyphenate-limit-zone properties
17. CSS hanging-punctuation property

    Puts punctuation characters outside of the box to align the text with the rest of the document.

18. CSS line-clamp property

    Limits the text in a block container to a certain number of lines.

19. Resolve CSS scroll snap differences across browsers
20. Improve interoperability of CSS grid, subgrid, and flexbox
21. CSS object-view-box

    Crops and zooms to an inset area of an image.

22. CSS light-dark() and prefers-color-scheme support in external SVG resources

    Allows external SVG resources to adapt to light and dark mode preferences.

23. HTML autocorrect attribute

    Controls whether to automatically correct spelling or punctuation errors for user input.

24. CSS reading-flow property

    Sets the order in which flex or grid elements are rendered to speech or reached via focus navigation.

25. CSS Gap decorations

    column-rule and row-rule display decorative lines between columns and rows of a flex, grid, or multi-column layout.