{"id":750,"date":"2024-02-08T08:24:47","date_gmt":"2024-02-08T14:24:47","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=750"},"modified":"2024-02-08T13:25:00","modified_gmt":"2024-02-08T19:25:00","slug":"comparing-interop-2024-choices-to-the-popular-vote","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/comparing-interop-2024-choices-to-the-popular-vote\/","title":{"rendered":"Comparing Interop 2024 Choices to the Popular Vote"},"content":{"rendered":"\n<p>Here&#8217;s what <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/\">made the list<\/a> this year:<\/p>\n\n\n\n<style>\n.interop-list {\n  column-width: 220px;\n  margin-top: 0;\n  gap: 3rem\n}\n<\/style>\n\n\n\n<ul class=\"interop-list wp-block-list\">\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#accessibility\">Accessibility<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#css-nesting\">CSS Nesting<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#css-nesting\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#custom-properties\">Custom Properties<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#custom-properties\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#declarative-shadow-dom\">Declarative Shadow DOM<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#declarative-shadow-dom\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#font-size-adjust\">Font size adjust<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#font-size-adjust\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#https-urls-for-websocket\">HTTPS URLs for WebSocket<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#https-urls-for-websocket\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#indexeddb\">IndexedDB<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#indexeddb\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#layout\">Layout<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#layout\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#pointer-and-mouse-events\">Pointer and Mouse Events<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#pointer-and-mouse-events\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#popover\">Popover<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#popover\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#relative-color-syntax\">Relative Color Syntax<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#relative-color-syntax\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#requestvideoframecallback\">requestVideoFrameCallback<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#requestvideoframecallback\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#scrollbar-styling\">Scrollbar Styling<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#scrollbar-styling\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#starting-style-and-transition-behavior\">@starting-style and transition-behavior<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#starting-style-and-transition-behavior\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-directionality\">Text Directionality<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-directionality\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-wrap-balance\">text-wrap: balance<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-wrap-balance\"><\/a><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#url\">URL<\/a><\/li>\n<\/ul>\n\n\n\n<p>A little while back <a href=\"https:\/\/frontendmasters.com\/blog\/the-popular-vote-of-interop-2024\/\">I measured the &#8220;popular vote&#8221; on features<\/a> based on positive GitHub emoji reactions on the threads. <\/p>\n\n\n\n<p>So! How well did what was actually chosen stack up to the popular vote? Let&#8217;s see.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#pointer-and-mouse-events\"><\/a>#5) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#popover\">Popover<\/a><\/li>\n\n\n\n<li>#12) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#css-nesting\">CSS Nesting<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#popover\"><\/a>#10) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#relative-color-syntax\">Relative Color Syntax<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-directionality\"><\/a>#26) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-wrap-balance\">text-wrap: balance<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#custom-properties\"><\/a>#22) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#declarative-shadow-dom\">Declarative Shadow DOM<\/a><\/li>\n\n\n\n<li>#33) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#accessibility\">Accessibility<\/a> \u2014 This is a grouping of several, so I took the highest on the list.<\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#css-nesting\"><\/a>(Not on list) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#custom-properties\">Custom Properties<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#requestvideoframecallback\"><\/a>#52) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#scrollbar-styling\">Scrollbar Styling<\/a> \u2014 <code>scrollbar-gutter<\/code> was actually #9, but styling I feel like is a different concern and more aligned with <code>scrollbar-width<\/code>, which is shipping in Chrome you should know.<\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#scrollbar-styling\"><\/a>#53) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#starting-style-and-transition-behavior\">@starting-style and transition-behavior<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-wrap-balance\"><\/a>#62) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#url\">URL<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#declarative-shadow-dom\"><\/a>#81) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#font-size-adjust\">Font size adjust<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#font-size-adjust\"><\/a>#84) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#https-urls-for-websocket\">HTTPS URLs for WebSocket<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#https-urls-for-websocket\"><\/a>#83) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#indexeddb\">IndexedDB<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#relative-color-syntax\"><\/a>#89) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#requestvideoframecallback\">requestVideoFrameCallback<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#indexeddb\"><\/a>(Not on list) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#layout\">Layout<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#layout\"><\/a>(Not on list) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#pointer-and-mouse-events\">Pointer and Mouse Events<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#starting-style-and-transition-behavior\"><\/a>(Not on list) <a href=\"https:\/\/webkit.org\/blog\/14955\/the-web-just-gets-better-with-interop\/#text-directionality\">Text Directionality<\/a><\/li>\n<\/ul>\n\n\n\n<p>Interesting results I&#8217;d say! It&#8217;s kind of all over the map. <\/p>\n\n\n\n<p>By no means to I expect the final results to map perfectly, or <em>at all<\/em>, to the popular vote. I&#8217;m sure there are a million considerations, not the least of which is how <em>ready<\/em> any of the proposals even is for interop work. For instance, as excited as I am about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transitions_API\">View Transitions<\/a>, they are only implemented in Chrome, so it&#8217;s not exactly &#8220;interop&#8221; work when the implementations to compare don&#8217;t even exist. Interop is more about shoring up the cracks in existing implementations with testable results. <\/p>\n\n\n\n<p>So as far as &#8220;making existing implementations work better together&#8221;, I&#8217;d say this is a pretty nice list. <\/p>\n\n\n\n<p>I&#8217;d say I&#8217;m <em>most<\/em> excited about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Popover_API\">popover<\/a>, since it&#8217;s such a common UI pattern you gotta love seeing the web platform help with that. And most surprised by the <a href=\"https:\/\/developer.chrome.com\/blog\/css-relative-color-syntax\">relative color syntax<\/a>. I absolutely love the syntax, but I thought it had petered out for some reason so it&#8217;s delighting to see it come back to life in a way that&#8217;ll nearly guarantee we have it cross-browser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s what made the list this year: A little while back I measured the &#8220;popular vote&#8221; on features based on positive GitHub emoji reactions on the threads. So! How well did what was actually chosen stack up to the popular vote? Let&#8217;s see. Interesting results I&#8217;d say! It&#8217;s kind of all over the map. By [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":757,"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-750","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\/02\/interop-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/750","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=750"}],"version-history":[{"count":8,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/750\/revisions"}],"predecessor-version":[{"id":766,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/750\/revisions\/766"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/757"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}