Having fun with <image>
Did you know that this works in every browser?
Look, here's one:
You might think it's leaking from SVG, but SVG images don't use
src, they use
xlink:href. Let's all take a moment to laugh at xlink. Done? Ok…
In the first age of the web, some people accidentally typed
<image> instead of
<img>. Browsers decided they should error-correct for it and we've been stuck with it ever since.
But what about:
document.querySelector('image').src = "kettle.jpg";
Well, that throws an error in Chrome, Safari and Firefox, because
null. Whereas it works fine in IE. Try it:
document.querySelector('img').src = "kettle.jpg";
That works in all browsers, including IE. In fact,
querySelector('image') are completely interchangeable in IE. Try it:
var image = document.createElement('image'); console.log(image.tagName);
Well, it's "IMG" in Chrome, Safari & IE, but it's "IMAGE" in Firefox. How about:
var image = document.createElement('image'); image.src = 'f1.jpg'; document.body.appendChild(image);
This works in Chrome, Safari & IE, but Firefox treats it as an unknown element and doesn't load the image. Try it:
What's going on?
- Firefox aliases 'image' to 'img' at parse-time
- Chrome & Safari alias 'image' to 'img' at element-creation time
- IE aliases 'image' to 'img' throughout the runtime
<image> isn't defined in any spec….
Update: As Mathias Bynens points out (who's this blog's unofficial error-spotter),
<image> is specced by the WHATWG. It's only mentioned as part of token parsing, so although IE's handling of
<image> feels more complete, Firefox seems to be the most spec-compliant.