Monday, December 23, 2024

more tools to help web developers  |  Articles  |  web.dev

Web Developmentmore tools to help web developers  |  Articles  |  web.dev


Rachel Andrew

Published: Dec 10, 2024

2024 was an exciting year for the Baseline project. We’re close to completing the underlying dataset, and have launched tools such as the Web Platform Status dashboard and Baseline status widget. Other projects such as the RUM Archive are starting to adopt Baseline. This post looks back on Baseline in 2024.

What is Baseline?

Baseline labels web features that are supported by all core browsers on both desktop and mobile. If the features used are part of Baseline, you can trust the level of browser compatibility.

The newly available logo with all browsers showing that they support a feature.

Baseline Newly available logo shown on MDN’s content-visibility page.

For more details about different labels of Baseline and how a web feature becomes Baseline, check out the Baseline site or watch Build confidently with Baseline.

The Baseline project in 2024

The web-features work is 81% complete!

web-features is an effort to build a shared catalog of features of the web platform. Each feature is assigned a group and definition, and Baseline support data is noted in this dataset.

We’ve spent significant effort this year to progress this work. As of today, 81% of feature keys are mapped and consumable using the web-features npm package. web-features is the source of truth for Baseline statuses.

The new Web Platform Status dashboard

The Web Platform Status dashboard provides insights into web platform feature implementation across different browsers. The dashboard is backed by web-features data, thus reliability of this dashboard has greatly improved with the progress of web-features work being more complete.

You can track the progress of specific features, or filter to see a set of features such as Baseline 2024. This dashboard complements existing resources like Can I Use and MDN’s compatibility data, offering a broader view of the web platform’s evolution.

For more information about the dashboard, read Announcing the Web Platform Dashboard. More filters were added since the launch such as group: and snapshot:, for example snapshot:ecmascript-2023 will show you features included in ES2023.

<baseline-status> Widget

The <baseline-status> web component also uses the web-features data, and is now ready for use on your own sites and slides. Install from npm, then use the component every time you mention a feature.

baseline-status widget rendered as an image.
<baseline-status> widget.

Learn more about using the Baseline status web component.

Official site and logos

Baseline is owned by the W3C WebDX Community Group, and this year we’ve created an official page for the Baseline project.

If you adopt Baseline in your project, write about Baseline, or give a talk about Baseline, you can submit a Pull Request to list your project on the Baseline in the wild page

When using Baseline in your project, check out the name and logo usage guidelines. The logos are licensed for you to use whenever you want to show the status of web features.

The Interop project made many features Baseline Newly available

The Interop project is a cross-browser effort to improve the interoperability of the web. Features in this project are targeted for cross-browser implementation, accelerating time to become Baseline Newly available. During Interop 2024, Declarative Shadow DOM, font-size-adjust, requestVideoFrameCallback and text-wrap: balance made it into Baseline 2024, and many others are very close to completion.

RUM Insights

RUM Archive’s Insights page was the first tool to integrate Baseline. You can see how many users are included for each Baseline year based on their data. This can help you choose a Baseline year for your project rather than adopting Baseline Widely available.

Read Baseline integration with RUM Archive for more information.

This Is Baseline video series

To bring you short and quick explanation of Baseline Newly available features, we’ve been publishing a video series called #thisisbaseline. Learn about things like new Set methods, Screen Wake Lock API, CSS subgrid, and more in less than 60 seconds.

Check out all the This Is Baseline videos here.

Come chat with us in person!

The team has been attending many conferences this year to bring Baseline to you,hear what you think and answer your questions.
Here are some talks we’ve been presenting.

Check out Rachel’s presentation from FITC Web Unleashed in October, Pete’s session at connect.tech and Mariko’s talk at JSNation in November. And we’re excited to see you at some great events in 2025!

What’s in Baseline 2024

As the year comes to an end, we know which features are part of Baseline 2024. Here are some highlights.

@property

CSS custom properties (also known as CSS variables) are a widely available feature. Ability to define custom properties with a type, default values and inheritance using @property rule was supported by all core browsers since July 2024.

New Set methods

Set has been part of JavaScript since ES2015, but more methods to run mathematical operations on Sets such as intersection and union are added and supported by all core browsers this year.

AVIF

AVIF is a modern image format that generally has better compression than other image formats such as WebP, JPEG, PNG, and GIF. AVIF is supported by all core browsers since January 2024.

…and more!

Of course, there are many more features that became Baseline this year. You can check out the features that became part of Baseline during 2024 here.

Wrap up

When we announced the Baseline project in May 2022, it was just a concept and initial definition of Baseline. This post highlights just some of the work done to turn Baseline into something that can be part of every developer’s workflow.

We would like to thank the hard work everyone put towards the Baseline project.

Individuals who contributed to web-features: Victor Allen, Dietrich Ayala, Daniel Beck, Patrick Brosset, Sondra Eby, Adriana Jara, Mariko Kosaka, Pete LePage, Florian Scholz, James Stuckey Weber, and queengooborg (Vinyl)

<baseline-status> widget: Ewa Gasperowicz and the Chrome DevRel team

Web Platform Status Dashboard: Panos Astithas, Kyle Ju, James Scott, Daniel Smith, and Jason Xu

Baseline Team at Google: Aaron Abbarno, Rachel Andrew, Tony Conway, Philip Jägenstedt, Adriana Jara, Mariko Kosaka, Pete LePage, Nandu Nair, Ali Spivak, and Kadir Topal

Special thanks to: Alexis Deveria at CanIUse, Claas Augner, Hermina Condei, Florian Dieminger, Ruth John, Leo McArdle at MDN, Nic Jansma and Robin Marx at RUM Archive, contributors to Interop project, Apple, Firefox, Igalia, Microsoft, Open Web Docs, OddBird and members of the WebDX Community Group.

Check out our other content

Check out other tags:

Most Popular Articles