Where developers come to connect, share, build and be inspired.

4

129 bytes to enable HTML5 on old browsers

5775 views


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.

Comments

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

  • 961eb815a36bb0c929d7e948196aa5cd

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

  • 81829def637962204635704c091036ea

    @newsociallife Thank you captain obvious!

  • 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]-->
    
  • 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.

  • D42a7264714dee5006b9c99d2567a320

    Neat!

  • Beneidel1

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

  • Beneidel1

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

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

  • User-avatar

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

  • User-avatar

    @mlb :P

  • User-avatar

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

  • Dcaf6bce4e37fb60bd25ab3681194d0b

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

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

  • 81829def637962204635704c091036ea

    @malladye Sorry ?

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

  • User-avatar

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

Add a comment