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.

MDN Compat Data (source)
Browser support info for Relative color() syntax
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
11911911912812816.416.425.0119

Paweł thought the same and implemented a custom HTML-first baseline widget in his Hugo site.

Two custom HTML-only baseline widgets showing browser support information.

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.

Web Platform Status dashboard showing web features, browser support and baseline status.

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

If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles