ADVERTISEMENT

Major web browsers join hands for Interop 2023

Published Feb 6, 2023 01:37 pm

Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla have teamed up once again for a new project, Interop 2023, with the aim of improving the interoperability of the web. In 2022, the Interop project focused on 15 key areas of importance for web developers and saw remarkable progress, with the number of tests that passed in all three browsers increasing from 49% to 83%.

Web interoperability is important because it ensures that websites and web applications will work consistently and correctly across different browsers, operating systems, and devices. This allows for a seamless user experience and eliminates the potential for compatibility issues, which can result in frustration and lost users. Interoperability also encourages innovation and competition, as developers are not limited to a particular platform, and it helps to ensure that the web remains an open, accessible platform for everyone. By promoting interoperability, developers can focus on creating new and innovative web applications, and users can access the full range of web content and functionality, regardless of their device or platform.

In an article co-written by Jon Davis, Tim Nguyen, and Jen Simmons in the Webkit blog, the team cited significant contributions to achieve a 98.2% pass rate in 2022. This year’s Interop project has reset the scores, retiring half of the tests used in 2022 and introducing many new ones, based on the needs expressed by web developers.

The Interop team received 87 proposals for inclusion in the project and accepted 35 of them, which have been combined into 18 new Focus Areas and 2 Investigations. The project also includes 5 Focus Areas from 2022 and 3 from 2021, bringing the total number of Active Focus Areas to 26.

The focus areas for Interop 2023 will be:

  1. Border Image
  2. Color Space & Functions
  3. Container Queries
  4. Containment
  5. CSS Pseudo-classes
  6. Custom Properties
  7. Flexbox
  8. Font Feature Detection & Palettes
  9. Forms
  10. Grids
  11. :has()
  12. Inert
  13. Masking
  14. Math functions
  15. Media Queries 4
  16. Modules
  17. Motion Path
  18. Offscreen Canvas
  19. Pointer & Mouse Events
  20. Scrolling
  21. Subgrid
  22. Transforms
  23. URL
  24. Web Codecs (video)
  25. Web Compat 2023
  26. Web Components

Interoperability is a crucial aspect of the web’s success and is excited to work with its partners on the opportunities Interop 2023 presents. The project aims to help websites and web apps work better for everyone and continue to show the team’s commitment to web standards.

ADVERTISEMENT
.most-popular .layout-ratio{ padding-bottom: 79.13%; } @media (min-width: 768px) and (max-width: 1024px) { .widget-title { font-size: 15px !important; } }

{{ articles_filter_1561_widget.title }}

.most-popular .layout-ratio{ padding-bottom: 79.13%; } @media (min-width: 768px) and (max-width: 1024px) { .widget-title { font-size: 15px !important; } }

{{ articles_filter_1562_widget.title }}

.most-popular .layout-ratio{ padding-bottom: 79.13%; } @media (min-width: 768px) and (max-width: 1024px) { .widget-title { font-size: 15px !important; } }

{{ articles_filter_1563_widget.title }}

{{ articles_filter_1564_widget.title }}

.mb-article-details { position: relative; } .mb-article-details .article-body-preview, .mb-article-details .article-body-summary{ font-size: 17px; line-height: 30px; font-family: "Libre Caslon Text", serif; color: #000; } .mb-article-details .article-body-preview iframe , .mb-article-details .article-body-summary iframe{ width: 100%; margin: auto; } .read-more-background { background: linear-gradient(180deg, color(display-p3 1.000 1.000 1.000 / 0) 13.75%, color(display-p3 1.000 1.000 1.000 / 0.8) 30.79%, color(display-p3 1.000 1.000 1.000) 72.5%); position: absolute; height: 200px; width: 100%; bottom: 0; display: flex; justify-content: center; align-items: center; padding: 0; } .read-more-background a{ color: #000; } .read-more-btn { padding: 17px 45px; font-family: Inter; font-weight: 700; font-size: 18px; line-height: 16px; text-align: center; vertical-align: middle; border: 1px solid black; background-color: white; } .hidden { display: none; }
function initializeAllSwipers() { // Get all hidden inputs with cms_article_id document.querySelectorAll('[id^="cms_article_id_"]').forEach(function (input) { const cmsArticleId = input.value; const articleSelector = '#article-' + cmsArticleId + ' .body_images'; const swiperElement = document.querySelector(articleSelector); if (swiperElement && !swiperElement.classList.contains('swiper-initialized')) { new Swiper(articleSelector, { loop: true, pagination: false, navigation: { nextEl: '#article-' + cmsArticleId + ' .swiper-button-next', prevEl: '#article-' + cmsArticleId + ' .swiper-button-prev', }, }); } }); } setTimeout(initializeAllSwipers, 3000); const intersectionObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const newUrl = entry.target.getAttribute("data-url"); if (newUrl) { history.pushState(null, null, newUrl); let article = entry.target; // Extract metadata const author = article.querySelector('.author-section').textContent.replace('By', '').trim(); const section = article.querySelector('.section-info ').textContent.replace(' ', ' '); const title = article.querySelector('.article-title h1').textContent; // Parse URL for Chartbeat path format const parsedUrl = new URL(newUrl, window.location.origin); const cleanUrl = parsedUrl.host + parsedUrl.pathname; // Update Chartbeat configuration if (typeof window._sf_async_config !== 'undefined') { window._sf_async_config.path = cleanUrl; window._sf_async_config.sections = section; window._sf_async_config.authors = author; } // Track virtual page view with Chartbeat if (typeof pSUPERFLY !== 'undefined' && typeof pSUPERFLY.virtualPage === 'function') { try { pSUPERFLY.virtualPage({ path: cleanUrl, title: title, sections: section, authors: author }); } catch (error) { console.error('ping error', error); } } // Optional: Update document title if (title && title !== document.title) { document.title = title; } } } }); }, { threshold: 0.1 } ); function showArticleBody(button) { const article = button.closest("article"); const summary = article.querySelector(".article-body-summary"); const body = article.querySelector(".article-body-preview"); const readMoreSection = article.querySelector(".read-more-background"); // Hide summary and read-more section summary.style.display = "none"; readMoreSection.style.display = "none"; // Show the full article body body.classList.remove("hidden"); } document.addEventListener("DOMContentLoaded", () => { let loadCount = 0; // Track how many times articles are loaded const offset = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Offset values const currentUrl = window.location.pathname.substring(1); let isLoading = false; // Prevent multiple calls if (!currentUrl) { console.log("Current URL is invalid."); return; } const sentinel = document.getElementById("load-more-sentinel"); if (!sentinel) { console.log("Sentinel element not found."); return; } function isSentinelVisible() { const rect = sentinel.getBoundingClientRect(); return ( rect.top < window.innerHeight && rect.bottom >= 0 ); } function onScroll() { if (isLoading) return; if (isSentinelVisible()) { if (loadCount >= offset.length) { console.log("Maximum load attempts reached."); window.removeEventListener("scroll", onScroll); return; } isLoading = true; const currentOffset = offset[loadCount]; window.loadMoreItems().then(() => { let article = document.querySelector('#widget_1690 > div:nth-last-of-type(2) article'); intersectionObserver.observe(article) loadCount++; }).catch(error => { console.error("Error loading more items:", error); }).finally(() => { isLoading = false; }); } } window.addEventListener("scroll", onScroll); });

Sign up by email to receive news.