...

View Full Version : HTML5 Retrofit



moefinley
08-30-2011, 01:25 PM
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">



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

VIPStephan
08-30-2011, 05:10 PM
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:


<nav>
<ul class="nav">
<li></li>
<li></li>
<li></li>
</ul>
</nav>

or


<header>
<div id="header">
content
</div>
</header>


Old browsers will just ignore the new elements and you still have styling hooks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum