An API to access browser support and baseline data
- Published at
- Updated at
- Reading time
- 2min
I blogged about this new web component from the W3C WebDX Community Group the other day.
I love everything about this component. Load some JS, drop in the custom elements, and you're done with including browser support info on your blog!
But! (there's, of course, a but...)
While the web component approach is great, this solution relies on client-side JavaScript talking to a Google server. To avoid the JS and HTTP dependency, I fetch compat data at build time and render an HTML-only compat widget on this blog.
119 | 119 | 119 | 128 | 128 | 16.4 | 16.4 | 25.0 | 119 |
Paweł thought the same and implemented a custom HTML-first baseline widget in his Hugo site.
And dang it... He did something very smart.
My solution relies on fetching and parsing raw MDN compat JSON data stored on GitHub. Honestly, this approach is neither pleasant to work nor does it lead to accessible baseline information. Implementing the baseline logic on my site has been on my list for a while, but you know... life's busy.
Paweł, on the other hand, kinda reverse engineered where the data on webstatus
is coming from.
It turns out the Web Platform Status site sits on top of an open API, which you're free to query from wherever.
# query all features
https://api.webstatus.dev/v1/features
# query a specific web feature
https://api.webstatus.dev/v1/features/backdrop-filter
If you're querying a specific feature, you get all the information required to render your custom baseline widget.
{
"baseline": {
"low_date": "2024-09-16",
"status": "newly"
},
"browser_implementations": {
"chrome": {
"date": "2019-07-30",
"status": "available",
"version": "76"
},
"edge": {
"date": "2020-01-15",
"status": "available",
"version": "79"
},
"firefox": {
"date": "2022-07-26",
"status": "available",
"version": "103"
},
"safari": {
"date": "2024-09-16",
"status": "available",
"version": "18"
}
},
"feature_id": "backdrop-filter",
"name": "backdrop-filter",
"spec": {
"links": [
{
"link": "https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"
}
]
},
"wpt": {
"experimental": {
"chrome": {
"score": 0.995604396
},
"edge": {
"score": 0.96043956
},
"firefox": {
"score": 0.985714286
},
"safari": {
"score": 0.984615385
}
},
"stable": {
"chrome": {
"score": 0.995604396
},
"edge": {
"score": 0.96043956
},
"firefox": {
"score": 0.985714286
},
"safari": {
"score": 0.983516484
}
}
}
}
The API endpoints are somewhat undocumented, but if you want to dig deeper, here's the Open API spec.
That's such a nice find. Thank you, buddy!
Now I only have to find the time to drop my massive JSON wrangling and implement a new baseline widget...
Join 5.4k readers and learn something new every week with Web Weekly.