I swear. The next version of my website is going to be a series of text files. In updating the d20 experience calculator (thanks Pants, despite the headache the comment caused), I have assembled a list of gripes, complaints, and pleas regarding our friend the HTML specification, and more pressingly, Internet Explorer’s horrible implementation of supporting it.
Internet Explorer just makes it worse. Oh, so vividly worse. Do I have to come to people’s houses and poke them in the eye until they start using Firefox?
Gripe #1: Whitespace in the DOM
In a general “this is stupid” complaint, I’ve learned over the past couple days, in working with the JavaScript behind the calculator, whitespace in the markup creates text children in the DOM tree. The DOM is a critical part of any sort of interaction with the HTML page, and manipulating elements (and their children) breaks in annoyingly stupid ways if you have whitespace in the HTML file itself.
As a quick and dirty example:
<div id="out"><div id="in"></div></div>
The “out” div has one child — “in". However, in…
<div id="out">
<div id="in">
</div>
</div>
“in” has three children — text (the first whitespace between <div id="out"> and <div id="in">), the “in” div, and more text (the remaining whitespace between </div> and </div>).
This is so amazingly stupid. Of course, the problem can be avoided by writing all your HTML sensitive to this problem, without whitespace, or by employing some JavaScript hacks to work around the problem, but why can’t things be sane and promote readable HTML markup?
Gripe #2: IE’s Crippled DOM
When working with JavaScript, you can check the object type (say, to determine if it is text, or a div node) with a simple line of code. For our example above, if we are looking at “out"’s children and trying to do something with all HTML elements (not text), we could traverse the list of children and make this check:
if (children[i].nodeType == Node.ELEMENT_NODE)
…
…unless, of course, the code is meant to be executed in Internet Explorer. IE doesn’t understand Node and thus bails, leaving the entirety of the code unexecuted.
Gripe #3: IE and <script>
Just another of many complaints from a day of poking around in Internet Explorer: The HTML specification, and indeed, IE itself, allow specifying a HTML tag without children or contained text in the following manner:
<img src="..." />
Unless, of course, the tag is script. When IE sees, say,
<script type="text/javascript" src="..." />,
it bails, entirely, and totally gives up rendering the rest of the page. Even the parts unrelated to the JavaScript are ignored. IE stops all rendering due to a supported tag that is specified in a manner supported perfectly fine in other situations by IE. A+. (This is the problem that Pants uncovered. The calculator page was blank, aside from the background image, in IE.)
Gripe #4: IE’s awful CSS support.
Internet Explorer 7 still doesn’t support display: table. So here’s the kicker, and the end of my rant: although the d20 calculator is “fixed", if you’re using IE, you are intentionally wanting it to look like crap. I can’t put it any other way. There are alternatives. Better alternatives. I’ve worked around IE’s stupidity so many times over my many years, but on this point, I’ve had it.
I welcome clean HTML/CSS submissions that render that page correctly in IE, but otherwise, if you don’t want the d20 experience calculator to display in one giant column, use any of the other popular browsers. They all get it right.