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.

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.

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.

This article is from the archives of felocity.com. The original unedited post can be found in the github archives. It has recieved a quick once-over to modernize the content where applicable, but may contain references and links to code that is dead, unloved, or may simply no longer apply to modern web development.

Like what you read? Give Jakob Heuser a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.