Mozilla's Browser Compatibility Project
Written by Lucy Black   
Friday, 09 February 2018

One big problem with web development is making your website accessible to everybody who wants to visit it, irrespective of the device or browser the are using. Mozilla's browser compatibility project aims to help.

mdnwebdocsbanner 

It simply isn't possible to achieve universality in web development. Not only is there is the problem of older browsers that don't and won't ever implement features you want to use and that current browsers don't immediately support  the latest HTML elements, CSS properties or JavaScript APIs,

To help you 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. The data is kept up-to-date and maintained by the MDN community and browser vendors who, as we reported in October 2017 formed the MDN Product Advisory Board to oversee MDN documentation and ensure it:

 stays relevant, is browser-agnostic, and helps developers keep up with the most important aspects of the web platform.

This type of help is also provided by caniuse.com, which also provides an estimate of what proportion of your potential market you might lose by including a specific feature.

As the Mozilla blog explains, however, looking up features in compatibility tables isn't ideal. Florian Scholz writes:

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.

The Mozilla community is therefore working on an alternative approach in which compatibility data can be accessed programmatically rather than by manual search. The first step is to migrate the compatibility information currently stored on thousands of wiki pages to a machine-readable JSON format in a GitHub repository 

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

This 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:

compatsnip2

On the Mozilla blog Scholz warns that as yet not all the compatibility data has been migrated from the MDN wiki pages into this repository. However a promising start has been made and he says: 

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. 

As an example of the possibilities created by this data the blog refers to a compat-report, an extension made by Eduardo Boucas that adds a Compatibility panel to the browser developer tools. It displays a table showing how any given site is expected to perform on multiple versions of each of the main browsers. Green indicates no compatibility issue, yellow means few issues and red alerts you to  several problems. This gives developers an initial overview of how well their site stacks up against the different browsers on the market.

 compat

 

Currently the extension only analyzes CSS, but in the future it could also flag compatibility problems with HTML and JavaScript and even leverage the vast number of polyfills on MDN to not only flag compat issues but also offer ways to address them. The project is on GitHub and contributions are welcome.mdnlogosq

More Information

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

mdn/browser-compat-data on GitHub

eduardoboucas/compat-report on GitHub

Related Articles

Mozilla's Plan For Easier Web Development

Mozilla Updates and Renames MDN

Mozilla Developer Network Celebrates 10th Anniversary

Mozilla Developer Network Redesign

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

Banner


52nd Mersenne Prime Found
27/10/2024

It has been nearly six years since the last Mersenne prime was discovered. Now, at last, we have Mersenne prime number 52 and it has 41,024,320 digits!



JetBrains Makes WebStorm and Rider Free for Non-Commercial Use
24/10/2024

JetBrains has launched a non-commercial license for its JavaScript and TypeScript IDE, WebStorm, and for Rider, its cross-platform .NET and game development IDE.


More News

espbook

 

Comments




or email your comment to: comments@i-programmer.info

Last Updated ( Friday, 09 February 2018 )