My Interop 2027 Preferences

As is the hot new trend, I’m sharing my preferences for Interop 2027. I used all 15, though the ones at the end I’m less worried about.

Here’s what I chose and my selfish use-cases why I want them. It’s rather CSS-biased (as is my wont)

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

Allows animating to height: auto, and using intrinsic sizes in calculations.

Now that I’m making extensive use of the <details> element, this will remove significant jank in the existing JavaScript-driven animations in Firefox and bring it into line with Chrome.

2. JavaScript Temporal

A modern and extensive date/time API to replace Date.

This is a game changer for working with dates and times, but needs to be truly everywhere for a few years before you can really use any of it, as fallbacks become very messy. Polyfills are available but I’d prefer not to.

3. 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.

I use position: sticky a lot, and knowing if an element is currently in the stuck state (usually to apply a drop shadow) is extremely valuable. It’s always felt like a CSS responsibility since it’s the CSS that put it there.

4. CSS anchored container queries

@container anchored(fallback: …) applies styles based on which position fallback an anchor-positioned element is using.

I’ve embraced anchor positioning for all my popovers (tooltips especially), but I just can’t place the little arrow correctly. This will finally get it on the right side at least.

5. Customizable/stylable <select>

Customize the button, selected option, picker, and options with CSS.

The native <select> brings so much accessibility and keyboard behaviour that I’d much rather use it any day. The main reason design systems rebuild it is because they don’t like the native design and that's entirely solved with customisable selects. A shed-load of JavaScript no longer needed (ignoring multi-select).

6. HTML focusgroup attribute

Combines descendant elements into a single tab stop, with arrow-key navigation between them.

Again, when working in a design system there is a shed-load of code for keyboard handling, making components such as Tabs or Cards be a single tab stop on the keyboard. This code very often runs into conflicts with native keyboard behaviours and is a general headache. focusgroup just solves it all in one attribute.

7. Allow CSS transitioning/animating display and content-visibility

Useful for delaying display: none until an exit animation completes.

My <dialog> elements are very nicely animating in and out in Chrome these days. Would be great to bring that flair to all.

8. CSS gap decorations

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

In a componentised world each component should only care about its own internal styles. It should not need to add extra padding and a border to achieve a line in the page grid gap. This means the component needs to know where it is placed, which is against the whole philosophy. Gap decorations become the responsibility of the grid that declares the gap, as it should be.

9. Interest invokers

The interestfor attribute triggers actions on a target element when the user shows interest, such as via hover, focus, or long-press.

Any time I can write less code, and support progressive enhancement, the better. Invokers should be much less brittle than any code I write.

10. CSS corner-shape property

Alternative shapes for border-radius, such as squircles and bevels.

I mainly want this just to cut the corners off boxes with a simpler syntax than clip-path, while also retaining the border styles.

11. HTML headingoffset and headingreset attributes

Offsets the heading level of descendant <h1>–<h6> elements. Includes the CSS :heading() pseudo-class.

Again, in a componentised world a component shouldn’t need to know where it is placed in the DOM in order to keep the document’s heading structure intact. This will allow components to be truly independent and portable.

12. CSS reading-flow and reading-order properties

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

I’ve just had to accept a sub-optimal tab order on some pages where I re-arrange the page at different screen sizes. Thankfully, this will bring them back up to snuff.

13. CSS var() in size container queries

Such as @container (width >= var(--min-width)).

Just today, as I was writing this, I ran into a bug where some styles were changing at 600px, while others were changing at 700px. This was because one container query was changed, while another was forgotten. Having these breakpoints in a central variable would solve this problem.

14. Responsive iframes

The frame-sizing CSS property sizes an <iframe> to its content, avoiding scrolling within the iframe.

Would be great to remove the postMessage hack and make iframes look truly seamless.

15. CSS margin-trim

Removes the margins of child elements when they meet the edges of the container.

I use this snippet of code a lot:

> *:not(:last-child) {
    margin-bottom: var(--gap);
}

margin-trim would allow the removal of the :not clause, and it'll also solve an issue I've been having where I'm moving components around at different breakpoints so the last visible element may not be the actual :last-child and it's difficult to cancel the margin.

Be sure to set your preferences to help inform which are most likely to make it in next year.