HTML 5 Without JavaScript Shims


RSS Feed

<< November | December | January >>

Thursday, 16th December 2010

Last year I wrote an article containing the results of my HTML 5 browser test. The technique that I used for the test (and that I use on this website) is to use a small JavaScript "shim" to help some browsers understand the new HTML 5 elements, such as header, article, aside, footer and nav.

With HTML 5 fast becoming the hottest discussion topic on design forums (along with CSS 3) I saw the need to create another method of ensuring the HTML 5 could survive in older browsers. One of the most frequent topics of discussion is that people need to support Internet Explorer 6 and so they wouldn't touch HTML 5 or CSS 3 for their project.

The first problem with this is that HTML 5 works perfectly in Internet Explorer 6 if you use the JavaScript shim (it also works in most browsers in the universe). If you don't like the idea of using JavaScript to fix up your HTML 5 for older browsers, then there is a JavaScript-Free HTML 5 technique available too. The technique wraps each HTML 5 element with a div element with a class name that matches the HTML 5 element name. When HTML 5 support is universal, you delete the "." dots from your CSS file and remove the div elements.

So there really is no reason not to use HTML 5 right now.

From a CSS 3 perspective, there are few reasons not to use at least some CSS 3. The most common bit of CSS 3 that I use is border-radius. This, and many other CSS 3 rules, is entirely safe to use as they don't stop the page from working in any browser. The page may look a bit nicer in some browsers, but the loss of a round edge here and there for someone on Internet Explorer 6 isn't the end of the world.

You Are Here: Home » Blog » HTML 5 Without JavaScript Shims