{"id":305,"date":"2024-01-03T15:39:27","date_gmt":"2024-01-03T15:39:27","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=305"},"modified":"2024-01-03T17:13:04","modified_gmt":"2024-01-03T17:13:04","slug":"the-popular-vote-of-interop-2024","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-popular-vote-of-interop-2024\/","title":{"rendered":"The Popular Vote of Interop 2024"},"content":{"rendered":"\n

I believe it will be sometime in January we’ll hear what the Interop Project<\/a> 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. <\/p>\n\n\n\n

We’ve already seen the list of proposals.<\/a> 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 \ud83d\udc4d, \u2764\ufe0f, and \ud83d\ude80, 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> a while back. <\/p>\n\n\n\n

The “Votes”<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

Proposal<\/th>Positive Votes<\/th><\/tr><\/thead>
JPEG XL image format<\/a><\/td>498<\/td><\/tr>
View Transitions Level 1<\/a><\/td>135<\/td><\/tr>
Scroll-driven Animations<\/a><\/td>91<\/td><\/tr>
[css-values-5] attr() support extended capabilities<\/a><\/td>77<\/td><\/tr>
Popover<\/a><\/td>71<\/td><\/tr>
Unit division and multiplication for mixed units of the same type within calc()<\/a><\/td>66<\/td><\/tr>
CSS box sizing properties with MathML Core<\/a><\/td>65<\/td><\/tr>
Navigation API<\/a><\/td>59<\/td><\/tr>
CSS scrollbar-gutter<\/a><\/td>54<\/td><\/tr>
Relative Color Syntax<\/a><\/td>47<\/td><\/tr>
WebM AV1 video codec<\/a><\/td>42<\/td><\/tr>
CSS Nesting<\/a><\/td>42<\/td><\/tr>
CSS anchor positioning<\/a><\/td>40<\/td><\/tr>
CSS style container queries (custom properties)<\/a><\/td>36<\/td><\/tr>
WebM Opus audio codec<\/a><\/td>35<\/td><\/tr>
WebXR<\/a><\/td>34<\/td><\/tr>
Masonry layout<\/a><\/td>33<\/td><\/tr>
text-box-trim<\/a><\/td>32<\/td><\/tr>
Custom Media Queries<\/a><\/td>32<\/td><\/tr>
<details> and <summary> elements<\/a><\/td>31<\/td><\/tr>
margin-trim<\/a><\/td>27<\/td><\/tr>
Declarative Shadow DOM<\/a><\/td>26<\/td><\/tr>
EXPAND :has() to include support for more pseudo-classes<\/a><\/td>21<\/td><\/tr>
Web Share API<\/a><\/td>21<\/td><\/tr>
Allowing <hr> inside of <select><\/a><\/td>19<\/td><\/tr>
text-wrap: balance<\/a><\/td>18<\/td><\/tr>
CSS Multi-Column Layout block element breaking<\/a><\/td>17<\/td><\/tr>
User activation (2024 edition)<\/a><\/td>17<\/td><\/tr>
Trusted Types<\/a><\/td>16<\/td><\/tr>
Canvas text rendering and metrics (2024 edition)<\/a><\/td>16<\/td><\/tr>
Notifications API<\/a><\/td>15<\/td><\/tr>
input[type=”range”] styling<\/a><\/td>14<\/td><\/tr>
display: contents accessibility<\/a><\/td>13<\/td><\/tr>
text-wrap: pretty<\/a><\/td>13<\/td><\/tr>
backdrop-filter<\/a><\/td>12<\/td><\/tr>
P3 All The Things<\/a><\/td>12<\/td><\/tr>
Accessibility issues with display properties (not including display: contents)<\/a><\/td>12<\/td><\/tr>
CSS Typed OM Level 1 (houdini)<\/a><\/td>12<\/td><\/tr>
Intersection Observer v2<\/a><\/td>12<\/td><\/tr>
Fetch Web API – Content-type parsing<\/a><\/td>11<\/td><\/tr>
Text Fragments<\/a><\/td>11<\/td><\/tr>
Media pseudo classes: :paused\/:playing\/:seeking\/:buffering\/:stalled\/:muted\/:volume-locked<\/a><\/td>11<\/td><\/tr>
Streams<\/a><\/td>11<\/td><\/tr>
CSS image() function<\/a><\/td>11<\/td><\/tr>
CSS element() function<\/a><\/td>11<\/td><\/tr>
css fill\/stroke<\/a><\/td>11<\/td><\/tr>
import attributes \/ JSON modules \/ CSS modules<\/a><\/td>11<\/td><\/tr>
CSS Logical Properties and Values<\/a><\/td>11<\/td><\/tr>
Accessibility (computed role + accname)<\/a><\/td>10<\/td><\/tr>
font-family keywords<\/a><\/td>10<\/td><\/tr>
Gamut mapping<\/a><\/td>10<\/td><\/tr>
scrollbar-width CSS property<\/a><\/td>9<\/td><\/tr>
The @starting-style CSS rule<\/a><\/td>8<\/td><\/tr>
Resolve accessibility issues in datalist<\/a><\/td>8<\/td><\/tr>
Custom Highlight API<\/a><\/td>8<\/td><\/tr>
Scrollend Events<\/a><\/td>8<\/td><\/tr>
CSS Painting API Level 1 (houdini)<\/a><\/td>8<\/td><\/tr>
Full support of background properties and remove of prefixes<\/a><\/td>8<\/td><\/tr>
JSON Module Scripts<\/a><\/td>7<\/td><\/tr>
overscroll-behavior on the root scroller<\/a><\/td>7<\/td><\/tr>
HTML focusgroup attribute<\/a><\/td>7<\/td><\/tr>
URLPattern<\/a><\/td>7<\/td><\/tr>
CSS background-clip<\/a><\/td>7<\/td><\/tr>
WebDriver BiDi<\/a><\/td>7<\/td><\/tr>
<search><\/a><\/td>6<\/td><\/tr>
Emoji text rendering using non-system emoji fonts<\/a><\/td>6<\/td><\/tr>
WasmGC<\/a><\/td>6<\/td><\/tr>
JavaScript Promise Integration<\/a><\/td>6<\/td><\/tr>
CSS text-indent<\/a><\/td>6<\/td><\/tr>
Canvas2D filter and reset<\/a><\/td>6<\/td><\/tr>
hidden=until-found and auto-expanding details<\/a><\/td>6<\/td><\/tr>
The transition-behavior CSS property<\/a><\/td>5<\/td><\/tr>
Web Audio API<\/a><\/td>5<\/td><\/tr>
WebRTC \u201cend-to-end-encryption\u201d<\/a><\/td>5<\/td><\/tr>
CSS color module level 4<\/a><\/td>5<\/td><\/tr>
CSS box-decoration-break<\/a><\/td>5<\/td><\/tr>
Viewport-Percentage Lengths in WebViews and In App Browsers<\/a><\/td>5<\/td><\/tr>
CSS Module Scripts<\/a><\/td>4<\/td><\/tr>
The overlay CSS property<\/a><\/td>4<\/td><\/tr>
WebTransport API<\/a><\/td>4<\/td><\/tr>
font-size-adjust<\/a><\/td>4<\/td><\/tr>
blocking=”render” attribute on scripts and style sheets<\/a><\/td>4<\/td><\/tr>
Indexed DB v3<\/a><\/td>4<\/td><\/tr>
HTTP(S) URLs for WebSocket<\/a><\/td>3<\/td><\/tr>
requestIdleCallback<\/a><\/td>3<\/td><\/tr>
document.caretPostitionFromPoint<\/a><\/td>3<\/td><\/tr>
WebRTC peer connections and codecs<\/a><\/td>3<\/td><\/tr>
CSS object-view-box<\/a><\/td>3<\/td><\/tr>
HTMLVideoElement.requestVideoFrameCallback()<\/a><\/td>3<\/td><\/tr>
Running WebAssembly Spec Tests in WPT<\/a><\/td>2<\/td><\/tr>
size-adjust<\/a><\/td>2<\/td><\/tr>
CSS :dir() selectors and dir=auto interoperability<\/a><\/td>2<\/td><\/tr>
Local Network Access and Mixed Content specification<\/a><\/td>2<\/td><\/tr>
Ready-made counter styles<\/a><\/td>2<\/td><\/tr>
CSS caret, caret-color and caret-shape properties<\/a><\/td>2<\/td><\/tr>
Storage Access API<\/a><\/td>1<\/td><\/tr>
CSS Zoom<\/a><\/td>1<\/td><\/tr>
video-dynamic-range Media Query<\/a><\/td>1<\/td><\/tr>
inverted-colors Media Query<\/a><\/td>1<\/td><\/tr>
Making the display and content-visibility CSS properties animatable<\/a><\/td>0<\/td><\/tr>
WIP: Typography bucket investigation<\/a><\/td>0<\/td><\/tr>
text-transform: full-size-kana & text-transform: full-width<\/a><\/td>0<\/td><\/tr>
MediaCapture device enumeration<\/a><\/td>0<\/td><\/tr>
Detect UA Transitions on same-document Navigations<\/a><\/td>0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

What else?<\/h2>\n\n\n\n

This isn’t a list of everything possible<\/em> 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). <\/p>\n\n\n\n

What are your thoughts?<\/h2>\n\n\n\n

If you were the final choice for Interop 2024, what would you pick?<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[56,55],"class_list":["post-305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-interop","tag-web-standards"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/interop-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":7,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions\/345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/343"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}