An API to access browser support and baseline data (#blogPost)

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.

MDN Compat Data (source)

Browser support info for Relative color() syntax

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.dev 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...