code & rock

The Good

Not too long ago I was developing a website for a pretty high profile technology conference. Of course it was being built with HTML5 and all that good stuff. As I’m sure you know dear reader if you plan on using features available in modern forward looking browsers you really should provide a fall back for older (read IE) browsers that don’t support the new approaches.

Instead of me just telling you what library is best why not give it a search using a term such as ‘detect browser features‘. What comes up top? Modernizr! Honestly you really should look into reading a few review of this library.

If you are a web developer and you don’t know about or currently don’t use this library you’re really really missing out! I’ll assume you know why simply detecting the user agent of the browser and serving customised code to it is the wrong path, if not read up.

Of course if you can’t use browser detection then what is there. capability detection. Essentially this is what modernizr does. It tests the current browser for certain capabilities and then appends a class to the page’s body tag to let you test for the inclusion/exclusion of that certain feature. For example if css3 background gradients are not supported then the body tag will have a class of ‘no-cssgradients’ whereas if the browser does support it then the class will be ‘cssgradients’.

What this offers the developer is priceless. A reliable and easy to implement method to do the right thing (capability detection). No more is there an excuse for mere browser detection.

The bug!

Now the thing is I was a bit lazy one morning and instead of going to the modernizer site and downloading the most recent copy of the library I simply grabbed one that I had already downloaded not too long ago. That was my mistake!

The version I was using was 2.0. Here’s the thing. Version 2.0 has a bug in it that causes IE7 to not visually display the webpage. It will either be white or the previous page displayed. If you view the source of the page it’s all present. This had me scratching my head a bit as well as unleashing a torrent of unsavoury terms at the test PC running IE7.

After trying a few investigatory things to prod the page and try and direct my search in the right direction (try searching Google for ‘blank webpage’!) I eventually thought about Modernizr. Not for any particular reason, it’s just that when you don’t have a clear idea of what is causing a problem the mind tends to wonder and come up with solutions.

So I head to Google and narrow my search down to focus on Modernizr issues, sure enough after opening and closing a few tabs I hit on this page – https://github.com/Modernizr/Modernizr/issues/296.

The takeaway

The takeaway from this little article is to keep on top of new releases of libraries you use on your sites. I learnt my lesson. I saved 5 minutes but ended up loosing an hour or two. Learn from my mistake. Oh and if you happen to be using modernizr well done but make sure if it’s version 2 you update it!

If you happen to know of any other interesting bugs with modernizr do let me know. I hope this article can help someone in the future.

richard@richardjohnashe.com