Mozilla is making it easier to check browser compatibility.
Many browsers on countless devices aim to support a growing web technology stack in order to deliver a great user experience for as many people as possible. Unfortunately, finding out what works where often means extensive manual testing. Thankfully, a major open source project has seen Mozilla pulling together this information into compatibility tables.
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?
The mission of MDN Web Docs is to document the features of the Open Web. It contains thousands of reference pages about CSS properties, HTML elements, HTTP headers, JavaScript objects, Web APIs and much more. Most docs also contain compatibility tables, so you can check if you’re able to use a certain feature. This has been very helpful in the past, but in the age of linters and programmatic access to (big) data sources, it’s not enough.
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. This means you no longer have to treat compatibility as an afterthought.
The MDN community is migrating compatibility info stored on thousands of wiki pages to a machine-readable JSON format in a GitHub repo
The first project to use this data set is compat-report, 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.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
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.
Web design event Generate London 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.
This article originally appeared in net, the world's leading web design magazine. Buy issue 305 or subscribe here.
Florian is a technical writer at Mozilla working on MDN Web Docs. He is passionate about documenting Open Web technologies and making them accessible to everyone.
