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


Apollo Adds REST APIs For GraphQL
29/10/2024

Apollo has added a simpler way to integrate REST APIs into a federated GraphQL environment. Available now in public preview, can be used to map REST API endpoints to their GraphQL schema using a decla [ ... ]



Effortless ERD Design With Prisma Markdown
21/10/2024

Prisma Markdown is a new tool that takes the pain out of drawing entity relationship diagrams. An essential help if your design is database driven rather than code driven.


More News

espbook

 

Comments




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

Last Updated ( Friday, 09 February 2018 )