Last Updated: March 14, 2023
·
6.253K
· mlb

129 bytes to enable HTML5 on old browsers

And … here it is :

;("header footer section aside nav article figure figcaption hgroup time").replace(/\w+/g,function(a){document.createElement(a)})

NOTE : Put it in the head tag, or this wouldn't work.

17 Responses
Add your response

Neat!

over 1 year ago ·

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

over 1 year ago ·

@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.

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

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]-->
over 1 year ago ·

@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)

over 1 year ago ·

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

over 1 year ago ·

@newsociallife Thank you captain obvious!

over 1 year ago ·

@mlb :P

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

@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).

over 1 year ago ·

@malladye Sorry ?

over 1 year ago ·

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.

over 1 year ago ·

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.

over 1 year ago ·

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)})
over 1 year ago ·