JS implementation / Problem with the source element

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.

Chrome, FF and Opera came together very quickly, as ever though IE7/8 is slightly more challenging, but the real stumbling block is IE9.

The picture tag version I’ve been working on implementing is [3] in the etherpad

<picture>
<source />
<source />
<img>
</picture>

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:

http://jsfiddle.net/7555C/4/

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:

http://jsfiddle.net/BKAWp/6/

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.

However there is one simple work around:

<picture>
<pic-source />
<pic-source />
<img>
</picture>

Because IE9 doesn’t recognize pic-source it doesn’t remove it from the html, and then we can use approach two:

http://jsfiddle.net/rerGC/17/

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.

(I’m not particularly attached to <pic-source />, it just needs to be different from <source /> so IE9 doesn’t strip it out)

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.

Chris.

9 Responses to JS implementation / Problem with the source element

  1. Hi Chris, have you seen the work Scott Jehl has done with creating a polyfill for picture? https://github.com/scottjehl/picturefill.

    If you’re putting your script together as a learning exercise, it might help — it actually turns out to be pretty easy to polyfill.

    • Chris Hilditch says:

      Hi Gordon,

      I hadn’t seen Scott’s Polyfill until after I’d posted this, but when I load Scott’s polyfill it doesn’t work in IE7/8/9. Are you finding it is working in IE7/8/9 or is it just my IE it doesn’t work in?

      Chris.

  2. John Holt Ripley says:

    Interesting how IE9 is treating the source elements. If we need to use a difference element name, then I think that gives us an opportunity to move away from source src="" which, although it follows the pattern for video, feels awkward.
    Could pic src="" work for the inner elements?

  3. Anselm Hannemann says:

    I don’t like the idea of two new elements. The idea of the whole picture-element was to do it similar to video-element. With changing source to a custom pic-src-element nearly all benefits are gone.

    I’d be highly interested in some test cases about IE6/7/8/9/10 here to proof if it works or not. Can anybody confirm the behavior Chris experienced?

    • Chris Hilditch says:

      Hi,

      I fully agree with you, I really liked it’s syntax being similar to video.

      Go to:
      http://scottjehl.github.com/picturefill/

      And run: document.getElementsByTagName('source');
      In Chrome FF etc you’ll see several results. Run it in IE9, you’ll see ‘length : 0,’.
      OR Run: document.getElementsByTagName('picture')[0].innerHTML;
      In Chrome FF etc you’ll see comment, source element, comment, source element, in IE9, you’ll see comment comment comment.

      Or just look in the html tab in IE’s dev tools.

      I’d be interested if anyone can find a way around this.

      (Also the IE7/8 example above is a little buggy – IE sometimes reorders the attributes alphabetically, and sometimes doesn’t, and the regex doesn’t allow for this, I’ll get around to updating it soon).

  4. Mathew Marquis says:

    Hey Chris,

    Would you be comfortable moving this thread to a GitHub repo? I’d love to be able to collaborate on this with you, and it’s much more conducive to issue-specific discussion.

    We definitely wouldn’t want to move away from syntax that’s already part of the HTML5 spec for the sake of a polyfill, but I’m confident there’s a way to work around the issues with source elements in IE.

  5. Anselm Hannemann says:

    Would be great to have this on github.

  6. Chris Hilditch says:

    Hi Mat,

    Apologies for not replying last week.

    Thanks to a pointer/suggestion from Scott (something I should’ve looked at!) I know IE7/8 is possible, but have a little more work to do on it. IE7/8 don’t have match media support, so it regexs the media query, so I figure it can only support a small(ish) subset of media queries (to maximise performance), but have the flexibility for a developer to add additional media queries easily. At the moment I only have proof of concept.

    I’m still actively looking into fixes for IE9 (and it seems the Android browser has the same behavior of striping out the source elements).

    Agreed GitHub would be better, I’ve created a fork of Scott’s excellent work (being non-jQuery / matchMedia it is alot better than what I had!), and I’ve created an ie-support branch, please feel free to comment with suggestions / send pull requests to the branch, (I’m new to Git / GitHub). I’ll hopefully get around to tidying the regex stuff a little today.

    Chris.

    • Chris Hilditch says:

      I now have something for IE9 – see http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/#comment-212

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Before you comment here, note that this forum is moderated and your IP address is sent to Akismet, the plugin we use to mitigate spam comments.