Archive for August, 2010

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.

Vote for my SXSW 2011 panel!

The SXSW 2011 panel picker is now open, and my panel needs your vote!

HTML5: A Holistic Approach

HTML5 is the newest frontier in web development, waiting to revolutionize your site–inside and out. A new frontier demands a new approach, and the HTML5 microdata and ARIA specs, in tandem with advanced CSS and JavaScript features, mark the birth of a new semantic web. Learn how to harness the latest in browser tech to build expressive, durable, data-rich, and accessible web applications without even trying.

Please vote before August 29, 2010!