HTML the modern way - using Modernizr
I recently wrote a post about HTML 5 and whether it was ready to use -- surmising that it certainly was and that we in fact built our new site using HTML 5 and associated technologies. When using the latest development techniques you still have to take into account older browsers, making sure that your code works in an acceptable manner for all of your target audience.
There are two common practices when trying to achieve this: graceful degradation and progressive enhancement:-
Graceful degradation
Graceful degradation is the older of the two approaches with the term also being used in fields other than just web design such as fault tolerant mechanical and electrical systems.
The idea behind graceful degradation is to first build for the latest device technologies, then adding handlers for less capable devices. The service offered is therefore gracefully degraded for the minority of lesser capable devices.
A simple example of graceful degradation is the use of the <noscript> tag when implementing JavaScript. For non-JavaScript compliant devices the contents of the <noscript> will be displayed.
Progressive enhancement
Progressive enhancement approaches the problem from the opposite end to graceful degradation in that you begin with the basic version that all devices can handle, then adding enhancements that more capable devices can handle. This approach forms the basis of unobtrusive JavaScript techniques.
An example of progressive enhancement is the application of Ajax to existing pages (this technique is also commonly know as Hijax).
Enter Modernizr
It's important to ensure your site reaches the largest audience possible (not least to comply with accessibility guidelines) thus having to cater for all the common browsers and devices. Front-end/interface developers have always had this problem to a lesser or greater degree and usually adopt one or both of the techniques outlined above. This problem, however, is now compounded by the new features of HTML 5 and CSS3.
Previously developers relied on browser sniffing/detection to help them here. By detecting what browser your visitor is using you can present code that works in that browser. The problems with this technique are primarily that a) it is not very reliable; and b) it generally means writing one piece of code for one browser and another piece of code the other. A new approach being adopted is feature detection - this involved detecting whether a browser is capable of implementing the desired feature, rather than detecting the browser version.
Modernizr is a small, open-source JavaScript library that makes it easy for developers to build different levels of user experience based on the capabilities of the visitor's browser. It was created based on the technique of progressive enhancement, so it supports (and encourages) developers in building their sites layer by layer. First starting off with a JavaScript free version, then adding layer upon layer of enhancement.
When embedded in your page Modernizr detects whether the visitor's browser supports new HTML 5 features such as audio, video, localStorage along with the new input element and attribute types, as well as detecting support for CSS 3 features such as border-radius, box-shadow and rgba() colour.
It works by testing for nearly 40 modern generation features and creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties. It also adds CSS class names to the <html> element to help you with targeting specific feature compliant browsers.
JS example:-
CSS example:-
So, for all you developers out there wondering whether HTML 5 is ready to use yet, I say to you...
Go forth and Modernize!
2 comments
It’d be great if it would work.
if (!Modernizr.inputtypes.time){
document.getElementById(‘timeMessage’).innerHTML = ‘User hh:mm format’;
}
returns a type error message :Cannot convert document.getElementById(‘timeMessage’) to object
It’s not as if I’m trying to do something really complex.
@AndrewDFrazier – A curious error indeed. Modernizr.inputtypes.time is valid, getElementById is (obviously) valid. Though innerHTML is not a valid method on an input field! You may want to try updating its value?!