Web Analytics Made Easy -
StatCounter HTML5 Retrofit - CodingForum

Announcement

Collapse
No announcement yet.

HTML5 Retrofit

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.
    Stop solving problems you don’t yet have!

    Comment

    Working...
    X