Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: HTML5 Retrofit

  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML5 Retrofit

    I'm keen to know what you guys think of this. In order to have HTML5 semantics and support for older browsers without Javascript enable I've written a little script that changes classes into node. For example <div class="nav"> would become <nav class="nav">

    Code:
    //Adapt page to HTML5
        function changeNodeName(element, newNodeName) {
            var oldNode = element,
    			    newNode = document.createElement(newNodeName),
    			    node,
    			    nextNode;
    
            node = oldNode.firstChild;
            while (node) {
                nextNode = node.nextSibling;
                newNode.appendChild(node);
                node = nextNode;
            }
            for (var i = 0; i < oldNode.attributes.length; i++) {
                newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value);
            }
            
            oldNode.parentNode.replaceChild(newNode, oldNode);
        }
        try {
            var theBody = document.getElementsByTagName("body")[0];
            var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"];
            for (var i = 0; i < classNames.length; i++) {
                htmlFourElements = document.getElementsByClassName(classNames[i], theBody);
                for (var ii = 0; ii < htmlFourElements.length; ii++) {
                    changeNodeName(htmlFourElements[ii], classNames[i]);
                }
            }
        } catch(e) {
            console.error(e.message);
        }
    Let me know what you think

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by moefinley View Post
    I'm keen to know what you guys think of this. In order to have HTML5 semantics and support for older browsers without Javascript enable I've written a little script that changes classes into node. For example <div class="nav"> would become <nav class="nav">
    I think of this that itís pretty useless because semantic code is primarily made for programs that parse/interpret it. And these programs primarily interpret the HTML. If you change the HTML dynamically on the client side nothing is changing for HTML parsers because the plain hard-coded HTML basically stays the same.

    If you want semantics and support for older browsers without JS then write redundant code like:
    Code:
    <nav>
      <ul class="nav">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
    or
    Code:
    <header>
      <div id="header">
        content
      </div>
    </header>
    Old browsers will just ignore the new elements and you still have styling hooks.

  • Users who have thanked VIPStephan for this post:

    moefinley (09-17-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •