Skip to content
This repository
Browse code

div branch becomes the new default

  • Loading branch information...
commit c839311a457f81675d33a0faa5d02153fd4778bc 1 parent 0d793ea
authored June 20, 2012
68  README.md
Source Rendered
... ...
@@ -1,52 +1,43 @@
1 1
 # Picturefill
2 2
 
3  
-A polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
  3
+A Responsive Images approach that you can use today, that mimics the [proposed picture element](http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal) using `div`s, for safety sake.
4 4
 
5 5
 * Author: Scott Jehl (c) 2012
6 6
 * License: MIT/GPLv2
7  
-* 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:
8  
-
9  
-	A) A W3C Candidate Recommendation for <picture> is released
10  
-		
11  
-	B) A major browser implements <picture>
12 7
 
13 8
 Demo URL: [http://scottjehl.github.com/picturefill/](http://scottjehl.github.com/picturefill/)
14 9
 
15  
-Note: The demo only polyfills `picture` support for browsers that support CSS3 media queries, but it includes (externally) the [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) which makes matchMedia work in `media-query`-supporting browsers that don't have `matchMedia`, or at least allows media types to be tested in most any browser. `matchMedia` and the `matchMedia` polyfill are not required for `picture` to work, but they are required to support the `media` attributes on `picture` `source` elements.
  10
+Note: Picturefill works best in browsers that support CSS3 media queries. It includes (externally) the [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) which makes matchMedia work in `media-query`-supporting browsers that don't have `matchMedia`, or at least allows media types to be tested in most any browser. `matchMedia` and the `matchMedia` polyfill are not required for `picturefill` to work, but they are required to support the `media` attributes on `picture` `source` elements.
16 11
 
17 12
 ## Size and delivery
18 13
 
19 14
 Currently, `picturefill.js` compresses to around 498bytes (~0.5kb), after minify and gzip. To minify, you might try these online tools: [Uglify]:(http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor]:(http://refresh-sf.com/yui/), or [Closure Compiler](http://closure-compiler.appspot.com/home). Serve with gzip compression.
20 15
 
21  
-`Picturefill` performs a html5-shiv style workaround to get `picture` elements recognized in IE browsers. Because of that, you must reference it from the `head` of your document. If you'd prefer not referencing it from `head`, you'll need to at least call `document.createElement("picture"); document.createElement("source");` somewhere in the head of your document, and then you can load `picturefill.js` whenever you want.
22  
-
23 16
 ## Markup pattern and explanation
24 17
 
25  
-While the [proposed markup for the `picture` element](http://www.w3.org/community/respimg/) is quite simple, enabling its use in browsers that don't yet support it requires a few unfortunate tweaks. The following markup pattern is intended to "bulletproof" existing browser support for `picture` without interfering with future native implementations.
  18
+Mark up your responsive images like this. The data-media attribute on each div[data-src] element accepts and and all CSS3 media queries, such as `min` or `max` width, or even `min-device-pixel-ratio` for HD (retina) displays. 
  19
+
  20
+		<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  21
+			<div data-src="small.jpg"></div>
  22
+			<div data-src="medium.jpg" data-media="(min-width: 400px)"></div>
  23
+			<div data-src="large.jpg" data-media="(min-width: 800px)"></div>
  24
+			<div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
  25
+
  26
+			<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
  27
+			<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
  28
+		</div>
26 29
 
27  
-		<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
28  
-			<!-- <source src="small.jpg"> -->
29  
-			<source src="small.jpg">
30  
-			<!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
31  
-			<source src="medium.jpg" media="(min-width: 400px)">
32  
-			<!-- <source src="large.jpg" media="(min-width: 800px)"> -->
33  
-			<source src="large.jpg" media="(min-width: 800px)">
34  
-			
35  
-			<!-- Fallback content for non-JS browsers. Same src as the initial source element. -->
36  
-			<noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
37  
-		</picture>
38 30
 
39 31
 ### Explained...
40 32
 
41 33
 Notes on the markup above...
42 34
 
43  
-* The `picture` element's `alt` attribute is used as alternate text for the generated `img` element.
44  
-* The `picture` element can have any number of `source` elements. The above example may contain more than the average situation would call for.
45  
-* Each `source` element must have a `src` attribute specifying the image path. 
  35
+* The `div[data-picture]` element's `alt` attribute is used as alternate text for the generated `img` element.
  36
+* The `div[data-picture]` element can have any number of `source` elements. The above example may contain more than the average situation would call for.
  37
+* Each `div[data-src]` element must have a `data-src` attribute specifying the image path. 
46 38
 * It's generally a good idea to include one source element with no `media` qualifier, so it'll apply everywhere.
47  
-* Each `source` element can have an optional `media` attribute to make it apply in different media settings. Both media types and queries can be used, like any `media` attribute, but support for media queries depends on the browser (unsupporting browsers fail silently).
  39
+* Each `data-src` element can have an optional `media` attribute to make it apply in different media settings. Both media types and queries can be used, like any `media` attribute, but support for media queries depends on the browser (unsupporting browsers fail silently).
48 40
 * The `matchMedia` polyfill (included in `/external`) is necessary to support the `media` attribute across browsers, even in browsers that support media queries, although it is becoming more widely supported in new browsers.
49  
-* To ensure `picture` `source` elements are recognized in browsers like iOS4.3, Android 2.x, and IE9, `source` elements should be preceded by a comment containing that `source` element's markup. See the support table for information on which browsers rely on these comments (these browsers remove `source` elements from the DOM at load, so the comments provide a fallback).
50 41
 * The `noscript` element wraps the fallback image for non-JavaScript environments, and including this wrapper prevents browsers from fetching the fallback image during page load (causing unnecessary overhead). Generally, it's a good idea to reference a small image here, as it's likely to be loaded in older/underpowered mobile devices.
51 42
 
52 43
 
@@ -54,28 +45,3 @@ Notes on the markup above...
54 45
 
55 46
 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.
56 47
 
57  
-The following table covers some of the major platforms tested so far and their mode of support for the picture element, and picturefill.
58  
-
59  
-<table>
60  
-	<tr><th>Browser</th>								<th>Support Type</th></tr>
61  
-	<tr><td>Android 1.6 Webkit</td>						<td>Full</td></tr>
62  
-	<tr><td>Android 2.1 Webkit</td>						<td>Comment fallbacks used</td></tr>
63  
-	<tr><td>Android 2.2 Webkit</td>						<td>Comment fallbacks used</td></tr>
64  
-	<tr><td>Android 2.3 Webkit</td>						<td>Comment fallbacks used</td></tr>
65  
-	<tr><td>Android 4.x Webkit</td>						<td>Full</td></tr>
66  
-	<tr><td>iOS 4.3 Safari</td>							<td>Comment fallbacks used</td></tr>
67  
-	<tr><td>iOS 5.0 Safari</td>							<td>Full</td></tr>
68  
-	<tr><td>Opera Mobile</td>							<td>Full</td></tr>
69  
-	
70  
-	<tr><td>Chrome Mac (tested v17)</td>				<td>Full</td></tr>
71  
-	<tr><td>Opera Mac Desktop (tested v11)</td>			<td>Full</td></tr>
72  
-	<tr><td>Firefox Mac Desktop (tested v3.0+)</td>		<td>Full</td></tr>
73  
-	<tr><td>IE 6</td>									<td>Full (*no media query support, though)</td></tr>
74  
-	<tr><td>IE 7 </td>									<td>Full (*no media query support, though)</td></tr>
75  
-	<tr><td>IE 8</td>									<td>Full (*no media query support, though)</td></tr>
76  
-	<tr><td>IE 9</td>									<td>Comment fallbacks used</td></tr>
77  
-	<tr><td>IE 10</td>									<td>Full</td></tr>
78  
-</tbody>
79  
-</table>
80  
-
81  
-...More testing wanted! :)
18  index.html
... ...
@@ -1,4 +1,4 @@
1  
-<!DOCTYPE html>
  1
+<!DOCTYPE html> 
2 2
 <html>
3 3
 	<head>
4 4
 		<meta charset=utf-8 />
@@ -17,18 +17,14 @@
17 17
 				
18 18
 		<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
19 19
 		
20  
-		<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
21  
-			<!-- <source src="external/imgs/small.jpg"> -->
22  
-			<source src="external/imgs/small.jpg">
23  
-			<!-- <source src="external/imgs/medium.jpg" media="(min-width: 400px)"> -->
24  
-			<source src="external/imgs/medium.jpg" media="(min-width: 400px)">
25  
-			<!-- <source src="external/imgs/large.jpg" media="(min-width: 800px)"> -->
26  
-			<source src="external/imgs/large.jpg" media="(min-width: 800px)">
27  
-			<!-- <source src="external/imgs/extralarge.jpg" media="(min-width: 1000px)"> -->
28  
-			<source src="external/imgs/extralarge.jpg" media="(min-width: 1000px)">
  20
+		<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  21
+			<div data-src="external/imgs/small.jpg"></div>
  22
+			<div data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></div>
  23
+			<div data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></div>
  24
+			<div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></div>
29 25
 
30 26
 			<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
31 27
 			<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
32  
-		</picture>
  28
+		</div>
33 29
 	</body>
34 30
 </html>
72  picturefill.js
... ...
@@ -1,62 +1,44 @@
1  
-/*! Picturefill - Author: Scott Jehl, 2012 | License: MIT/GPLv2 */
2  
-/*
3  
-	Picturefill: A polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
4  
-	* Notes: 
5  
-		* For active discussion of the picture element, see http://www.w3.org/community/respimg/
6  
-		* While this code does work, it is intended to be used only for example purposes until either:
7  
-			A) A W3C Candidate Recommendation for <picture> is released
8  
-			B) A major browser implements <picture>
9  
-*/ 
  1
+/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
  2
+
10 3
 (function( w ){
11 4
 	
12 5
 	// Enable strict mode
13 6
 	"use strict";
14  
-	
15  
-	// Test if `<picture>` is supported natively, if so, exit - no polyfill needed.
16  
-	if ( !!( w.document.createElement( "picture" ) && w.document.createElement( "source" ) && w.HTMLPictureElement ) ){
17  
-		return;
18  
-	}
19  
-	
  7
+
20 8
 	w.picturefill = function() {
21  
-		var ps = w.document.getElementsByTagName( "picture" );
  9
+		var ps = w.document.getElementsByTagName( "div" );
22 10
 		
23 11
 		// Loop the pictures
24 12
 		for( var i = 0, il = ps.length; i < il; i++ ){
25  
-			var sources = ps[ i ].getElementsByTagName( "source" ),
26  
-				matches = [];
  13
+			if( ps[ i ].getAttribute( "data-picture" ) !== null ){
27 14
 
28  
-			// If no sources are found, they're likely erased from the DOM. Try finding them inside comments.
29  
-			if( !sources.length ){
30  
-				var picText =  ps[ i ].innerHTML,
31  
-					frag = w.document.createElement( "div" ),
32  
-					// For IE9, convert the source elements to divs
33  
-					srcs = picText.replace( /(<)source([^>]+>)/gmi, "$1div$2" ).match( /<div[^>]+>/gmi );
34  
-				
35  
-				frag.innerHTML = srcs.join( "" );
36  
-				sources = frag.getElementsByTagName( "div" );
37  
-			}
  15
+				var sources = ps[ i ].getElementsByTagName( "div" ),
  16
+					matches = [];
38 17
 			
39  
-			// See if which sources match
40  
-			for( var j = 0, jl = sources.length; j < jl; j++ ){
41  
-				var media = sources[ j ].getAttribute( "media" );
42  
-				// if there's no media specified, OR w.matchMedia is supported 
43  
-				if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
44  
-					matches.push( sources[ j ] );
  18
+				// See if which sources match
  19
+				for( var j = 0, jl = sources.length; j < jl; j++ ){
  20
+					var media = sources[ j ].getAttribute( "data-media" );
  21
+					// if there's no media specified, OR w.matchMedia is supported 
  22
+					if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
  23
+						matches.push( sources[ j ] );
  24
+					}
45 25
 				}
46  
-			}
47  
-			
  26
+
48 27
 			// Find any existing img element in the picture element
49 28
 			var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
50  
-			
51  
-			if( matches.length ){
52  
-			
53  
-				if( !picImg ){
54  
-					picImg = w.document.createElement( "img" );
55  
-					picImg.alt = ps[ i ].getAttribute( "alt" );
56  
-					ps[ i ].appendChild( picImg );
57  
-				}
  29
+
  30
+			if( matches.length ){			
  31
+					if( !picImg ){
  32
+						picImg = w.document.createElement( "img" );
  33
+						picImg.alt = ps[ i ].getAttribute( "data-alt" );
  34
+						ps[ i ].appendChild( picImg );
  35
+					}
58 36
 				
59  
-				picImg.src =  matches.pop().getAttribute( "src" );
  37
+					picImg.src =  matches.pop().getAttribute( "data-src" );
  38
+				}
  39
+				else if( picImg ){
  40
+					ps[ i ].removeChild( picImg );
  41
+				}
60 42
 			}
61 43
 			else if( picImg ) {
62 44
 				ps[ i ].removeChild( picImg );

0 notes on commit c839311

Please sign in to comment.
Something went wrong with that request. Please try again.