Defining browser support

by Michael Scharnagl

This article has been updated the last time on July 13, 2015 and the given information may be not accurate anymore. Feel free to contact me on twitter to get more details.

I attended a meeting this week where we talked about optimising the “web process” for an agency – Among other topics we also had a great discussion about browser support.

When working with clients you usually set up a contract, where you often define the browser support for the project. From my experience, this often reads as “We support the latest 2 versions of all popular desktop and mobile browsers” or “We support IE9 and above, Chrome 36 and above, iOS6 and above, etc.”

While this sounds reasonable at a first glance you will have a hard time if you find out that a special feature won’t work in some of the stated browsers and you have to explain that to your client. This can happen quite often, for example, some features/modules are not fully defined at the start of a project and may require a technology some of the browsers don’t support.

Browser support by feature

Instead of stating browser support for the whole site I think it makes more sense to define browser support for every feature/module.

Here is an example I put on jsbin to show what this might look like:

Browser support table by features

Do find out the browser support for a module you can use caniuse.com. Search for all front-end technologies you need and collect the data in a table/spreadsheet.

CSS filter effects - Support table from caniuse.com
CSS filter effects support table from caniuse.com

This way, you have a good overview of browser support for all your modules and everybody involved with the project will have a handy reference. Furthermore, you can include notes describing what “full support” or “no support” means for a specific module. You can even go one step further and define multiple versions of a module and their support. If we take the video example, this could mean core function is a link to the video, enhanced version means HTML5 video player, enhanced enhanced version means full customized HTML5 player.

While I am fully aware that this may be hard to explain to clients I think it’s worth the time and will help everybody in the end.

Update: 13.07.2015
As Alexis Deveria points out it’s possible to search for multiple features at once on caniuse.com – If your module needs dom-range, mp3 and css zoom you can use this link and scroll down to summary to see support for all features.

What’s your approach of defining browser support for your projects? Let me know @justmarkup.

 

 

Michael Scharnagl

Portrait Michael Scharnagl

Follow me: @justmarkup

Subscribe to RSS: /feed

A freelance front-end developer focusing on HTML5, CSS, progressive enhancement and web performance.