Browse files

updated readme to describe an IE desktop fallback

  • Loading branch information...
1 parent a169e65 commit 9aa22f58cd338bdd22e907239cb33629a5ec2143 Scott Jehl committed Oct 22, 2012
Showing with 22 additions and 0 deletions.
  1. +22 −0
@@ -71,6 +71,28 @@ Picturefill natively supports HD(Retina) image replacement. While numerous othe
* Note: Supporting this many breakpoints quickly adds size to the DOM and increases implementation and maintenance time, so use this technique sparingly.
+### Supporting IE Desktop
+Internet Explorer 8 and older have no support for CSS3 Media Queries, so in the examples above, IE will receive the first `data-src`
+ image reference (or the last one it finds that has no `data-media` attribute. If you'd like to serve a larger image to IE desktop
+browsers, you might consider using conditional comments, like this:
+ <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+ <div data-src="small.jpg"></div>
+ <div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
+ <!--[if (lt IE 9) & (!IEMobile)]>
+ <div data-src="medium.jpg"></div>
+ <![endif]-->
+ <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
+ <noscript>
+ <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+ </noscript>
+ </div>
## Support
Picturefill supports a broad range of browsers and devices (there are currently no known unsupported browsers), provided that you stick with the markup conventions provided.

1 comment on commit 9aa22f5

Depending on one's implementation, support for ie8 can also be faked. I've only used min-width in the data-media attribute, and in order to make picturefill work in ie8, I'm doing something like this:

    function a(){
            var t = $(this), f = t.find('div:first'), w = $(window).innerWidth();

                    ( $(this).attr('data-media') !== undefined )
                    ( $(this).attr('data-media') !== 'undefined' )
                    ( $(this).attr('data-media') !== false )
                    ( w > parseInt($(this).attr('data-media').replace('(min-width: ','').replace('px)','')) )
                    f = $(this);
            t.append('<img src="'+f.attr('data-src')+'" alt="'+t.attr('data-alt')+'">');
Please sign in to comment.