2025-07-17-bcd-missing-pages.md

Find missing MDN docs using BCD

I built a small proof-of-concept page that lists BCD features without MDN Web Docs pages. I deployed it at bcd.bsmth.de/ so you can have a look and see if you want to fill gaps in web documentation with us. It’s far from stable and may change at any point, but this post describes how it works and why I built it.

What is BCD?

MDN Web Docs reference pages have tables at the bottom that show Browser Compatibility Data (BCD) for technologies like HTML, CSS, JavaScript, and others. Previously, this data was maintained in pure HTML tables at the bottom of each MDN article, right after page content.

Around July 2017, most of this hand-curated information was converted from HTML to JSON, decoupling this support information from documentation. The browser compat information landed in a repo called mdn/browser-compat-data, which made maintenance a lot smoother and usability a lot more flexible. To make this data available in projects programmatically, a Node.js package is built from the browser-compat-data repository and published to npm.

Data from mdn/browser-compat-data powers a lot of tools, such as compatibility hints in your IDE, on Can I Use, powering Baseline, and many other tools for web development.

Using BCD in a project

I’ve contributed around 70 pull requests to BCD so far, most of which are about HTTP features and other technologies I touch when documenting release notes for Firefox. What I also like about BCD is that you can pull it into your projects from npm:

npm install @mdn/browser-compat-data

And you can find out browser support for features like Temporal.Duration like so:

import bcd from "@mdn/browser-compat-data";

const releaseDate = new Date(bcd.__meta.timestamp);
console.log(`BCD release: v${bcd.__meta.version}, ${date}`);
// BCD release: v6.0.32, Tue Jul 15 2025 18:24:38 GMT+0200 (Central European Summer Time)

const temporalSupport = bcd.javascript.builtins.Temporal.Duration.__compat;
console.log(temporalSupport);
//{
//  mdn_url: 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Temporal/Duration',
//  source_file: 'javascript/builtins/Temporal/Duration.json',
//  spec_url: 'https://tc39.es/proposal-temporal/#sec-temporal-duration-objects',
//  status: { deprecated: false, experimental: true, standard_track: true },
//  support: {
//    chrome: { impl_url: 'https://crbug.com/42201538', version_added: false },
//    firefox: { version_added: '139' },
//    safari: {
//      impl_url: 'https://webkit.org/b/223166',
//      version_added: 'preview'
//    },
//   ...

There’s lots of reasons why knowing browser compat information is useful in projects, the most obvious one being static analysis of your code to give hints about feature support during development.

Detecting missing documentation

One interesting thing is that each of the BCD entries has an mdn_url, for example the javascript.builtins.Temporal.Duration entry above has this member:

// mdn_url: 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Temporal/Duration',

And if you look at that MDN page, you can see this mirrored in the Temporal.Duration page front matter:

title: Temporal.Duration
slug: Web/JavaScript/Reference/Global_Objects/Temporal/Duration
page-type: javascript-class
status:
  - experimental
browser-compat: javascript.builtins.Temporal.Duration

So now we have a mapping between MDN, which contains the documentation, and BCD, which contains support data, identifiable by the BCD key javascript.builtins.Temporal.Duration.

To build a small app with BCD data, I had a look through each of the entries and checked if it’s missing an mdn_url. This can happen if support information is added to BCD, but no documentation page for it has been written yet. So let’s try to fetch some interesting BCD entries without an mdn_url. Basically, this is all we need to check CSS properties:

for (const [key, value] of Object.entries(bcd.css.properties)) {
  const compat = value.__compat;
  // if there's support info, but no mdn_url, we're interested:
  if (compat.support && !compat.mdn_url) {
    console.log(key);
  }
}
// -webkit-app-region
// -webkit-border-horizontal-spacing
// -webkit-border-vertical-spacing
// …

And we’re more or less done! The rest of the work is adding filtering and visualization logic. It’s good to set a max depth to traverse for BCD data, because I’m generally interested in checking if properties.align-self is missing an MDN URL but not properties.align-self.stretch:

.thing {
  align-self: stretch;
}

It doesn’t make that much sense to have dedicated pages for each property’s value (like stretch) as most of these keywords can’t be explained in isolation.

Check missing MDN pages

I deployed the example app here: https://bcd.bsmth.de/ so you can have a look at the types of information you can explore. It’s less important to have MDN pages for deprecated and non-standard things, so those are hidden by default.

Bear in mind this is a basic example app to get my creative juices flowing, and obviously there’s lots of technologies to check aside from CSS. I haven’t decided if I want to have all technology categories on the same page or on separate pages (/css, /html), or to be able to switch between technology categories and focus on CSS only, JS only, HTTP only, via a dropdown. Maybe there’s a better way to display the information other than tables, like cards?

Anyway, I hope you find it interesting, and at the least you have some ideas about using BCD data in your projects. If you want to fill in some of the documentation gaps, get in touch, or just go for it and don’t forget to mention me (@bsmth).

See also

Published: