Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
102 lines (73 sloc) 2.96 KB
<!DOCTYPE html>
<html>
<head>
<title>FutureFly - Responsive Image Polyfill</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="420">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
<link rel="stylesheet" href="stylesheets/style.css">
<script type="text/javascript" src="./futurefly.js"></script>
<script>
_bTestResults = {};
var vote;
var voted = false;
saveVote = function(v) {
if (!voted) {
vote = v;
_bTestResults = {
'Image Visible': vote
}
testKey = 'agt1YS1wcm9maWxlcnINCxIEVGVzdBiZsv8KDA';
newScript = document.createElement('script'),
firstScript = document.getElementsByTagName('script')[0];
newScript.src = 'http://www.browserscope.org/user/beacon/' + testKey + '?callback=checkVote';
firstScript.parentNode.insertBefore(newScript, firstScript);
console.log('saved vote');
voted = true;
}
};
checkVote = function() {
r = (vote === 1) ? "no" : "yes";
$("#" + r).fadeOut();
console.log('got response');
};
</script>
</head>
<body style="">
<header>
<h1>FutureFly</h1>
<h4>Responsive Image Polyfill</h4>
</header>
<div class="text">
<h2>The Problem:</h2>
<p>The current HTML spec does not allow for multiple image URLs based on screen size, necessitating the use of complex Javascript hacks to supply smaller images to mobile devices.</p>
<h2>The Solution: </h2>
<p>Here's the HTML you'll use to load responsive images in your document:</p>
<script src="https://gist.github.com/1413487.js?file=picture-tag.html"></script>
</div>
<div>
<picture>
<source src="http://src.sencha.io/jpg70/480/http://bukk.it/i-approve.png" media="max-width: 480px;">
<source src="http://src.sencha.io/760/http://bukk.it/hedgehog.jpg" media="min-width: 480px; max-width: 640px;">
<source src="http://src.sencha.io/760/http://bukk.it/facepalm.jpg" media="min-width: 640px;">
<img class="responsive-img" src="">
<noscript>
<img src="http://bukk.it/facepalm.jpg">
</noscript>
</picture>
</div>
<hr/>
<div class="text">
<h2>Explanation:</h2>
<p>This suggested spec change would create a syntactic placeholder for mobile browsers to find mobile versions of image URLs. Inside each &lsaquo;img&rsaquo; tag would be a &lsaquo;source&rsaquo; tag, containing a "media" and "src" parameter. The "media" parameter would contain the media query string that would trigger the use of the alternate image URL.</p>
<p>Legacy browsers would simply use the default URL provided by the wrapper &lsaquo;img&rsaquo; tag. Mobile browsers could look for &lsaquo;source&rsaquo; tags contained by &lsaquo;img&rsaquo; tags, and validate the media query to determine which URL to use to load the image.</p>
</div>
<hr/>
<p>
<a href="http://twitter.com/_crossdiver">
<pre>@_crossdiver</pre>
</a>
Submit Issues on <a href="https://github.com/Crossdiver/FutureFly/">Github</a>
</p>
</body>
</html>