What's new in web

Key Concepts

• Baseline Newly Available: Web platform features available in the core browser set (Chrome, Edge, Firefox, Safari) on desktop and mobile.
• Baseline Widely Available: Web platform features available for 30 months after becoming Baseline Newly Available, considered safe for general use.
• Web Features Data: Open dataset maintained by the Web DX community group, tracking browser support for web platform features.
• RUM (Real User Monitoring): Data collected from actual users of a website, providing insights into their browser capabilities and experiences.
• Interop: An annual initiative where browser vendors collaborate to make specific web features interoperable across all browsers.
• Progressive Enhancement: A strategy of building websites that provide a basic level of functionality to all users, while enhancing the experience for users with more modern browsers.
• Polyfill: Code that provides functionality on older browsers that do not natively support it.

The Rapidly Evolving Web Platform

• The web platform is evolving much faster than in the past. Features are going from one browser to all browsers more quickly.
• Example: Style container queries went from landing in Chrome and Safari to Firefox in just five months. Cascade layers became Baseline Newly available in just over a month.
• Many features mentioned at the previous Google I/O are now Baseline.
• Most new features become Baseline in under a year.

Overcoming Overwhelm with Baseline

• Baseline helps developers take advantage of new features without getting overwhelmed.
• Definition of Baseline Newly Available: Features shipping in the core browser set: Chrome (desktop & Android), Edge, Firefox (desktop & Android), Safari (macOS & iOS).
• Features in Baseline are unlikely to change due to multiple implementations and agreement among browser vendors.
• Baseline Widely Available: After 30 months, features move to this status, indicating they are safe to use without polyfills or fallbacks.
• The Web Developer Experience Community Group recommends Baseline Widely available as a solid choice for new sites without existing browser stats.

Customizing Baseline with Data

• Developers can create their own Baseline targets based on their specific user data.
• The web features data powers Baseline and is available for developers to use.
• The Web Platform Dashboard allows users to track the dates features land in different browsers.
• A new stats page will show the number of Baseline features and features missing in browsers (limited availability).
• Combining web features data with RUM data allows developers to make informed decisions about their Baseline target.

RUM Archive Integration

• The RUM Archive insights have integrated with Baseline, allowing users to see the number of users supported by selecting a Baseline year.
• The integration has been updated to filter for the top 15 countries by traffic.
• Example: Choosing Baseline 2022 supports just over 98% of tracked users, while Baseline 2023 supports 93%.

Tool Integrations

• RUMvision integrates real user data with web features data to identify Baseline targets and per-feature support levels.
• Example: RUMvision helped customers remove the lazysizes plugin and replace it with browser-standard lazy loading because over 98% of users had support.
• A tool is released to import Google Analytics browser data and identify the appropriate Baseline target.
• A Netlify extension shows support for different Baseline years and widely available features on sites.
• Cloudflare and Contentsquare are planning to launch tools integrating Baseline data.
• The Web DX community group provides an API and NPM package for custom integrations.
• The Baseline browser mapping module simplifies mapping browser versions to Baseline years and widely available features.

Ensuring Features Meet Baseline Targets

• Multiple resources display Baseline status for individual features: MDN, web.dev articles, Can I Use, and the Web Platform Dashboard.
• Example: @property is Baseline 2024.

Integrating Baseline into Developer Tools

• Developers requested tooling integration for Baseline at I/O Connect events.
• Code Compilation Tools (Babel, PostCSS):
  • browserslist-config-baseline helps configure browsers list targets in Baseline terms.
  • Install the package from NPM and use the extend syntax in your browser's list configuration file.
  • Ensures that unnecessary polyfills are not shipped for Baseline features.
• Linters (ESLint, Stylelint):
  • ESLint for CSS has a use-baseline rule to warn of features newer than the target.
  • HTML ESLint flags HTML elements and attributes that don't meet the Baseline target.
  • Stylelint officially supports a plugin called Stylelint plugin/use-baseline.
• IDEs (VSCode, WebStorm):
  • IDE extensions annotate Linter warnings with squiggly underlines.
  • VSCode integrates Baseline data directly into hover cards, showing Baseline status and browser support.
  • Hover cards are also in WebStorm.

Adoption of Baseline

• Companies are adopting Baseline to show browser support levels.
• Examples:
  • Clearleft (UK web agency) adopted Baseline Widely available as their default level of support.
  • Wix uses Baseline Widely available as their threshold for adopting new web features.
  • Angular framework uses Baseline Widely available as their supported feature threshold from version 20.

Baseline as a Guide, Not a Gate

• Baseline should be used as a guide, not a strict gatekeeper.
• Not all features are equal in terms of what happens if a user doesn't have the feature.
• Features that haven't crossed the Baseline can be treated as "Consider Carefully" for progressive enhancement or polyfills.
• Example: Text Wrap Balance (Baseline 2024) can be used as a progressive enhancement, as unsupported browsers will simply ignore it.
• RUM data can be used to determine when to remove polyfills.

New and Upcoming Baseline Features

• Many features presented at the previous Google I/O are now Baseline Newly available.
• Examples:
  • @property (Chrome first) is now newly available.
  • light-dark() function (Firefox first) is now Baseline Newly available.
  • Relative color syntax allows dynamic adjustment of color values in CSS.
  • Style container queries will become widely available in August 2025.
• Interop 2025 includes features expected to become Baseline Newly available soon.

Interop 2025 Features

• Sideways Writing Modes: sideways-rl and sideways-lr values for the CSS writing-mode property are now Baseline Newly available.
• Anchor Positioning: Allows tying the position of an element to an anchor without JavaScript.
• LCP and INP: Core Web Vitals (Largest Contentful Paint and Interaction to Next Paint) will be measurable across all browsers.
• Details Element: Improvements to the <details> element, including content visibility, marker pseudo-element, details-content pseudo-element, and auto-expanding with finding page matches.
• Scope: The CSS @scope rule limits the reach of selectors.
• Scrollend: A reliable way to detect when a scroll is complete.
• View Transitions: Enable fluid app-like experiences, including same-document view transitions and view transition classes.

Conclusion

• The web is improving faster than ever, and Baseline helps developers take advantage of new features sooner and with more confidence.
• The backfilling of web features data is complete, opening the door for new developer tools.
• Developers are encouraged to track when they can start using new features and contribute to the Baseline ecosystem.