qkkx9g

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

1678
D42a7264714dee5006b9c99d2567a320

Neat!

over 1 year ago ·
1723
Beneidel1

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

over 1 year ago ·
1726
81829def637962204635704c091036ea

@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 ·
1728
Beneidel1

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

over 1 year ago ·
1730
12003957 10206752435102297 2524621803006121539 n

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

over 1 year ago ·
1797
F8ec7f90daf8b1defb8e318d663c0f17

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 ·
1799
81829def637962204635704c091036ea

@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 ·
2178

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 ·
2180
81829def637962204635704c091036ea

@newsociallife Thank you captain obvious!

over 1 year ago ·
2182

@mlb :P

over 1 year ago ·
2721

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

over 1 year ago ·
2722
Dcaf6bce4e37fb60bd25ab3681194d0b

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 ·
2741
81829def637962204635704c091036ea

@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 ·
2742
81829def637962204635704c091036ea

@malladye Sorry ?

over 1 year ago ·
3194
93ea804680a6e7fb9d1914078833da51

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 ·
4226
665864 10151110882760753 1047388038 o

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 ·
6036

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 ·