When breaking from the Web standards makes sense.
February 6, 2006
INTRODUCTION
Following the Web Standards makes perfect sense when it allows you to build easy to mantain websites that work with the major browsers. It doesn’t make sense when using Web Standards forces you to use hacks, prevents you from taking advantage of a great technology/feature or makes your job as a web designer or developer more difficult.
Let’s take a look at 3 very useful technologies that are not in the Web Standards, but do not have any of the negative consequences associated with browser specific code:
- IE conditional comments: for cross-browser CSS layouts.
- AJAX – using the XMLHTTPobject: for behind the scenes browser to server communication.
- The innerHTML property: for quick and easy DOM manipulation.
Though each of the above are not part of the Web Standards, they provide terrifically useful functionality without any hangups.
IE CONDITIONAL COMMENTS
Though IE conditional comments only work in IE, it makes great sense to use them when you want to isolate code. Since all other browsers will see IE conditional comments as being only HTML comments, there can never be a down side to IE conditional comments. It is the proper way of dealing with IE 6’s problems with CSS code.
Example:
<head>
<link href="standardStyle.css" rel="stylesheet" type="text/css" media=screen>
<!–[if IE 6]>
<link href="ie_style.css" rel="stylesheet" type="text/css" media=screen>
<![endif]–>
</head>
In the above example, we use IE conditional comments to hide IE specific CSS from all other browsers. Spefically, the IE conditional comments:
(<!–[if IE 6]> and <![endif]–>)
is loading the ‘ie_style.css’ style sheet only if the browser reading the page is IE6.
IE conditional comments are a replacement for dangerous CSS hacks that are commonly used to deal with IE’s occasional problems with standard CSS.
AJAX
The heart of AJAX is in the XMLHTTPObject – a JavaScript function built into every major browser but is NOT part of the Web Standards. Given how powerful AJAX is, and given how popular it has become, you can be sure that every major browser will continue to support it.
So as a Web Standards zealot, you have to ask yourself whether blind adhereance to the Web standards is worth missing out on this important tool? That is to say, if you’re a web standards zealot, you couldn’t/shouldn’t use AJAX since it is not part of the official Web standards … it’s your choice.
INNER HTML PROPERTY
InnerHTML is an easy to use property supported by all the major browsers that allows you to dynamically update/change web pages without having to do a page refresh.
Example using innerHTML:
var targetDiv = document.getElementById("targetDiv");
targetDiv.innerHTML = "<p>innerHTML is fast and easy!</p>"
Example using DOM methods:
var para = document.createElement("p");
var targetDiv = document.getElementById("targetDiv");
targetDiv.appendChild(para);
var txt = document.createTextNode("Dom methods are much longer than innerHTML");
para.appendChild(txt);
As you can see with the above examples, to insert text with DOM methods takes a lot more code than innerHTML. So, should you use innerHTML?
The answer: Browser makers typically don’t remove functionality, and given that innerHTML is supported by all the browsers and is easy to use, this is yet another example where I will break from the standards and feel comfortable about it.
