Published: October 23, 2024
In this post, learn how you can use the new <baseline-status> web component on
your own site, and the Baseline logos in presentations, whenever you write or
talk about web platform features.
Most developers have had the experience of searching for a solution to a web development problem, finding an article that describes the perfect solution, then realizing right at the end that it's only available in one browser. Or getting excited by that feature a conference presenter is describing, to then discover it's experimental. This was something we wanted to improve here on our Chrome developer sites, and for the last two years we've been adding compat data from MDN to our posts.
Baseline however, makes things even clearer. Rather than checking individual browser versions, you can check whether a feature is Baseline Widely available and thus ready to use without worry. Or learn that it's Baseline Newly available and therefore interoperable, but as a new feature perhaps one you'd want to consider fallback strategies for. Here on web.dev we've started to add a new Baseline status component to some of our pages, you can see it on the blog post about CSS font-size-adjust.
Add the component to your site
The web component isn't just for us to use. We're excited to share the
<baseline-status> component with you. This is ready for you to use to show
Baseline status on the content you create. The component can be installed from
npm, or precompiled from a CDN—
read the installation instructions.
Once installed, show the status of a feature as shown in the following HTML for
font-size-adjust.
<baseline-status featureId="font-size-adjust"></baseline-status>
The component will then update automatically as a feature moves from Limited availability, through Newly available to Wideline available.
Find the featureId
The featureId passed into the component is the name of the feature in the
web-features repository.
The component gets the status of the feature from the data collected through the
web features project.
Add Baseline logos
If you are publishing something in print, PDF, or presenting at a conference, then the logos are likely to be helpful to show status at that point in time. The Web Platform Status dashboard can help you to check the Baseline status of any feature.
The Baseline logos are licensed for you to use in all your materials, download them in PNG and SVG format.
Let us know where you use Baseline
We'd love to see where Baseline is being used. Make a PR and add a link to where you've used it to Baseline in the wild.
Do you have other integration ideas?
Do you have an idea for integrating Baseline in some other way? Perhaps you have a developer tool that could include this information, or a product that would benefit from being able to share the Baseline version used by the admin panel. Raise an issue with your ideas, we'll be happy to help.