Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

all in.

  • Loading branch information...
commit 77defd7f9cfe645143a38b3b57b425a0c7b1f020 0 parents
scottjehl authored
Showing with 104 additions and 0 deletions.
  1. +15 −0 README.md
  2. +2 −0  external/matchmedia.js
  3. +36 −0 index.html
  4. +51 −0 picturefill.js
15 README.md
@@ -0,0 +1,15 @@
+# Picturefill
+
+A crude polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
+
+* Author: Scott Jehl (c) 2012
+* License: MIT/GPLv2
+* Notes: For active discussion of the picture element, see [http://www.w3.org/community/respimg/](http://www.w3.org/community/respimg/). While this code does work, it is intended to be used only for example purposes until either:
+
+ A) A W3C Candidate Recommendation for <picture> is released
+
+ B) A major browser implements <picture>
+
+Demo URL: [http://scottjehl.github.com/picturefill/](http://scottjehl.github.com/picturefill/)
+
+Note: The demo only polyfills picture support for browsers that support CSS3 media queries, but it includes the [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) for media-query-supporting browsers that don't have matchMedia.
2  external/matchmedia.js
@@ -0,0 +1,2 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);
36 index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=utf-8 />
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Picturefill</title>
+ <style>
+ body { font-family: sans-serif }
+ img { max-width: 100% }
+ </style>
+ </head>
+ <body>
+
+ <h1>Picturefill: A &lt;picture&gt; element polyfill</h1>
+
+ <p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
+
+ <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+ <!-- smallest size first - no @media qualifier -->
+ <source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg">
+ <!-- medium size - send to viewport widths 400px wide and up -->
+ <source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5.jpg" media="(min-width: 400px)">
+ <!-- large size - send to viewport widths 800px wide and up -->
+ <source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_z.jpg" media="(min-width: 800px)">
+ <!-- extra large size - send to viewport widths 1000px wide and up -->
+ <source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_b.jpg" media="(min-width: 1000px)">
+ <!-- extra large size - send to viewport widths 1300px wide and up -->
+ <source src="http://farm8.staticflickr.com/7144/6547286841_c6160b34e2_o.jpg" media="(min-width: 1200px)">
+ <!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src smallest size. -->
+ <img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+ </picture>
+
+ <script src="external/matchmedia.js"></script>
+ <script src="picturefill.js"></script>
+ </body>
+</html>
51 picturefill.js
@@ -0,0 +1,51 @@
+/*
+ Picturefill - a crude polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
+ * Author: Scott Jehl, 2012
+ * License: MIT/GPLv2
+ * Notes:
+ * For active discussion of the picture element, see http://www.w3.org/community/respimg/
+ * While this code does work, it is intended to be used only for example purposes until either:
+ A) A W3C Candidate Recommendation for <picture> is released
+ B) A major browser implements <picture>
+*/
+(function( w ){
+
+ // requires media query supporting browser with matchMedia support (polyfill available)
+ if( !w.matchMedia || !w.matchMedia( "only all" ) ){
+ return;
+ }
+
+ w.picturefill = function(){
+ var ps = w.document.getElementsByTagName( "picture" );
+
+ // Loop the pictures
+ for( var i = 0, il = ps.length; i < il; i++ ){
+ var sources = ps[ i ].getElementsByTagName( "source" ),
+ matches = [];
+
+ // See if which sources match
+ for( var j = 0, jl = sources.length; j < jl; j++ ){
+ if( w.matchMedia( sources[ j ].getAttribute( "media" ) ).matches ){
+ matches.push( sources[ j ] );
+ }
+ }
+
+ // Set fallback img element src from that of last matching source element
+ if( matches.length ){
+ ps[ i ].getElementsByTagName( "img" )[ 0 ].src = matches.pop().getAttribute( "src" );
+ }
+ }
+ }
+
+ // Run on resize
+ if( w.addEventListener ){
+ w.addEventListener( "resize", picturefill, false );
+ }
+ else if( w.addEvent ){
+ w.addEvent( "onresize", picturefill );
+ }
+
+ // Run when DOM is ready
+ picturefill();
+
+})( this );
Please sign in to comment.
Something went wrong with that request. Please try again.