129 bytes to enable HTML5 on old browsers

Neat!

interesting, could you explain a big how this would work?

@benjamine Well :

The initial problem is : Some new HTML5 tags just don't work in old browsers. Why ? Because it doesn't recognizes them. But if the browser doesn't support an element, creating it using JavaScript simply makes it existence possible.

What we need here is to activate :
"header footer section aside nav article figure figcaption hgroup time"

The String#replace trick is a way of avoiding a for loop. The /\w+/g RegExp targets words, and the second argument, the function, is executed for each word (that's the role or the "g" in the RegExp). Then we just have to create elements using document.createElement.

Putting this script at the very beginning of the page makes the whole page ready to recognize these tagNames.

thanks! I didn't knew document.createElement had that effects, thanks a lot for your explanation.

@mlb great details, would be even better as part of the pro tip!

This has the caveat that .innerHTML with new tags will not work. This means that these examples will fail:

document.getElementById('hello').innerHTML = '<section>Yo!</section>';

$("p").append("<aside>Hola!</aside>")

To solve this as well, just use html5shiv.

<!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif]-->

@rstacruz I am sorry, but you're wrong, Element#innerHTML works really well with this trick. (as you can see here : http://mlb.tl/L7GF)

ehm... it just enables the basic tags that are exactly the same as divs..
no <video> no <audio> no <keygen> and so on...

@newsociallife Thank you captain obvious!

@mlb :P

lol... you must change the title. at first glance, you tricked me...

Does this work at all with CSS? I would expect a hack like this to break any CSS written for the HTML5 elements.

@alanaktion This function enables CSS styling on mentioned elements (to make them behave as they should you need to use header,footer,section,aside,nav,article,figure,hgroup,figcaption{display:block} though).

@malladye Sorry ?

It doesn't really enable HTML5. It just makes HTML5 elements styleable on old browsers. HTML5 is much more than just specialized div names.

But it's a good tip nonetheless.

I guess @malladye suggests to alter the title to "129 bytes to enable HTML5 markup and styles on old browsers" — because HTML5 also contains video, audio, user media features and many more.

Which would not work with your trick.

As a side note, you can also add the "main" and "menu". I'm sure some others are missing too.

This is only for old IE browsers and there are slightly shorter ways of doing it.

You can skip the spaces like that:

'AbbrArticleAsideAudioCanvasDetailsFigureFooterHeaderHgroupMarkMenuMeterNavOutputProgressSectionTimeVideo'.replace(/.[a-z]+/g,function(n){document.createElement(n)})