Having fun with

Did you know that this works in every browser?

<image src="f1.jpg">

Look, here’s one:

An <image>

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.

Update: As Elijah Manor points out, there’s a comment hidden in the WHATWG spec suggesting a study was done in late 2005 showing ~0.2% of pages used the <image> element.

But what about:

document.querySelector('image').src = "kettle.jpg";

Well, that throws an error in Chrome, Safari and Firefox, because querySelector('image') returns null. Whereas it works fine in IE. Try it:

How about:

document.querySelector('img').src = "kettle.jpg";

That works in all browsers, including IE. In fact, querySelector('img') and querySelector('image') are completely interchangeable in IE. Try it:

How about:

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?

It seems:

  • 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.


This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog

Did you know that this works in every browser?

<image src="f1.jpg">

Look, here's one:

An <image>

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.

Update: As Elijah Manor points out, there's a comment hidden in the WHATWG spec suggesting a study was done in late 2005 showing ~0.2% of pages used the <image> element.

But what about:

document.querySelector('image').src = "kettle.jpg";

Well, that throws an error in Chrome, Safari and Firefox, because querySelector('image') returns null. Whereas it works fine in IE. Try it:

How about:

document.querySelector('img').src = "kettle.jpg";

That works in all browsers, including IE. In fact, querySelector('img') and querySelector('image') are completely interchangeable in IE. Try it:

How about:

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?

It seems:

  • 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.


This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog


Print Share Comment Cite Upload Translate Updates
APA

Jake Archibald's blog | Sciencx (2013-08-09T15:05:56+00:00) Having fun with . Retrieved from https://www.scien.cx/2013/08/09/having-fun-with/

MLA
" » Having fun with ." Jake Archibald's blog | Sciencx - Friday August 9, 2013, https://www.scien.cx/2013/08/09/having-fun-with/
HARVARD
Jake Archibald's blog | Sciencx Friday August 9, 2013 » Having fun with ., viewed ,<https://www.scien.cx/2013/08/09/having-fun-with/>
VANCOUVER
Jake Archibald's blog | Sciencx - » Having fun with . [Internet]. [Accessed ]. Available from: https://www.scien.cx/2013/08/09/having-fun-with/
CHICAGO
" » Having fun with ." Jake Archibald's blog | Sciencx - Accessed . https://www.scien.cx/2013/08/09/having-fun-with/
IEEE
" » Having fun with ." Jake Archibald's blog | Sciencx [Online]. Available: https://www.scien.cx/2013/08/09/having-fun-with/. [Accessed: ]
rf:citation
» Having fun with | Jake Archibald's blog | Sciencx | https://www.scien.cx/2013/08/09/having-fun-with/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts