One of the announcements from Google I/O 2023 was Baseline, a new initiative to help simplify the challenge of deciding which web platform features are now widely enough supported by modern browsers to be safe to use.
The key idea is to document features that are now supported in "the most recent two versions of major browsers" - I've not found a more precise definition of that yet though. The browsers in question are Chrome, Edge, Firefox and Safari.
The initiative is being driven by the W3C WebDX Community Group. The key repository for the project is this one:
In particular, the relevant data is in the YAML files in the feature-group-definitions directory.
Here's an example, for border-image.yml:
spec: https://drafts.csswg.org/css-backgrounds-3/#border-images caniuse: border-image usage_stats: https://chromestatus.com/metrics/css/timeline/popularity/43 status: is_baseline: true since: "2017-03-09" support: chrome: "56" edge: "12" firefox: "50" safari: "9.1" compat_features: - css.properties.border-image - css.properties.border-image.fill - css.properties.border-image.gradient - css.properties.border-image.optional_border_image_slice - css.properties.border-image-outset - css.properties.border-image-repeat - css.properties.border-image-repeat.round - css.properties.border-image-repeat.space - css.properties.border-image-slice - css.properties.border-image-source - css.properties.border-image-width
The baseline data is in that
It took me a while to trick this down... because it turns out there are only 6 files (out of the 46 in that directory) that have this data so far!
The project publishes a web-features package to npm which includes all of that data as JSON.
Thanks to the jsDelivr CDN we can access the built JSON that's included in that package at this URL:
This combines the data from all of those YAML files into a single JSON file.
Since jsDelivr supports CORS, we can use that JSON file as the data source for Datasette Lite:
(I added a new feature to Datasette Lite to teach it to handle JSON files like this that contain an object at the top level rather than an array.)
This mostly worked, but was slightly confounded by the baseline data existing in a JSON object inside that
So... I defined the following SQL view to break that out into separate columns:
create view baseline as select _key, spec, '' || json_extract(status, '$.is_baseline') as is_baseline, json_extract(status, '$.since') as baseline_since, json_extract(status, '$.support.chrome') as baseline_chrome, json_extract(status, '$.support.edge') as baseline_edge, json_extract(status, '$.support.firefox') as baseline_firefox, json_extract(status, '$.support.safari') as baseline_safari, compat_features, caniuse, usage_stats, status from [index]
'' || json_extract(...) line there is needed to convert the boolean integer value into a string - which turned out to be necessary for Datasette's faceting to work correctly against the view.
I saved this to a Gist in order to take advantage of another Datasette Lite feature: you can tell it to load SQL, which will be executed after the JSON has been imported into a table.
Combining that together provides the following URL:
This imports the JSON, creates the SQL view and then loads the data from that view. And now you can explore the Baseline data using Datasette Facets!
Created 2023-05-12T11:01:27-07:00 · Edit