My Interop feature ranking
Posted 2 hours ago
Interop is an effort to increase the interoperability of key features of the web platform across browsers. Run by a team of representatives from companies that make substantial contributions to browser rendering engines—including Apple, Google, Igalia, Microsoft, and Mozilla—Interop focuses on features that are high-priority for web developers and end users. Each year they select a list of features to focus on for that year. This effort has led to a significant amount of features getting cross browser support in the last five years.
The Firefox team launched a website that allows users to rank the Interop 2027 proposals that they care about. The team just added functionality to allow you to share your choices so all I had to do was paste it into this post. You can also share an image and copy the alt text for that image.
I have seen others sharing their lists so I thought I would take time to give my feedback about which features I would like to see prioritized for Interop 2027 and share it here.
- CSS
reading-flowandreading-orderproperties. Sets the order in which flex or grid elements are rendered to speech or reached via focus navigation. I was excited about this one several years ago when Rachel Andrew first wrote about it. I am disappointed that it has taken so long to be incorporated into the Web platform. - CSS gap decorations.
column-ruleandrow-ruledisplay decorative lines between columns and rows of a flex, grid, or multi-column layout. I would love to see this supported across browsers next year. I wrote an article about gap decorations this summer, revisiting a solution I came up with to fake this. - CSS
flex-wrap: balance. Distributes items in a multi-line flex container so each line has about the same number of items. I got really excited about this one when Una posted about it on Bluesky in May 2025. I added it to our ministry sites as a progressive enhancement when Chrome shipped it in July. - CSS scroll-triggered animations.
timeline-triggerandanimation-triggerplay, pause, or reverse animations when the user scrolls to a particular point. I played around with scroll-driven animations at the end of last year. I created several scroll-triggered animations in the past with Intersection Observer and with GSAP. I am looking forward to this being added to the Web platform. - CSS container scroll-state queries. The
@container scroll-state(...)at-rule applies styles based on the sticky positioning, snapped, and scrollable state of the container. This will be very helpful with sticky positioning and being able to add state styles with working with sticky positioned items. - CSS
border-shapeproperty. Sets the geometry of the border box to a fully custom shape, changing the shape of borders, outlines, and shadows. - CSS
corner-shapeproperty. Alternative shapes forborder-radius, such as squircles and bevels. - CSS
@supports at-rule(). Checks if a CSS at-rule is supported. - CSS linked parameters. Allows passing custom properties into external SVG resources, such as colors. I read an article about this last week. I work with SVGs a lot. It would be great to be able to update images with CSS.
- CSS
margin-trim. Removes the margins of child elements when they meet the edges of the container. - CSS
object-view-boxproperty. Crops and zooms to an inset area of an image. - CSS
random()function. Chooses a random numeric value within a specified range. - CSS
if()function. An inline conditional value that returns a value based on a set of conditions. - CSS grid lanes (masonry).
display: grid-lanescreates a layout where items are tightly packed into parallel lanes. - CSS
line-clampproperty. Limits the text in a block container to a certain number of lines. Also allows custom end text if content overflow occurs. - Responsive iframes. The
frame-sizingCSS property sizes an<iframe>to its content, avoiding scrolling within the iframe.
https://interop-rank.fxdx.dev/share/webcraftsman-kzk7mzp8tk4j
Comment on this post