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

Building the web is hard

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

To make the web evolve within a sane and sustainable way for each users and developers, browser suppliers work together to standardize new functions, whether it’ s a new CODE element , CSS property , or JavaScript API . Yet different vendors have different focal points, resources, and release cycles — so it’ s very unlikely that the new feature will land upon all the major browsers at once. Being a web developer, this is something you should consider if you’ re counting on a feature to build your site.

Even more challenging than waiting for web browsers to implement a feature you need is definitely catering for those that never will. Creating for the web means supporting old – but sometimes still popular – versions of browsers, along with quirks and feature sets locked over time forever. For all this, choosing to utilize one particular feature over another on the website effectively means making a decision regarding which browsers it will optimally assistance.

Enter the Browser Suitability Project

To help programmers make these decisions consciously instead of accidentally, MDN Web Docs offers browser compatibility tables in its paperwork pages, so that when looking up an attribute you’ re considering for your task, you know exactly which browsers can support it. Whilst unquestionably useful, this resource alone doesn’ to eliminate all challenges. First of all, it takes people to actively search for compatibility information for each feature they use, which may not have to get trivial for less experienced developers. Additionally , there is the question of what happens if you inherit a project that already offers hundreds or thousands of lines associated with code. Inspecting each line separately to look for compatibility issues doesn’ to seem like a reasonable option.

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

The data is available being an npm bundle and you can get suitability information for a given web function like this:

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

It is going to return the data stored in the database, in this case from the text-justify. json document. You can query the data set, for example finding out which Firefox version additional support for text-justify :

 textJustify. support. firefox; // comes back “ 55” 
 

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

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

Finding compatibility issues through DevTools

An interesting sort of the possibilities created by this data is really a project called compat-report , an extension made by programmer Eduardo Boucas being a side project, that adds the Compatibility panel to the browser creator tools. Inside, a table displays how any given site is anticipated to perform on each of the main web browsers, showing each version where simply no compatibility issues are found in eco-friendly, those with a few issues in yellowish, and those with several problems within red. This gives developers an initial summary of how well their site piles up against the different browsers on the market.

Clicking on a browser version may launch a more detailed report, featuring lines with compatibility issues for every style sheet on the page. Exactly where applicable, the extension will also suggest methods to address the problem, such as adding the vendor prefix, as shown within the image below.

This particular project is still in its early stages, however the scope is immense and the map is ambitious. Currently it just analyzes CSS, but in the future it might also flag compatibility problems with CODE and JavaScript. It could even influence the vast number of polyfills upon MDN to not only flag compat issues but also offer ways to deal with them.

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

If you liked MDN browser compatibility data: Taking the guesswork out of web compatibility by Florian Scholz Then you'll love Web Design Agency Miami