Learn HTMl5: Usiing Modernizr for Backwards Compatibility
Although this looks like a monster problem to fix, it’s not actually that bad. The reason that this doesn’t work is that IE8 doesn’t recognize the new HTML5 elements that I’m using, so it doesn’t add them to the DOM, so you can’t style them using CSS.
However, just adding a reference to Modernizr (without making any other code changes!) will brute-force these elements into the DOM. Download it from http://www.modernizr.com/download/ and add a reference in the <head> section like so:
I added two script references, one to jQuery and one to Modernizr. I don’t actually need the jQuery reference at this point, but we will need it for the next script, so I’m adding it now.
Just this simple change now gets my site to this state in Internet Explorer 8:
It’s not perfect, but that is pretty close to the original version that we see in Internet Explorer 9. Modernizr added these new HTML5 elements that IE8 didn’t understand into the DOM, and since they were in the DOM, we could style them using CSS.
But Modernizr does more than that! Notice that one of the differences between our IE8 and IE9 versions of the webpage is that the IE9 version has nice rounded corners on the two articles and the figure, and the IE8 version doesn’t. We can also use Modernizr to fix this.
In this script, we’re checking the Modernizr object to see if there is support for "borderradius" (a CSS3 feature). If not, I use a jQuery script called jquery.corner.js (which is available for download at http://jquery.malsup.com/corner/ and requires that extra reference to jQuery which I made earlier). Then I simply call the corner method from that script on my articles and figures to give them rounded corners.
Or, you can do this a slightly different way. Modernizr has an optional (not included) conditional resource loader called Modernizr.load(), based on Yepnope.js. This allows you to load only the polyfilling scripts that your users need, and it loads scripts asynchronously and in parallel which can sometimes offer a performance boost. To get Modernizr.load, you have to include it in a custom build of Modernizr which you have to create at http://www.modernizr.com/download/; it is not included in the Development version. With Modernizr.load, we can write a script like this:
In short, this implements the same functionality as our previous script. Modernizr.load first tests the Boolean property "Modernizr.borderradius" to see if it is supported. Then, nope defines the resources to load if test is false. Since IE8 doesn’t support the CSS3 property "borderradius", it will load the jquery.corner.js script. Finally, the callback specifies a function to run whenever the script is done loading, so we will call the "corner" method on my articles and figures as we did before. There is a brief tutorial on Modernizr.load at http://www.modernizr.com/docs/#load if you want to dive deeper.
Now, by using either of those scripts, our Internet Explorer 8 version (which doesn’t support HTML5) looks like this:
Therefore, using polyfills and tools like Modernizr allow you to utilize new HTML5 functionality and still provide a good experience on older browsers as well. For more information, check out http://www.diveintohtml5.org/detect.html which describes in detail how Modernizr detects HTML5 features.
In this introduction to HTML5, we covered semantic markup, canvas, audio and video, and using HTML5 while retaining support for older browsers. But also note that there’s a lot we didn’t cover: microdata, storage, CSS3, etc. Here are a few resources to continue learning about HTML5:
- IE Test Drive – even if you don’t use Internet Explorer, this is an awesome site. It contains a ton of demos: Speed Demos, HTML5 Demos, Graphics Demos, and Browser Demos. Try them in your favorite browser! This site also has links to other resources, too.
- Beauty of the Web – showcases the best sites on the web that take advantage of HTML5 hardware acceleration and pinning features with Internet Explorer 9
- BuildMyPinnedSite – all the code, ideas, and samples you need to use pinning and Windows integration
- HTML5 Labs – This site is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. You can play with prototypes like IndexedDB, WebSockets, FileAPI, and Media Capture API.
- Brandon Satrom’s “Application Development with HTML5” talk at TechEd 2011 – this is a fabulous hour-long talk that nails what you need to know to do HTML5 development
- HTML5 talks from MIX 2011 – a wealth of HTML5 sessions
Many development tools support HTML5 already. Try these:
Visual Studio 2010 SP1 – SP1 adds basic HTML5 and CSS3 IntelliSense and validation. For more information, see http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx.
Web Standards Update for Microsoft Visual Studio 2010 SP1 – this is a Visual Studio extension that adds updated HTML5 and CSS3 IntelliSense and validation to Visual Studio 2010 SP1, based on the current W3C specification.
WebMatrix – HTML5 is supported by default out of the box (adding a new HTML page uses the HTML5 default doctype and template code)
The New Project dialog includes a checkbox-enabled HTML5 version of project templates.
These templates leverage Modernizr 1.7 to provide compatibility support for HTML5 and CSS3 in down-level browsers.
HTML5 IntelliSense and support in the Code Editor and the Design View
Richer CSS3 style editing and IntelliSense
SuperPreview Page Interaction Mode and Online Service (remote browsers include Chrome, IE8, IE9, and Safari 4 and 5 on Windows and Mac)
Besides development tools, don’t forget:
Windows Phone “Mango” contains Internet Explorer 9, which supports HTML5 sites.
HTML5 is here. Go forth and develop amazing websites!
This article was reprinted with permission from Microsoft Corporation. This site does business with Microsoft Corporation.
Jennifer Marsman is a Developer Evangelist in Microsoft’s Developer and Platform Evangelism group, where she educates developers on Microsoft’s new technologies. Prior to becoming a Developer Evangelist, Jennifer was a software developer in Microsoft’s Natural Interactive Services division. In this role, she received two patents for her work in search and data mining algorithms. Jennifer has also held positions with Ford Motor Company, National Instruments, and Soar Technology.