-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
executable file
·86 lines (73 loc) · 4.87 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="x-picture: A <picture> polyfill">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="js/vendor/highlightjs/styles/github.css">
<script src="js/vendor/highlightjs/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="js/vendor/polymer/polymer.min.js"></script>
<link rel="import" href="x-picture.html">
</head>
<body>
<h1>x-picture</h1>
<h2>Implements the <code><picture></code> element interface using <a href="http://www.polymer-project.org/">Polymer</a>, a Web Components polyfill.</h2>
<p>There is much left to do and document, so please feel free to contribute.</p>
<h2>Using x-picture</h2>
<p>To use x-picture, simply include the Polymer library and a <code><link></code> to x-picture.html.</p>
<pre><code>
<script src="path/to/polymer/polymer.min.js"></script>
<link rel="import" href="path/to/x-picture.html" />
</code></pre>
<p>From there, you can use <code><x-picture></code> the same way you would <code><picture></code>. List your sources using either <code>srcset</code> or <code>src</code> attributes, and include the media query that matches the intended source in the <code>media</code> attribute.</p>
<pre><code>
<x-picture alt="Description of content for accessability">
<source srcset="http://www.fillmurray.com/300/600 1x,
http://www.fillmurray.com/600/1200 2x" />
<source srcset="http://www.fillmurray.com/400/600 1x,
http://www.fillmurray.com/800/1200 2x"
media="(min-width:400px)" />
<source srcset="http://www.fillmurray.com/500/600 1x,
http://www.fillmurray.com/1000/1200 2x"
media="(min-width:500px)" />
<source srcset="http://www.fillmurray.com/600/600 1x,
http://www.fillmurray.com/1200/1200 2x"
media="(min-width:600px)" />
<source srcset="http://www.fillmurray.com/700/600 1x,
http://www.fillmurray.com/1400/1200 2x"
media="(min-width:700px)" />
<img src="http://www.placecage.com/c/800/800" alt="Nic Cage" lazyload>
<p>Paradoxally, I am invisible AND accessible.</p>
</x-picture>
</code></pre>
<p><code><source></code>'s are source order dependent with the last match winning. This is done to follow the cascading nature of CSS and to encourage a mobile (content) first approach.</p>
<aside class="caution">
<p>Fallback images inside the x-picture tag will currently always download even if it is not displayed. In a native implementation of <picture>, the "lazyload" attribute is to defer the start of download until the UA can detect that the <img> is a child of <picture>. At present there is not a good way to delay the start of download for a properly formatted <img> element as fallback.</p>
</aside>
<figure>
<x-picture alt="Fill Murray: The internet was missing the ability to provide custom-sized placeholder images of Bill Murray. Now it can.">
<source srcset="http://www.fillmurray.com/300/600 1x,
http://www.fillmurray.com/600/1200 2x" />
<source srcset="http://www.fillmurray.com/400/600 1x,
http://www.fillmurray.com/800/1200 2x" media="(min-width:400px)" />
<source srcset="http://www.fillmurray.com/500/600 1x,
http://www.fillmurray.com/1000/1200 2x" media="(min-width:500px)" />
<source srcset="http://www.fillmurray.com/600/600 1x,
http://www.fillmurray.com/1200/1200 2x" media="(min-width:600px)" />
<source srcset="http://www.fillmurray.com/700/600 1x,
http://www.fillmurray.com/1400/1200 2x" media="(min-width:700px)" />
<img src="http://www.placecage.com/c/800/800" alt="Nic Cage" lazyload />
<p>Content to show if polymer fails.</p>
</x-picture>
<figcaption>
<p>x-picture in action. Go ahead, scale your browser.</p>
<p>Even better, open your network tab and watch as you scale. It's fun!</p>
</figcaption>
</figure>
</body>
</html>