Skip to content

Instantly share code, notes, and snippets.

@igrigorik

igrigorik/responsive.css

Created May 26, 2012 01:11
Show Gist options
  • Save igrigorik/2791589 to your computer and use it in GitHub Desktop.
Save igrigorik/2791589 to your computer and use it in GitHub Desktop.
Download ZIP
testing media queries + browser fetch behavior
Raw
responsive.css
body {
color: red;
}
#image {
width:200px;
height:100px;
background: gray;
background-image:url('http://localhost:9000/file0.css?delay=3');
}
@media only screen and (max-width: 680px) and (min-width: 0px) {
#image {
background: hotpink;
background-image: url('http://origin.igvita.com/images/ilya.jpg');
}
}
Raw
responsive.html
<!doctype html>
<html>
<head>
<script type="text/javascript">
function onOload() {
console.log('window onload');
}
function callback(msg) {
console.log(msg);
}
if (window.addEventListener)
window.addEventListener("load", onOload, false);
else if (window.attachEvent)
window.attachEvent("onload", onOload);
else window.onload = onOload;
</script>
<link type="text/css" rel="stylesheet" href="responsive.css" />
<script src="http://localhost:9000/file3.js?delay=2" async onload="callback(3)"></script>
<script src="http://localhost:9000/file4.js?delay=1" async onload="callback(4)"></script>
</head>
<body>
Hello World!<hr />
<!-- consistent behavior across all browsers: images are fetched only when needed -->
<div id="image">&nbsp;</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment