-
28 January 2010, 14:05
HTML5 breaks Facebook
Firefox 3.6 came out earlier this week, and it caused problems with Facebook apps almost immediately. Fault does not lie with Firefox; rather, the blame belongs to Facebook app developrs. Firefox 3.6 moved towards HTML5-compliance, and is now enforcing a rule that was not followed.
The problem boils down to:
<serverFbml id="upperCaseTag"></serverFbml> document.getElementsByTagNameNS(document.body.namespaceURI, "serverFbml") Firefox 3.6: no results Firefox 3.5: finds upperCaseTag document.getElementsByTagNameNS(document.body.namespaceURI, "serverfbml") Firefox 3.6: finds upperCaseTag Firefox 3.5: finds upperCaseTagWhy does
document.getElementsByTagNameNS(document.body.namespaceURI, "serverFbml")return nothing in Firefox 3.6? The HTML parser folds [A-Z] to [a-z]; therefore, the actual DOM contains "fb:serverfbml"--in both 3.5 and 3.6. But if the DOM contains the same representation, why did it break in 3.6 and not 3.5? Well,document.getElementsByTagNameNSis case-sensitive, as of 3.6. This is per the spec, as it makes JavaScript and internal browser code easier to write.So why am I blaming Facebook developers too? XHTML has never allowed uppercase in tags, and all pages using XFBML are supposed to declare the doctype to be XHTML. This means that there should never have been a problem if people followed the rules.
Maybe I should blame browsers for being lax?