The MDN (Mozilla Developer Network) web docs are an awesome resource for every web developer.
So naturally I regularly use MDN to check possible attributes, how an element can be used or on what browsers it is supported. While working on a small side project, I noticed, that the compatibility table of the input[type=color] element shows quite some browsers as "Compatibility unknown". Amongst others Edge. Since I already had a basic example of the input element available and I am working on a Windows machine I tried the example with Edge and sure enough, everything worked just fine.
That's when I decided to try and improve MDN by contributing a small fix. But where to start? Luckily, each page has a big edit button at the top and works just like most other wikis. However, before you can edit a page, you need to sign in to your MDN profile. If you don't have one, you can sign in with GitHub and a MDN profile will automatically be created.
After signing in and editing a page, you will see a huge RichText editor. The browser compatibility table is normally at the very bottom, but when you scroll there you will find a message along those lines:
So the browser compatibility data is actually managed in a separate git repository on GitHub. So let's head over to GitHub and check it out. The repository is quite nicely structured and really well documented. The README.md describes the structure of the repository and the CONTRIBUTING.md explains what you should be aware of if you want to contribute.
So I quickly browser through the open Pull Requests, but I didn't find anything for my specific issue. Great! So let's find out where we can make the necessary changes. And sure enough, we find the file /html/elements/input/color.json which contains the exact data we want to modify.
The JSON structure is pretty straight forward. It contains an entry for each browser:
{
"support": {
"chrome": {
"version_added": "20"
},
"chrome_android": {
"version_added": null
},
"edge": {
"version_added": null
},
"edge_mobile": {
"version_added": null
}
}
}
The version_added property can have four different states:
- string: The exact version when a browser started supporting the element/attribute
- null: The compatibility is unknown
- true: The browser supports it, but the exact version is unknown
- false: The browser doesn't support it
Okay so what shall we enter? true? That would be possible, but it would be neat if we know the actual version. Well, caniuse.com thinks that it is supported since version 14 and sure enough, we find a Microsoft support ticket (wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514216--input-type-color Not Available anymore) with an official response stating that it is indeed shipped since EdgeHTML 14.
So what is there left to do? We simply fork the repository, edit the color.json file and enter "14" as the version_added for edge and edge_mobile and create the pull request. To ease the pain for the reviewers, we provide the link to the microsoft support ticket.
And voilà, we are finished. And not even 24 hours later, the pull request was successfully merged without any problems!
So it is actually quite easy to contribute to most of the online developer resources these days. If you haven't tried it, I encourage you to take a look. Small patches and updates like this make the resource a little bit better and more valuable step by step!
Read up on this topic: