There is a hue and cry for HTML5, why not? As a new standard (yet to be standardized) every one want to seize it at the earliest, which has its own cost, and that is forfeiting old browsers (esp IE6/7/8), for few it may not be an expensive deal, but for many it is very expensive as they cannot afford to lose their valuable customers. Because of this many hesitate to switch to this new technology, as they are scared of losing there customer base without even knowing HTML5 is a not a new standard, but a culmination of existing two technologies, yes HTML4 (DHTML) and JavaScript. Today we are going to see how to make HTML5 to work in old browsers, however before we get to there, first we will see how HTML4 and JavaScript can make HTML5 (close to)
To support my statement, I’m going use few attributes in HTML5 and how they can be achieved in before HTML5 standards.
1) Contenteditable : This is something which is already existing in HTML4+, however implementing the same was tiresome, people who have worked/working on WYSIWYG would know what I mean, even before HTML5 emerged, Wikipedia, Google were using this in their website to build rich text formatting. Let’s see the implementation of the same in HTML5 vs earlier version
EX (in HTML5): <p contenteditable="true"> This is as simple as that in HTML5. However in earlier versions <html><HEAD>
<SCRIPT>
function EditContent() {
currentState = oSpan.isContentEditable;
newState = !currentState;
oSpan.contentEditable = newState;
oCurrentValue.innerText = newState;
newState==false ? oBtn.innerText="Enable Editing" :
oBtn.innerText="Disable Editing"
}
</SCRIPT>
</HEAD>
<BODY onload="oCurrentValue.innerText = oSpan.isContentEditable;">
<P>Click the button to enable or disable SPAN content editing.</P>
<P>
<BUTTON ID="oBtn" onclick="EditContent()">Enable Editing</BUTTON>
</P>
<P><SPAN ID="oSpan">You can edit this text.</SPAN></P>
SPAN can be edited: <SPAN ID="oCurrentValue"></SPAN>
</BODY> </html> This is extensive javascript, well still it is worth, and we can use the same syntax (for html) as in HTML5, which will be discussed in the next example.
2) PlaceHolder : This attribute specifies a hint, the tells the user what is expected on this input field, the hint is displayed in the input field when the input field is empty, it can be short description or format which will educate the user as to what to enter in this field. Ex (in HTML5) <input type="text" name="fname" placeholder="First name" /> as we can it is pretty neat and simple, all we to do is add the placeholder attribute with the appropriate text, rest is taken care by the browsers, which supports HTML5 on browsers HTML5 not supported the placeholder is of no use, but how to make it work in old browsers as well, here comes the JavaScript (Can use Jquery or other frameworks which is not in the scope of this article) to rescue us
<script type="text/javascript">
var ids = document.getElementsByTagName('input');
for(int itm =0; itm<ids.length();itm++)
{
if(ids[itm] != null && ids[itm].type != 'text' && ids[itm].placeholder != undefined)
{
ids[itm].onblur = 'javascript:AddDefaultText(this);';
ids[itm].onfocus = 'javascript:RemoveDefaultText(this);';
}
}
function AddDefaultText(txtCtl)
{
if(txtCtl.value == "")
txtCtl.value = txtCtl.placeholder;
}
function RemoveDefaultText(txtCtl)
{
if(txtCtl.value == txtCtl.placeholder)
txtCtl.value = "";
}
</script>
With the above example you can see how the HTML4+ can be used as HTML5, but with little extra effort, however this little extra effort can be isolated and can be developed as framework ( well, there are frameworks already available http://remysharp.com/2009/01/07/html5-enabling-script/ )
In the same way the other new attributes (like Min, Max, Pattern, Required and all) can be made work in older browsers.
The new elements in HTML5 (like article, header, footer, nav and so on) can also be made work in earlier browsers even in IE6 by just simply adding below JS code, I’m not going to discuss about this here, I leave this to you for self study.
· document.createElement("article");
· document.createElement("footer");
· document.createElement("header");
· document.createElement("hgroup");
· document.createElement("nav");
