Frontend Masters — Boost Search

The Popular Vote of Interop 2024

I believe it will be sometime in January we’ll hear what the Interop Project is going to focus on in 2024. This is a cross-company effort that picks certain web platform features to make sure work perfectly across browsers, meaning us web developers will more happily choose to implement them. I think it’s awesome.

We’ve already seen the list of proposals. Just for kicks, I went through the whole list and tally’d up the amount of positive-emoji reactions to each one (so stuff like 👍, ❤️, and 🚀, but no votes for negative or ambivalent reactions). This is to get a sense of the “popular vote” of what any random developer thinks of the proposals. I left a few reactions myself and had my own votes a while back.

The “Votes”

I have no idea if these “votes” will be heavily weighted by the decision makers. But at least now we’ll be able to compare what was chosen to what seemed to be the popular vote.

ProposalPositive Votes
JPEG XL image format498
View Transitions Level 1135
Scroll-driven Animations91
[css-values-5] attr() support extended capabilities77
Popover71
Unit division and multiplication for mixed units of the same type within calc()66
CSS box sizing properties with MathML Core65
Navigation API59
CSS scrollbar-gutter54
Relative Color Syntax47
WebM AV1 video codec42
CSS Nesting42
CSS anchor positioning40
CSS style container queries (custom properties)36
WebM Opus audio codec35
WebXR34
Masonry layout33
text-box-trim32
Custom Media Queries32
<details> and <summary> elements31
margin-trim27
Declarative Shadow DOM26
EXPAND :has() to include support for more pseudo-classes21
Web Share API21
Allowing <hr> inside of <select>19
text-wrap: balance18
CSS Multi-Column Layout block element breaking17
User activation (2024 edition)17
Trusted Types16
Canvas text rendering and metrics (2024 edition)16
Notifications API15
input[type=”range”] styling14
display: contents accessibility13
text-wrap: pretty13
backdrop-filter12
P3 All The Things12
Accessibility issues with display properties (not including display: contents)12
CSS Typed OM Level 1 (houdini)12
Intersection Observer v212
Fetch Web API – Content-type parsing11
Text Fragments11
Media pseudo classes: :paused/:playing/:seeking/:buffering/:stalled/:muted/:volume-locked11
Streams11
CSS image() function11
CSS element() function11
css fill/stroke11
import attributes / JSON modules / CSS modules11
CSS Logical Properties and Values11
Accessibility (computed role + accname)10
font-family keywords10
Gamut mapping10
scrollbar-width CSS property9
The @starting-style CSS rule8
Resolve accessibility issues in datalist8
Custom Highlight API8
Scrollend Events8
CSS Painting API Level 1 (houdini)8
Full support of background properties and remove of prefixes8
JSON Module Scripts7
overscroll-behavior on the root scroller7
HTML focusgroup attribute7
URLPattern7
CSS background-clip7
WebDriver BiDi7
<search>6
Emoji text rendering using non-system emoji fonts6
WasmGC6
JavaScript Promise Integration6
CSS text-indent6
Canvas2D filter and reset6
hidden=until-found and auto-expanding details6
The transition-behavior CSS property5
Web Audio API5
WebRTC “end-to-end-encryption”5
CSS color module level 45
CSS box-decoration-break5
Viewport-Percentage Lengths in WebViews and In App Browsers5
CSS Module Scripts4
The overlay CSS property4
WebTransport API4
font-size-adjust4
blocking=”render” attribute on scripts and style sheets4
Indexed DB v34
HTTP(S) URLs for WebSocket3
requestIdleCallback3
document.caretPostitionFromPoint3
WebRTC peer connections and codecs3
CSS object-view-box3
HTMLVideoElement.requestVideoFrameCallback()3
Running WebAssembly Spec Tests in WPT2
size-adjust2
CSS :dir() selectors and dir=auto interoperability2
Local Network Access and Mixed Content specification2
Ready-made counter styles2
CSS caret, caret-color and caret-shape properties2
Storage Access API1
CSS Zoom1
video-dynamic-range Media Query1
inverted-colors Media Query1
Making the display and content-visibility CSS properties animatable0
WIP: Typography bucket investigation0
text-transform: full-size-kana & text-transform: full-width0
MediaCapture device enumeration0
Detect UA Transitions on same-document Navigations0

What else?

This isn’t a list of everything possible they could work on, although it’s a pretty nice list. One I was thinking about is the Contact Picker API, as I got an email from an old friend wondering about how one might do such a thing on a website these days. It’s a pretty nice API, but it’s isolated to just Chrome on Android right now, which is a bummer. But alas, not happening in Interop 2024 (not that support work might not truck anyway).

What are your thoughts?

If you were the final choice for Interop 2024, what would you pick?

Need front-end development training?

Frontend Masters logo

Frontend Masters is the best place to grow in your career as a developer. We have courses on all the most important front-end technologies and beyond, from React to CSS, to backend with Node.js and Full Stack.

2 responses to “The Popular Vote of Interop 2024”

  1. Avatar Sami Ullah says:
    January 24, 2024 at 6:05 am

    I was a calendar app, I tend to use dialog to view the event detail, scroll-snap to change to next day by swiping right/left and view transition for action button.

    The most important feature css-snap is missing is to know which element is currently snapped, or we can tell onSnapChange event.

    The dialog doesn’t close on back drop click.

    View transition isn’t yet available in all the browser neither it’s baseline.

    A lot of the list is new to me, it’s worth exploring it.

    Reply
  2. Avatar Daniel says:
    February 1, 2024 at 10:53 am

    Interop 2024 is live and we can see what got picked up: https://wpt.fyi/interop-2024

    I am a bit disappointed, was hoping for some other topics but maybe next year.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *