Many browsers on countless devices aim to support a growing web technology stack in order to deliver a great user experience (opens in new tab) for as many people as possible. Unfortunately, finding out what works where often means extensive manual testing. Thankfully, a major open source project (opens in new tab) has seen Mozilla pulling together this information into compatibility tables (opens in new tab).
In 2017, the MDN community started to migrate the compatibility information currently stored on thousands of wiki pages to a machine-readable JSON format in a GitHub repository. Having the data available in a structured form enables tools to integrate this information and flag compatibility issues at the point you’re writing code.
Web content should be compatible with as many browsers as possible (a decent website builder will ensure this, if you want something simple. And a great web hosting service will alert you to any problems)). Compatibility, like accessibility, is an important concern if you wish to avoid excluding people from your website or app. However, it is often difficult to tell whether a certain feature works in a given browser.
Is it supported correctly? Does it require a prefix, or is it supported with a non-standard name or behaviour? These kinds of questions can quickly multiply. Do you research every feature in your code to tell if they are supported enough? If your CSS files use more than 200 properties, you will probably start guessing how far back browsers are likely to support your layout. Having no real idea about the compatibility of an entire codebase is not ideal.
How can devs use this information?
In 2017, the MDN community started to migrate the compatibility information currently stored on thousands of wiki pages to a machine-readable JSON format in a GitHub repository (opens in new tab). Having the data available in a structured form enables tools to integrate this information and flag compatibility issues at the point you’re writing code. This means you no longer have to treat compatibility as an afterthought.
The first project to use this data set is compat-report (opens in new tab), a browser extension made by developer Eduardo Boucas as a side project. It adds a compatibility panel to the Firefox developer tools and audits CSS usage. It can give an initial overview about potential compatibility problems with the main browsers already, and sometimes tries to suggest ways to address the problem.
In the future, more tools like this could be integrated into code editors, for example offering tips about browser support, or giving warnings when your project requirements are incompatible with a certain browser version. Maybe compatibility could even be tested as part of continuous integration. A compat bot could comment on your pull request to give you hints about where support is going to break, for example.
How will this data set be maintained?
For now, the MDN community focuses on maintaining the compatibility data set and keeping it up-to-date together with other browser vendors. Last year Mozilla brought Microsoft, Google, the W3C, and Samsung together to form an MDN Product Advisory Board. While the MDN community always tried to provide information about web development for many browsers, this collaboration now formalises existing relationships.
For the compatibility data, the board members agreed to drive updates for Chrome, Edge and Samsung Internet and help review compatibility data GitHub pull requests (PRs) that are flagged for their browsers. As opposed to the old static compat tables, the new structured compatibility data is now updated regularly. That’s an enormous benefit for the maintainers of the MDN compat tables and everyone interested in using this data.
Everyone should be able to use the web with any devices and browsers. Having data available about possible incompatibilities should help with this.(opens in new tab)
Web design event Generate London (opens in new tab) returns on 19-21 September 2018, offering a packed schedule of industry-leading speakers, a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now (opens in new tab).
- 10 ways to avoid cross-browser compatibility issues (opens in new tab)
- Everything you need to know about WebGL (opens in new tab)
- 5 sensational new websites to be inspired by (opens in new tab)