Posts Tagged ‘JavaScript’

The Non-Standard Standards

While doing research for my post on extending the DOM prototypes, I started to wonder: What else do we commonly see in code that works in every browser, but isn’t a part of any official standard?

Here are just a handful of the commonly-used, but never-standardized, features that every browser and his brother support:

innerHTML

I can’t start this discussion without mentioning the granddaddy of all nonstandard standards: innerHTML. The ubiquitous innerHTML property has been around longer than the W3C DOM spec, but it wasn’t a part of any official specification until HTML5. innerHTML allows you to write raw HTML code into an element, and have the browser parse it:

element.innerHTML = "

Emphasis

";

Lightning fast compared to other forms of DOM manipulation (and infinitely more concise), innerHTML was an essential tool long before it was a standard.

Multi-line string literals

In IE, Firefox, Chrome, Safari, and Opera, you can write a multi-line string literal by “escaping” the line breaks with backslashes, like so:

var s = "hello \
world! I am \
full of code!";

According to the ECMAScript 3 spec, that’s illegal syntax. According to every major browser release of the last 10 years, you’re just fine.

offsetHeight and offsetWidth

These two useful Element properties indicate the height or width of an element including its padding and borders as rendered. You’ll find them in every browser, but not in a W3C spec.

if (element.offsetWidth > element.width) {
alert("The element has padding or borders applied!");
}

scrollHeight and scrollWidth

More than a few properties from Microsoft’s DHTML spec have found their way into other browsers. scrollHeight and scrollWidth measure the total number of pixels needed to show an element in its entirety without scrollbars and regardless of whether or not the element is visible. These two properties are lifesavers when trying to animate an element from a display:none state to a display:block state.

scrollTop and scrollLeft

These two properties are also from the MS DHTML spec (oh the things you can get away with when you have an unchallenged browser monopoly for years). scrollTop and scrollLeft define how far an element has been scrolled (the distance from its top or left boundary to the top-most or left-most visible content).

window.onbeforeunload

This event property is used to alert users before they navigate away from the page, and supplies them a chance to cancel navigating away. The property is commonly used to remind users to sign out or save changes before they leave your site:

window.onbeforeunload = function() {
return "Your unsaved changes will be lost if you leave this page.";
}

onbeforeunload was introduced back in IE4, and has since been included in every other major browser. Note that, unlike other onevent properties, you cannot listen for a “beforeunload” event using addEventListener. The reason? It’s not a real event property and operates outside of the normal event system – it’s just deceptively named to look like one.

With the HTML5 spec now specifying exact rules for parsing tag soup, the W3C has made a move back towards recognizing (and codifying) widely supported behavior that’s long existed in the wild. Given that the non-standard standards, like DOM Level 0, aren’t going anywhere–and could benefit from some definition for implementers–I wonder if they’ll eventually get the same treatment.