Skip to content

Commit 0c3f5f1

Browse files
author
Lucas Leal
authored
Delay between user-meta requests
This improve the problem of creating new sessions at every request. The first one is the browser one, then the orientation one, then the viewport one.
1 parent e0c24ba commit 0c3f5f1

File tree

1 file changed

+190
-10
lines changed

1 file changed

+190
-10
lines changed

‎csstrackr.css.php

Lines changed: 190 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,119 +110,299 @@
110110
/** http://browserhacks.com/ **/
111111
@supports (-webkit-appearance:none) and (not (-ms-ime-align:auto)){
112112
body::before {
113-
content: url("index.php?action=browser&value=chrome");
113+
content: "";
114+
-moz-animation: keyframeCHROME 10s;
115+
-webkit-animation: keyframeCHROME 10s;
116+
animation: keyframeCHROME 10s;
117+
animation-name: keyframeCHROME;
118+
animation-duration: 10s;
114119
display: block;
115120
margin: 0px;
116121
width: 0px;
117122
height: 0px;
118123
padding: 0px;
119124
}
125+
@keyframes keyframeCHROME {
126+
0% {background-image: none;}
127+
10% {background-image: url("index.php?action=browser&value=chrome")}
128+
20% {background-image: none}
129+
30% {background-image: none}
130+
40% {background-image: none}
131+
50% {background-image: none}
132+
60% {background-image: none}
133+
70% {background-image: none}
134+
80% {background-image: none}
135+
90% {background-image: none}
136+
100% {background-image: none}
137+
}
120138
}
121139

122140
@media screen and (min--moz-device-pixel-ratio:0) {
123141
body::before {
124-
content: url("index.php?action=browser&value=firefox");
142+
content: "";
143+
-moz-animation: keyframeFIREFOX 10s;
144+
-webkit-animation: keyframeFIREFOX 10s;
145+
animation: keyframeFIREFOX 10s;
146+
animation-name: keyframeFIREFOX;
147+
animation-duration: 10s;
125148
display: block;
126149
margin: 0px;
127150
width: 0px;
128151
height: 0px;
129152
padding: 0px;
130153
}
154+
@keyframes keyframeFIREFOX {
155+
0% {background-image: none;}
156+
10% {background-image: url("index.php?action=browser&value=firefox")}
157+
20% {background-image: none}
158+
30% {background-image: none}
159+
40% {background-image: none}
160+
50% {background-image: none}
161+
60% {background-image: none}
162+
70% {background-image: none}
163+
80% {background-image: none}
164+
90% {background-image: none}
165+
100% {background-image: none}
166+
}
131167
}
132168

133169
@supports (-ms-ime-align:auto) {
134170
body::before {
135-
content: url("index.php?action=browser&value=edge");
171+
content: "";
172+
-moz-animation: keyframeEDGE 10s;
173+
-webkit-animation: keyframeEDGE 10s;
174+
animation: keyframeEDGE 10s;
175+
animation-name: keyframeEDGE;
176+
animation-duration: 10s;
136177
display: block;
137178
margin: 0px;
138179
width: 0px;
139180
height: 0px;
140181
padding: 0px;
141182
}
183+
@keyframes keyframeEDGE {
184+
0% {background-image: none;}
185+
10% {background-image: url("index.php?action=browser&value=edge")}
186+
20% {background-image: none}
187+
30% {background-image: none}
188+
40% {background-image: none}
189+
50% {background-image: none}
190+
60% {background-image: none}
191+
70% {background-image: none}
192+
80% {background-image: none}
193+
90% {background-image: none}
194+
100% {background-image: none}
195+
}
142196
}
143197

144198
/** Orientation **/
145199

146200
@media (orientation: portrait) {
147201
html::after {
148-
content: url("index.php?action=orientation&value=portrait");
202+
content: "";
203+
-moz-animation: keyframePORTRAIT 10s;
204+
-webkit-animation: keyframePORTRAIT 10s;
205+
animation: keyframePORTRAIT 10s;
206+
animation-name: keyframePORTRAIT;
207+
animation-duration: 10s;
149208
display: block;
150209
margin: 0px;
151210
width: 0px;
152211
height: 0px;
153212
padding: 0px;
154213
}
214+
@keyframes keyframePORTRAIT {
215+
0% {background-image: none;}
216+
10% {background-image: none}
217+
20% {background-image: none}
218+
30% {background-image: none}
219+
40% {background-image: none}
220+
50% {background-image: url("index.php?action=orientation&value=portrait")}
221+
60% {background-image: none}
222+
70% {background-image: none}
223+
80% {background-image: none}
224+
90% {background-image: none}
225+
100% {background-image: none}
226+
}
155227
}
156228

157229
@media (orientation: landscape) {
158230
html::after {
159-
content: url("index.php?action=orientation&value=landscape");
231+
content: "";
232+
-moz-animation: keyframeLANDSCAPE 10s;
233+
-webkit-animation: keyframeLANDSCAPE 10s;
234+
animation: keyframeLANDSCAPE 10s;
235+
animation-name: keyframeLANDSCAPE;
236+
animation-duration: 10s;
160237
display: block;
161238
margin: 0px;
162239
width: 0px;
163240
height: 0px;
164241
padding: 0px;
165242
}
243+
@keyframes keyframeLANDSCAPE {
244+
0% {background-image: none;}
245+
10% {background-image: none}
246+
20% {background-image: none}
247+
30% {background-image: none}
248+
40% {background-image: none}
249+
50% {background-image: url("index.php?action=orientation&value=landscape")}
250+
60% {background-image: none}
251+
70% {background-image: none}
252+
80% {background-image: none}
253+
90% {background-image: none}
254+
100% {background-image: none}
255+
}
166256
}
167257

168258
/** Screen size based on boostrap 3 **/
169259

170260
/* xs */
171261
@media (max-width: 767px) {
172262
body::after {
173-
content: url("index.php?action=viewport&value=xs");
263+
content: "";
264+
-moz-animation: keyframeWIDTH 10s;
265+
-webkit-animation: keyframeWIDTH 10s;
266+
animation: keyframeWIDTH 10s;
267+
animation-name: keyframeWIDTH;
268+
animation-duration: 10s;
174269
display: block;
175270
margin: 0px;
176271
width: 0px;
177272
height: 0px;
178273
padding: 0px;
179274
}
275+
@keyframes keyframeWIDTH {
276+
0% {background-image: none;}
277+
10% {background-image: none}
278+
20% {background-image: none}
279+
30% {background-image: none}
280+
40% {background-image: none}
281+
50% {background-image: none}
282+
60% {background-image: none}
283+
70% {background-image: none}
284+
80% {background-image: none}
285+
90% {background-image: none}
286+
100% {background-image: url("index.php?action=viewport&value=xs")}
287+
}
180288
}
181289

182290
/* sm */
183291
@media (min-width: 768px) and (max-width: 991px) {
184292
body::after {
185-
content: url("index.php?action=viewport&value=sm");
293+
content: "";
294+
-moz-animation: keyframeWIDTH 10s;
295+
-webkit-animation: keyframeWIDTH 10s;
296+
animation: keyframeWIDTH 10s;
297+
animation-name: keyframeWIDTH;
298+
animation-duration: 10s;
186299
display: block;
187300
margin: 0px;
188301
width: 0px;
189302
height: 0px;
190303
padding: 0px;
191304
}
305+
@keyframes keyframeWIDTH {
306+
0% {background-image: none;}
307+
10% {background-image: none}
308+
20% {background-image: none}
309+
30% {background-image: none}
310+
40% {background-image: none}
311+
50% {background-image: none}
312+
60% {background-image: none}
313+
70% {background-image: none}
314+
80% {background-image: none}
315+
90% {background-image: none}
316+
100% {background-image: url("index.php?action=viewport&value=sm")}
317+
}
192318
}
193319

194320
/* md */
195321
@media (min-width: 992px) and (max-width: 1199px) {
196322
body::after {
197-
content: url("index.php?action=viewport&value=md");
323+
content: "";
324+
-moz-animation: keyframeWIDTH 10s;
325+
-webkit-animation: keyframeWIDTH 10s;
326+
animation: keyframeWIDTH 10s;
327+
animation-name: keyframeWIDTH;
328+
animation-duration: 10s;
198329
display: block;
199330
margin: 0px;
200331
width: 0px;
201332
height: 0px;
202333
padding: 0px;
203334
}
335+
@keyframes keyframeWIDTH {
336+
0% {background-image: none;}
337+
10% {background-image: none}
338+
20% {background-image: none}
339+
30% {background-image: none}
340+
40% {background-image: none}
341+
50% {background-image: none}
342+
60% {background-image: none}
343+
70% {background-image: none}
344+
80% {background-image: none}
345+
90% {background-image: none}
346+
100% {background-image: url("index.php?action=viewport&value=md")}
347+
}
204348
}
205349

206350
/* lg */
207351
@media (min-width: 1200px) and (max-width: 1920px){
208352
body::after {
209-
content: url("index.php?action=viewport&value=lg");
353+
content: "";
354+
-moz-animation: keyframeWIDTH 10s;
355+
-webkit-animation: keyframeWIDTH 10s;
356+
animation: keyframeWIDTH 10s;
357+
animation-name: keyframeWIDTH;
358+
animation-duration: 10s;
210359
display: block;
211360
margin: 0px;
212361
width: 0px;
213362
height: 0px;
214363
padding: 0px;
215364
}
365+
@keyframes keyframeWIDTH {
366+
0% {background-image: none;}
367+
10% {background-image: none}
368+
20% {background-image: none}
369+
30% {background-image: none}
370+
40% {background-image: none}
371+
50% {background-image: none}
372+
60% {background-image: none}
373+
70% {background-image: none}
374+
80% {background-image: none}
375+
90% {background-image: none}
376+
100% {background-image: url("index.php?action=viewport&value=lg")}
377+
}
216378
}
217379

218380
/* xlg */
219381
@media (min-width: 1921px) {
220382
body::after {
221-
content: url("index.php?action=viewport&value=xlg");
383+
content: "";
384+
-moz-animation: keyframeWIDTH 10s;
385+
-webkit-animation: keyframeWIDTH 10s;
386+
animation: keyframeWIDTH 10s;
387+
animation-name: keyframeWIDTH;
388+
animation-duration: 10s;
222389
display: block;
223390
margin: 0px;
224391
width: 0px;
225392
height: 0px;
226393
padding: 0px;
227394
}
395+
@keyframes keyframeWIDTH {
396+
0% {background-image: none;}
397+
10% {background-image: none}
398+
20% {background-image: none}
399+
30% {background-image: none}
400+
40% {background-image: none}
401+
50% {background-image: none}
402+
60% {background-image: none}
403+
70% {background-image: none}
404+
80% {background-image: none}
405+
90% {background-image: none}
406+
100% {background-image: url("index.php?action=viewport&value=xlg")}
407+
}
228408
}

0 commit comments

Comments
 (0)