forked from scottjehl/picturefill
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
63 lines (56 loc) · 4.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill</title>
<script src="external/matchmedia.js"></script>
<script src="picturefill.js"></script>
<style>
body { font-family: sans-serif }
img { max-width: 100% }
</style>
</head>
<body>
<h1>Picturefill: A <picture> element polyfill</h1>
<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
<section>
<h1><code>source</code> elements using both <code>media</code> and <code>srcset</code> attributes</h1>
<p>This markup pattern is further detailed in the <a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/036160.html">original proposal</a> by Florian Rivoal.</p>
<p>This syntax combines the resolution switching of <code>srcset</code> with <code>picture</code>’s ability to tailor sources to the viewport. This has a couple of major benefits over the originally-propsed <code>picture</code> element:</p>
<ul>
<li>Less verbose and more readable syntax, especially considering the vendor prefixing that comes along with <code>min-device-pixel-ratio</code>. Determining viewport-appropriate sources is handled through <code>media</code> attributes as expected, while serving that viewport-appropriate source at the correct <em>resolution</em> is done with <code>srcset</code>.</li>
<li>A native implementation would allow us to apply the original intrinsic dimensions of the <code>1x</code> source to the higher-resolution sources rather than simply delivering an image twice the size. This polyfill simply divides the image’s intrinsic width against the screen resolution (1x, 2x, etc.), though I’m sure this can be handled more intelligently in a native implementation.</li>
<li>By sandboxing the resolution in this new attribute, we allow the browser to intervene without compromising the effectiveness of media queries. The decision to serve higher-resolution images based on available bandwidth is a decision best left in the hands of the browser. <code>srcset</code> allows us to define a set of <em>suggested</em> sources based on resolution, while a user setting or automated bandwidth detection in the browser could still intervene. This approach prevents us from breaking the intended “absolute” terms of media queries.</li>
</ul>
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- <source srcset="external/imgs/small.jpg 1x, external/imgs/small2x.jpg 2x"> -->
<source srcset="external/imgs/small.jpg 1x, external/imgs/small2x.jpg 2x">
<!-- <source media="(min-width: 400px)" srcset="external/imgs/medium.jpg 1x, external/imgs/medium2x.jpg 2x"> -->
<source media="(min-width: 400px)" srcset="external/imgs/medium.jpg 1x, external/imgs/medium2x.jpg 2x">
<!-- <source media="(min-width: 800px)" srcset="external/imgs/large.jpg 1x, external/imgs/large2x.jpg 2x"> -->
<source media="(min-width: 800px)" srcset="external/imgs/large.jpg 1x, external/imgs/large2x.jpg 2x">
<!-- <source media="(min-width: 1000px)" srcset="external/imgs/extralarge.jpg 1x, external/imgs/extralarge2x.jpg 2x"> -->
<source media="(min-width: 1000px)" srcset="external/imgs/extralarge.jpg 1x, external/imgs/extralarge2x.jpg 2x">
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>
</section>
<section>
<h1><code>source</code> elements using <code>media</code> attributes only</h1>
<p>Does not perform any resolution switching.</p>
<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<!-- <source src="external/imgs/small.jpg"> -->
<source src="external/imgs/small.jpg">
<!-- <source src="external/imgs/medium.jpg" media="(min-width: 400px)"> -->
<source src="external/imgs/medium.jpg" media="(min-width: 400px)">
<!-- <source src="external/imgs/large.jpg" media="(min-width: 800px)"> -->
<source src="external/imgs/large.jpg" media="(min-width: 800px)">
<!-- <source src="external/imgs/extralarge.jpg" media="(min-width: 1000px)"> -->
<source src="external/imgs/extralarge.jpg" media="(min-width: 1000px)">
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>
</section>
</body>
</html>