Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

updated readme to describe an IE desktop fallback

  • Loading branch information...
commit 9aa22f58cd338bdd22e907239cb33629a5ec2143 1 parent a169e65
Scott Jehl authored
Showing with 22 additions and 0 deletions.
  1. +22 −0 README.md
View
22 README.md
@@ -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:
+
+```html
+ <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

@leongersen

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(){
    function a(){
        $('div[data-picture]').each(function(){
            var t = $(this), f = t.find('div:first'), w = $(window).innerWidth();

            t.find('div').each(function(){
                if(
                    ( $(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.find('img').remove();
            t.append('<img src="'+f.attr('data-src')+'" alt="'+t.attr('data-alt')+'">');
        });
    }
    $(window).resize(a);
    a();
})();
Please sign in to comment.
Something went wrong with that request. Please try again.