browser-support

A web component for showing browser-support data
from the Web Features project.

This is inspired by the official
baseline-status component
from Google and the Web Platform DX community group.
It uses the API provided by the
Web platform features explorer.

Features

- Stand-alone component, without Lit or other frameworks
- Responsive to font sizes, available space, and light/dark schemes
- Allows customization of the title markup (h2 by default)
- 'Newly supported' web features show a timeline towards broad support
- Allows for simple light-dom fallback & progressive enhancement

Demo

Examples

General usage example:

``html






Container Style Queries



Browser support data


`

Installation

You have a few options (choose one):

1. Install via
npm:
npm install @oddbird/browser-support
2. Download the source manually from GitHub
into your project.
3. Skip this step
and use the script directly
via a 3rd party CDN
(not recommended for production use)

Usage

Make sure you include the
`

`html

type="module"
src="https://www.unpkg.com/@oddbird/browser-support@0.1.0/browser-support.js"
>
`

`html

type="module"
src="https://esm.sh/@oddbird/browser-support@0.1.0"
>
`

Or use the built-in
WebC component
with Eleventy.
First add "npm:@oddbird/browser-support/*.webc"
to the Eleventy WebC Plugin components registry:

`js
// Only one module.exports per configuration file, please!
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyWebcPlugin, {
components: [
// Add as a global WebC component
"npm:@oddbird/browser-support/*.webc",
],
});
}
`

Then make sure to include WebC bundled JS
somewhere in your layout:

`html

`

$3

The title` slot allows providing a fallback title,
and also the desired markup.
When the component is defined,
the actual title text will be replaced
with the name of the feature.

ToDo

- [ ] Provide more clarity around the progress bar?
- [ ] Improve and document styling options
- [ ] List mobile browser support data
- [ ] Show browser versions (or how many versions back?)
- [ ] Allow changing title markup with an attribute?

Support

At OddBird,
we enjoy collaborating and contributing
as part of an open web community.
But those contributions take time and effort.
If you're interested in supporting our
open-source work,
consider becoming a
GitHub sponsor,
or contributing to our
Open Collective.

❤️ Thanks!

Credit

With thanks to the following people:

- David Darnes for the
Web Component repo template
that this one is based on.