Enhancing for Bugs

In the days of Internet Explorer 6, it was common to lament the problems of the browser nobody wanted to support. Some of the bugs that developers have uncovered are well documented, some of them not. This falls more into the later camp. It’s fix, while trivial, serves as a great reminder about how to build software that works in every browser.

Let’s get the basics out of the way first. In every browser on the planet (except IE6), it is possible to create a checkbox in IE6 that is by default selected using everyday JavaScript.

var cb = document.createElement(“input”);
cb.type = “checkbox”;
cb.checked = true;
A simple checkbox

The above code would render the checkbox once you append the checkbox to the DOM, but no matter how one tries, the box won’t actually start in the checked state. While it’s technically possible to sniff IE6 using conditional comments and react accordingly, trying to detect a browser based on its signature will always be a poor choice and a last resort.

Internet Explorer’s documentation on document.createElement shows that before IE9, it was possible to render an element using the angle brackets, < and > respectively. When rendering out an entire tag with angle brackets, IE6 properly sets the “checked” property. Since standards compliant browsers don’t allow angle brackets, we can start with a non-standard solution, falling back to the W3C method on failure.

// IE6 requires a checkbox to be made differently
try {
  var cb = document.createElement(‘<input type=“checkbox” checked>’);
} catch (e) {
  var cb = document.createElement(“input”);
  cb.type = “checkbox”;
  cb.checked = true;
}

By applying the philosophy of feature detection to something that is (by all accounts) a bug, we can keep true to our development principals in the browser.

Webmentions
What’s this?

Tweets, mentions, and trackbacksShare your thoughts

As this gets discussed, comments will show up here. If the post is new, it may take a bit for your thoughts to get from one side of the internet to the other.

Code Drift is the personal website of Rudolph Jakob Heuser