Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
263 lines (211 sloc) 10.8 KB
<!DOCTYPE html>
<html>
<head>
<title>Responsive Img Tags</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">
<style>
/* GIST Code Syntax Highlighting */
.gist {
color: #000;
}
.gist div {
padding: 0;
margin: 0;
}
.gist .gist-file {
border: 1px solid #dedede; /* gray */
font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
margin-bottom: 1em;
}
.gist .gist-file .gist-meta {
overflow: hidden;
font-size: 85%;
padding: .5em;
color: #666;
background-color: #eaeaea;
}
.gist .gist-file .gist-meta a {
color: #369;
}
.gist .gist-file .gist-meta a:visited {
color: #737;
}
.gist .gist-file .gist-data {
overflow: auto;
word-wrap: normal;
background-color: #f8f8ff;
border-bottom: 1px solid #ddd;
font-size: 100%;
}
.gist .gist-file .gist-data pre {
font-family: 'Bitstream Vera Sans Mono', 'Courier', monospace;
background: transparent !important;
margin: 0 !important;
border: none !important;
padding: .25em .5em .5em .5em !important;
}
.gist .gist-file .gist-data .gist-highlight {
background: transparent !important;
}
.gist .gist-file .gist-data .gist-line-numbers {
background-color: #ececec;
color: #aaa;
border-right: 1px solid #ddd;
text-align: right;
}
.gist .gist-file .gist-data .gist-line-numbers span {
clear: right;
display: block;
}
.gist-syntax { background: #ffffff; }
.gist-syntax .c { color: #999988; font-style: italic } /* Comment */
.gist-syntax .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.gist-syntax .k { color: #000000; font-weight: bold } /* Keyword */
.gist-syntax .o { color: #000000; font-weight: bold } /* Operator */
.gist-syntax .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.gist-syntax .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.gist-syntax .c1 { color: #999988; font-style: italic } /* Comment.Single */
.gist-syntax .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.gist-syntax .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.gist-syntax .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.gist-syntax .ge { color: #000000; font-style: italic } /* Generic.Emph */
.gist-syntax .gr { color: #aa0000 } /* Generic.Error */
.gist-syntax .gh { color: #999999 } /* Generic.Heading */
.gist-syntax .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.gist-syntax .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.gist-syntax .go { color: #888888 } /* Generic.Output */
.gist-syntax .gp { color: #555555 } /* Generic.Prompt */
.gist-syntax .gs { font-weight: bold } /* Generic.Strong */
.gist-syntax .gu { color: #aaaaaa } /* Generic.Subheading */
.gist-syntax .gt { color: #aa0000 } /* Generic.Traceback */
.gist-syntax .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.gist-syntax .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.gist-syntax .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.gist-syntax .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.gist-syntax .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.gist-syntax .m { color: #009999 } /* Literal.Number */
.gist-syntax .s { color: #d14 } /* Literal.String */
.gist-syntax .na { color: #008080 } /* Name.Attribute */
.gist-syntax .nb { color: #0086B3 } /* Name.Builtin */
.gist-syntax .nc { color: #445588; font-weight: bold } /* Name.Class */
.gist-syntax .no { color: #008080 } /* Name.Constant */
.gist-syntax .ni { color: #800080 } /* Name.Entity */
.gist-syntax .ne { color: #990000; font-weight: bold } /* Name.Exception */
.gist-syntax .nf { color: #990000; font-weight: bold } /* Name.Function */
.gist-syntax .nn { color: #555555 } /* Name.Namespace */
.gist-syntax .nt { color: #000080 } /* Name.Tag */
.gist-syntax .nv { color: #008080 } /* Name.Variable */
.gist-syntax .ow { color: #000000; font-weight: bold } /* Operator.Word */
.gist-syntax .w { color: #bbbbbb } /* Text.Whitespace */
.gist-syntax .mf { color: #009999 } /* Literal.Number.Float */
.gist-syntax .mh { color: #009999 } /* Literal.Number.Hex */
.gist-syntax .mi { color: #009999 } /* Literal.Number.Integer */
.gist-syntax .mo { color: #009999 } /* Literal.Number.Oct */
.gist-syntax .sb { color: #d14 } /* Literal.String.Backtick */
.gist-syntax .sc { color: #d14 } /* Literal.String.Char */
.gist-syntax .sd { color: #d14 } /* Literal.String.Doc */
.gist-syntax .s2 { color: #d14 } /* Literal.String.Double */
.gist-syntax .se { color: #d14 } /* Literal.String.Escape */
.gist-syntax .sh { color: #d14 } /* Literal.String.Heredoc */
.gist-syntax .si { color: #d14 } /* Literal.String.Interpol */
.gist-syntax .sx { color: #d14 } /* Literal.String.Other */
.gist-syntax .sr { color: #009926 } /* Literal.String.Regex */
.gist-syntax .s1 { color: #d14 } /* Literal.String.Single */
.gist-syntax .ss { color: #990073 } /* Literal.String.Symbol */
.gist-syntax .bp { color: #999999 } /* Name.Builtin.Pseudo */
.gist-syntax .vc { color: #008080 } /* Name.Variable.Class */
.gist-syntax .vg { color: #008080 } /* Name.Variable.Global */
.gist-syntax .vi { color: #008080 } /* Name.Variable.Instance */
.gist-syntax .il { color: #009999 } /* Literal.Number.Integer.Long */
</style>
<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="">
<h1>Responsive &lsaquo;img&rsaquo; tags</h1>
<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>
<div id="gist-1400780" class="gist">
<div class="gist-file">
<div class="gist-data gist-syntax">
<div class="gist-highlight"><pre><div class="line" id="LC1"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"large-default-file.jpg"</span><span class="nt">&gt;</span></div><div class="line" id="LC2">&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">&lt;source</span> <span class="na">src=</span><span class="s">"smaller.jpg"</span> <span class="na">media=</span><span class="s">"max-width:600px"</span><span class="nt">&gt;</span></div><div class="line" id="LC3">&nbsp;&nbsp;&nbsp;&nbsp;<span class="nt">&lt;source</span> <span class="na">src=</span><span class="s">"tiny.jpg"</span> <span class="na">media=</span><span class="s">"max-width:320px"</span><span class="nt">&gt;</span></div><div class="line" id="LC4"><span class="nt">&lt;/img&gt;</span></div></pre></div>
</div>
<div class="gist-meta">
<a href="https://gist.github.com/raw/1400780/bc1529e226dc159a4f1ffba1a32ff5663d429216/imgtag.html" style="float:right;">view raw</a>
<a href="https://gist.github.com/1400780#file_imgtag.html" style="float:right;margin-right:10px;color:#666">imgtag.html</a>
<a href="https://gist.github.com/1400780">This Gist</a> brought to you by <a href="http://github.com">GitHub</a>.
</div>
</div>
</div>
</div>
<div>
<img alt="The Future. 0 to 80 in 1.21 Jiggawatts." src="images/stars.jpg" class="responsive-img" id="testImg">
<source src="images/stars-tiny.jpg" media="max-width:640px;">
</img>
<p class="canyousee">Can you see the image? </p>
<a class="nodecor" href="javascript:saveVote(1)">
<div id="yes" class="button green super" >Yes</div>
</a>
<a class="nodecor" href="javascript:saveVote(0)">
<div id="no" class="button red super">No</div>
</a>
</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>
<hr/>
<a class="nodecor" href="./results.html">
<div class="button blue wide" >See Results >></div>
</a>
</div>
<hr/>
<p>
<a href="http://twitter.com/_crossdiver">
<pre>@_crossdiver</pre>
</a>
Fork on <a href="https://github.com/Crossdiver/The-Future-Img-Tag/">Github</a>
</p>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27354968-1']);
_gaq.push(['_setDomainName', 'ikelewis.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>