MDN browser compatibility data: Taking the guesswork out of web compatibility

Building the web is hard

The most powerful aspect of the web is also what makes it so challenging to build for: its universality. When you create a website, you’re writing code that needs to be understood by a plethora of browsers on different devices and operating systems. It’s difficult.

To make the web evolve in a sane and sustainable way for both users and developers, browser vendors work together to standardize new features, whether it’s a new HTML element, CSS property, or JavaScript API. But different vendors have different priorities, resources, and release cycles — so it’s very unlikely that a new feature will land on all the major browsers at once. As a web developer, this is something you must consider if you’re relying on a feature to build your site.

Even more challenging than waiting for browsers to implement a feature you need is catering for those that never will. Building for the web means supporting older – but sometimes still widely used – versions of browsers, with quirks and feature sets locked in time forever. For all this, choosing to use one particular feature over another on a website effectively means making a decision about which browsers it will optimally support.

Enter the Browser Compatibility Project

To help developers make these decisions consciously rather than accidentally, MDN Web Docs provides browser compatibility tables in its documentation pages, so that when looking up a feature you’re considering for your project, you know exactly which browsers will support it. Whilst unquestionably helpful, this resource alone doesn’t eliminate all challenges. First of all, it requires people to actively search for compatibility data for each feature they use, which may not be trivial for less experienced developers. In addition, there is the question of what happens when you inherit a project that already has hundreds or thousands of lines of code. Inspecting each line individually to look for compatibility issues doesn’t seem like a reasonable option.

To allow for browser compatibility data to be accessed programmatically rather than requiring developers to manually search for it, the MDN community is working on migrating the compatibility information currently stored on thousands of wiki pages to a machine-readable JSON format in a GitHub repository. This opens the door to a myriad use cases, such as displaying compatibility information on a text editor as the developer writes the code, or an audit tool that scans an entire codebase and flags compatibility issues that the developer might not be aware of.

The data is available as an npm package and you can get compatibility information for a given web feature like this:

const compat = require('mdn-browser-compat-data');
let textJustify = compat.css.properties[‘text-justify’];
// returns a compat data object

It will return the data stored in the repository, in this case from the text-justify.json file. You can query the data set, like for example finding out which Firefox version added support for text-justify:

textJustify.support.firefox; // returns “55”

The compat data structure is described by a JSON schema; as well as the version numbers, it also contains information about prefixes or flags that might need to be set for a feature to work.

The data is kept up-to-date and maintained by the MDN community and browser vendors who, working together formed the MDN Product Advisory Board last year. Board members agreed to drive updates to compatibility data for Edge, Chrome, and Samsung Internet after each stable release and to help review compatibility data PRs that are flagged for their browser.

Finding compatibility issues from DevTools

An interesting example of the possibilities created by this data is a project called compat-report, an extension made by developer Eduardo Boucas as a side project, that adds a Compatibility panel to the browser developer tools. Inside, a table shows how any given site is expected to perform on each of the main browsers, showing each version where no compatibility issues are found in green, those with a few issues in yellow, and those with several problems in red. This gives developers an initial overview of how well their site stacks up against the different browsers on the market.

Screenshot of the compat-report extension. Showing a compatibility tab that is added to Firefox DevTools.

Clicking on a browser version will launch a more detailed report, highlighting lines with compatibility issues for each style sheet on the page. Where applicable, the extension will also suggest ways to address the problem, such as adding a vendor prefix, as shown in the image below.

This project is still in its early stages, but the scope is immense and the roadmap is ambitious. Currently it only analyzes CSS, but in the future it could also flag compatibility problems with HTML and JavaScript. It could even leverage the vast number of polyfills on MDN to not only flag compat issues but also offer ways to address them.

The extension itself is built using just HTML, CSS and JavaScript and its source is available on GitHub. If you like the idea and would like to help us take it further, we’d love for you to contribute.

About Florian Scholz

Florian is a Technical Writer working on MDN Web Docs where he dedicates his time to documenting and making Open Web technologies accessible to everyone. He lives in Bremen, Germany.

More articles by Florian Scholz…

About Eduardo Bouças

More articles by Eduardo Bouças…


10 comments

  1. Maxime Corteel

    This is awesome! I’ve been working on websites and web apps for about 15 years and though this issue is not what it was then, it still is a pain to account for all these differences.
    Thanks a lot for this incredible work, you guys rock so hard!

    February 1st, 2018 at 04:46

    Reply

  2. D D

    Hi,

    This looks very useful!

    It also looks a bit like the same purpose as caniuse.com

    Any chance for cross-pollenation there? Or I guess some friendly competition otherwise?

    February 1st, 2018 at 07:16

    Reply

    1. Florian Scholz

      caniuse.com is a wonderful resource! I’m pretty sure both projects are enormously helpful for answering web compatibility questions. MDN has a lot of compatibility information stored on over 6000 documentation pages which we’ve now liberated from the wiki into this fine grained data set. caniuse doesn’t have the same feature coverage, but now that the MDN data is in a structured form and set free from the wiki, working with the data and re-mixing or re-using it with other data sets is totally possible! I’m curious to see what we’ll come up with as we’re exploring working with this data some more.

      February 2nd, 2018 at 13:50

      Reply

      1. D D

        Thanks for the reply!

        By the way, I tried the addon Eduardo Bouças made, and even though it only does CSS as of right now, I can see it has massive potential. I would never be able to thoroughly review the CSS for compatibility like this by hand.

        Thankfully the site I’m working with already works well cross-browser, but this could come in handy when trying new platform features and/or during QA work.

        February 7th, 2018 at 11:16

        Reply

  3. Anon

    Great article!

    I was trying out the repo from npm and got a syntax error, do you need quotes around text-justify since it contains the hyphen?

    I tried the below and it worked great!

    let textJustify = compat.css.properties[‘text-justify’];

    February 2nd, 2018 at 08:07

    Reply

    1. Florian Scholz

      Thanks, you’re right! I’ve fixed this in the text now.

      February 2nd, 2018 at 13:27

      Reply

  4. Sotiris Katsaniotis

    This is very nice work and I have to agree that a strong resource for this purpose is also caniuse.com and a possible cooperation would be really wonderful.

    February 8th, 2018 at 06:25

    Reply

  5. kidkkr

    nice work with npm!!

    February 8th, 2018 at 16:08

    Reply

  6. anonon

    Great and very welcome work.

    Would love to see the green/yellow highlight contrast adjusted though. As I have a slight color blindness, this difference is really hard to spot.

    February 9th, 2018 at 01:15

    Reply

  7. Chuanqi

    One feature I wish caniuse.com would offer is a personal watch list. It would be nice to add features I really care about to a watch list an get email notifications when the support matrix for those features changes.

    February 9th, 2018 at 18:13

    Reply

Post Your Comment