-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
27 lines (25 loc) · 1.4 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
<!doctype html>
<head>
<meta charset="utf-8">
<title>Clown Car Technique with Single HTTP request!</title>
<style>
p, h1 {text-align: center;}
img {display: block; width: 50%; margin: auto;}
</style>
<style>head,style:last-of-type {display: block; text-align: center; background-color: #dedede; border-radius: 15px; padding: 20px; font-family: comic sans; font-size: 20px;}
head * {display: none;}
</style>
<style contenteditable>
object {width: 50%;}
</style>
</head>
<body>
<h1>Clown Car Technique (1 http request!)</h1>
<p>The following has a data URI.</p>
<object data="data:image/svg+xml,%3Csvg%20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EClown%20Car%20Technique%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and%20(max-width:300px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/images/small.png);%7D%7D@media%20screen%20and%20(min-width:301px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/images/medium.png);%7D%7D@media%20screen%20and%20(min-width:601px)%7Bsvg%7Bbackground-image:url(https://raw.github.com/estelle/clowncar/master/images/big.png);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml">
<!--[if lte IE 8]>
<img src="images/medium.png" alt="Fall back for IE">
<![endif]-->
</object>
</body>
</html>