Until Sprinkle I never did much with extending the HTML DOM with my own tags or attributes. When XML was introduced several years ago, people tried to "explain" it by just throwing in custom tags in their HTML and saying, "This is how the new semantic web is gonna look like, see?
<books><ol><book><li>My Book</li></book><book><li>My Other Book</li></book></ol></books>
Of course, that's not the greatest example, but at any rate, from this came XHTML which basically told everyone to formalize this whole XMLization of HTML markup so that custom tags can be declared using a strict DTD extention methodology. Great idea, only instead of picking the ball up and running with it for the sake of extensibility, people instead ran the other way and enforced strictness alone. So XHTML turned out to be a strictness protocol rather than an extensibility format.
Literally, even the latest, shiniest new web browsers, except for Opera (congratulations, Opera) have trouble dealing with inline XHTML extensions. At sprinklejs.com, the following at the top of the document causes a problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[ <!ATTLIST div src CDATA #IMPLIED > <!ATTLIST div anticache CDATA #IMPLIED > <!ATTLIST div wraptag CDATA #IMPLIED > <!ATTLIST div apply CDATA #IMPLIED > <!ATTLIST input anticache CDATA #IMPLIED > <!ATTLIST input apply CDATA #IMPLIED >]>
The problem? Just go try and run that and you'll see what the problem is. The stupid web browser doesn't even speak XHTML. It sees those ATTLIST tags and thinks aww heck this must be malformatted HTML 4.01 markup, so it tries to "clean" it up in-memory by closing out the DOCTYPE before it reaches the "]>". So, when it does reach the "]>", it thinks, "Huh. Odd. What's that doing here? I haven't reached a <body> tag yet. That must be a markup error. I'll just go and 'clean' that up by moving it to the top of the body." So it gets rendered as text.
If you do a Javascript alert(document.body.innerHTML); you'll see that it became content rather than treated as an XHTML pre-parser definition. W3C validator thinks it's just hunky dory, but IE7 / FF2 / Safari 3 simply don't have a clue. (Morons.)
But heck. It handles the custom tags without the declaration just fine. These browsers don't balk at the Sprinkle script when the XHTML extensions aren't declared. And the breaking point is just extra content, right?
So I "fixed" this by simply clearing that ugly bit out. Here we go:
function dtdExtensionsCleanup() { // tested on MSIE 6 & 7, Safari 3, Firefox 2 if ((document.body.innerHTML.replace(/ /g, '').replace(/\n/g, "").substr(0, 5) == "]>") || ( document.body.innerHTML.substr(0, 11) == "<!--ATTLIST" || document.body.innerHTML.substr(0, 11) == "<!--ELEMENT" )) { var subStrStartIndex = document.body.innerHTML.indexOf(">", document.body.innerHTML.indexOf("]")); var subStrHtml = document.body.innerHTML.substring(subStrStartIndex + 4); document.body.innerHTML = subStrHtml; } else { // Opera 9.23 "just works" }}
Subscribe