I’ve been working on a JS implementation of the picture tag. It is important that a JS implementation is possible – if a JS implementation isn’t possible on older\/current browsers, then these older\/current browsers will display the mobile sized image.<\/p>\n
Chrome, FF and Opera came together very quickly, as ever though IE7\/8 is slightly more challenging, but the real stumbling block is IE9.<\/p>\n
The picture tag version I’ve been working on implementing is [3] in the etherpad<\/p>\n
<picture>
\n<source \/>
\n<source \/>
\n<img>
\n<\/picture><\/p>\n
Approach One: In non-IE Jquery allows us to select the Elements. This makes life very easy, we can just select the picture elements, loop over the source elements and regex the contents of the media attribute:<\/p>\n
http:\/\/jsfiddle.net\/7555C\/4\/<\/p>\n
Approach Two: In IE7\/8 it gets a little more tricky as we can’t directly select the picture element. We can however select the image element, and then get it’s parent, and then get it’s parents inner html, and then regex the required information out of it:<\/p>\n
http:\/\/jsfiddle.net\/BKAWp\/6\/<\/p>\n
Neither of these approaches will work in IE9 though. In IE9 we still can’t select the picture tag, and the source elements actually get removed from the html. (I’m assumming this is because they are recognized as elements, which are invalid in that location). If we have no way of accessing the information in the source element then we can’t use that syntax.<\/p>\n
However there is one simple work around:<\/p>\n
<picture>
\n<pic-source \/>
\n<pic-source \/>
\n<img>
\n<\/picture><\/p>\n
Because IE9 doesn’t recognize pic-source it doesn’t remove it from the html, and then we can use approach two:<\/p>\n
http:\/\/jsfiddle.net\/rerGC\/17\/<\/p>\n
There are also a couple of other differences, IE9 doesn’t like <pic-source \/>, and needs <pic-source><\/pic-source>, else it places the img in the pic-source element. Also IE7\/8 return the inner html in part upper, part lower case, IE9 returns it all in lower case.<\/p>\n
(I’m not particularly attached to <pic-source \/>, it just needs to be different from <source \/> so IE9 doesn’t strip it out)<\/p>\n
Please don’t view the code in fiddle as finished, it needs to be combined into one place, and further performance tweaks need to be looked at, however it will provide a proof of concept, and more importantly show the syntax we’re proposing is usable on older\/current browsers.<\/p>\n
Chris.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been working on a JS implementation of the picture tag. It is important that a JS implementation is possible – if a JS implementation isn’t possible on older\/current browsers, then these older\/current browsers will display the mobile sized image. … Continue reading