forked from scottjehl/CSS-Download-Tests
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (153 loc) · 7.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
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stylesheet Download Tests</title>
<!-- test page includes -->
<link rel="stylesheet" href="inc/bootstrap.css">
<style>
body { margin: 50px auto; max-width: 70em }
h1 {margin: .6em;}
p { font-size: 1.3em; font-weight: normal; line-height: 1.4; margin: 1em; }
table { width: 100% !important; margin: 1.3em; }
</style>
<!-- stylesheet download tests:
Note: these will 404 and that's okay.
The point is to monitor HTTP traffic and see which ones are requested.
-->
<!-- common media-query-support-only flag (only all) -->
<link href="inc/only-all.css" rel="stylesheet" media="only all">
<!-- very wide viewport width -->
<link href="inc/min-width-4000px.css" rel="stylesheet" media="(min-width: 4000px)">
<!-- former, with only keyword -->
<link href="inc/only-all-and-min-width-4000px.css" rel="stylesheet" media="only all and (min-width: 4000px)">
<!-- very wide device width -->
<link href="inc/min-device-width-4000px.css" rel="stylesheet" media="(min-device-width: 4000px)">
<!-- former, with only keyword -->
<link href="inc/only-all-and-min-device-width-4000px.css" rel="stylesheet" media="only all and (min-device-width: 4000px)">
<!-- very high screen dpi -->
<link href="inc/min-device-pixel-ratio-6.css" rel="stylesheet" media="(min-device-pixel-ratio: 6)">
<!-- former, with only keyword -->
<link href="inc/only-all-and-min-device-pixel-ratio-6.css" rel="stylesheet" media="only all and (min-device-pixel-ratio: 6)">
<!-- tv query -->
<link href="inc/tv.css" rel="stylesheet" media="tv">
<!-- handheld query -->
<link href="inc/handheld.css" rel="stylesheet" media="handheld">
<!-- nonsense query -->
<link href="inc/nonsense.css" rel="stylesheet" media="nonsense">
</head>
<body>
<h1>CSS Downloads by Media Query</h1>
<p class="alert-message success">A test by <a href="http://github.com/scottjehl">@scottjehl</a></p>
<p>The point of this page is to test whether today's browsers will download stylesheets that are referenced with media queries that would not apply on that browser or device. </p>
<p>This page contains 10 <code>link</code> elements that reference CSS files meant for testing. Each <code>link</code> has a <code>media</code> attribute containing a unique media query. All but a few of these media queries (and their respective stylesheets) would not likely apply on any devices today; for example, some media queries reference extremely wide screens, some reference impossibly (currently) rich high-density HD displays, and one is just plain nonsense (really: <code>media="nonsense"</code>). In addition to those, there are a few realistic queries as well, such as <code>only all</code>, <code>tv</code>, and <code>handheld</code></p>
<p>The results of manually testing this page by loading it in several browsers and monitoring HTTP traffic are as follows. The top row is the only one that should apply in every media-query supporting browser. </p>
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th>Media Query</th>
<th>iPhone 4.3</th>
<th>Android Tablet</th>
<th>Chrome 19</th>
<th>IE 8</th>
<th>IE 9</th>
<th>Opera 11</th>
<th>Opera Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th>only all</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>(min-width: 4000px)</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>only all and (min-width: 4000px)</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>(min-device-width: 4000px)</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>(min-device-pixel-ratio: 6)</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>only all and (min-device-pixel-ratio: 6)</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>tv</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>handheld</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
<tr>
<th>nonsense</th>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label warning'>Downloaded</span></td>
<td><span class='label success'>No Request</span></td>
<td><span class='label warning'>Downloaded</span></td>
</tr>
</tbody>
</table>
</body>
</html>