A web component for showing browser-support data from the Web Features project
npm install @oddbird/browser-supportA web component for showing browser-support data
from the Web Features project.
This is inspired by the officialbaseline-status component
from Google and the Web Platform DX community group.
It uses the API provided by the
Web platform features explorer.
- 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
General usage example:
``html
Container Style Queries
Browser support data
`
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)
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"components
to the Eleventy WebC Plugin 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`
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.
- [ ] 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?
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!
With thanks to the following people:
- David Darnes for the
Web Component repo template
that this one is based on.