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

120

129 bytes to enable HTML5 on old browsers

5116 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

  • Blank-mugshot
    mlb

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

  • Image
    mdeiters

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

  • Blank-mugshot
    mlb

    @newsociallife Thank you captain obvious!

  • Blank-mugshot
    rstacruz

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

  • Blank-mugshot
    jamonholmgren

    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.

  • Blank-mugshot
    dpashkevich

    Neat!

  • Beneidel1
    benjamine

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

  • Beneidel1
    benjamine

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

  • Blank-mugshot
    mlb

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

  • Buz34rfkshxaj3ugonlv_normal
    newsociallife

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

  • Buz34rfkshxaj3ugonlv_normal
    newsociallife

    @mlb :P

  • 34171_409016086234_592971234_4868155_3441836_n_normal
    malladye

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

  • Dcaf6bce4e37fb60bd25ab3681194d0b
    alanaktion

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

  • Blank-mugshot
    mlb

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

  • Blank-mugshot
    mlb

    @malladye Sorry ?

  • 665864_10151110882760753_1047388038_o
    oncletom

    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.

  • 173983_1800933170_260095_n_normal
    hkdobrev

    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