fix: last visit, device type, resolution & orientation had no value

Julian Yaman · Julian Yaman · commit 8ea9c0a6334f · 2018-01-19T22:40:27.000+01:00
in MS Edge
diff --git a/index.html b/index.html
@@ -13,8 +13,8 @@
   <body>
     <div class="container">
         <h1>Crooked Style Sheets <small>Website tracking/analytics without JS only with CSS</small></h1>
-      
         <hr>
+        
         <h2>Link tests</h2>
 
         <a href="http://google.de" id="link1" target="_blank">Link 1</a>
diff --git a/screen.css b/screen.css
@@ -8,7 +8,7 @@
 }
 
 /** Tracking rules **/
-#type {
+#type::after {
     content: url("track.php?action=screen_start");
 }
 
@@ -62,6 +62,7 @@
 #duration:hover::after {
     -moz-animation: pulsate 5s infinite;
     -webkit-animation: pulsate 5s infinite;
+    animation: pulsate 5s infinite;
     /*animation: pulsate 5s infinite;*/
     animation-name: pulsate;
     animation-duration: 10s;
@@ -129,195 +130,195 @@
 /** Orientation detection **/
 
 @media (orientation: portrait) {
-    #orientation {
+    #orientation::after {
         content: url("track.php?orientation=portrait");
     }
 }
 
 @media (orientation: landscape) {
-    #orientation {
+    #orientation::after {
         content: url("track.php?orientation=landscape");
     }
 }
 
 /* Width part of the Resolution */
 
 @media (min-device-width: 240px) {
-    #width {
+    #width::after {
         content: url("track.php?width=360");
     }
 }
 
 
 @media (min-device-width: 360px) {
-    #width {
+    #width::after {
         content: url("track.php?width=360");
     }
 }
 
 @media (min-device-width: 480px) {
-    #width {
+    #width::after {
         content: url("track.php?width=480");
     }
 }
 
 @media (min-device-width: 640px) {
-    #width {
+    #width::after {
         content: url("track.php?width=640");
     }
 }
 
 @media (min-device-width: 720px) {
-    #width {
+    #width::after {
         content: url("track.php?width=720");
     }
 }
 
 @media (min-device-width: 1024px) {
-    #width {
+    #width::after {
         content: url("track.php?width=1024");
     }
 }
 
 @media (min-device-width: 1280px) {
-    #width {
+    #width::after {
         content: url("track.php?width=1280");
     }
 }
 
 @media (min-device-width: 1366px) {
-    #width {
+    #width::after {
         content: url("track.php?width=1366");
     }
 }
 
 @media (min-device-width: 1920px) {
-    #width {
+    #width::after {
         content: url("track.php?width=1920");
     }
 }
 
 @media (min-device-width: 3840px) {
-    #width {
+    #width::after {
         content: url("track.php?width=3840");
     }
 }
 
 @media (min-device-width: 4096px) {
-    #width {
+    #width::after {
         content: url("track.php?width=4096");
     }
 }
 
 /* Height part of the resolution */
 
 @media (min-device-height: 240px) {
-    #height {
+    #height::after {
         content: url("track.php?height=240");
     }
 }
 
 
 @media (min-device-height: 320px) {
-    #height {
+    #height::after {
         content: url("track.php?height=320");
     }
 }
 
 @media (min-device-height: 360px) {
-    #height {
+    #height::after {
         content: url("track.php?height=360");
     }
 }
 
 @media (min-device-height: 480px) {
-    #height {
+    #height::after {
         content: url("track.php?height=480");
     }
 }
 
 @media (min-device-height: 504px) {
-    #height {
+    #height::after {
         content: url("track.php?height=504");
     }
 }
 
 @media (min-device-height: 540px) {
-    #height {
+    #height::after {
         content: url("track.php?height=540");
     }
 }
 
 @media (min-device-height: 568px) {
-    #height {
+    #height::after {
         content: url("track.php?height=568");
     }
 }
 
 @media (min-device-height: 576px) {
-    #height {
+    #height::after {
         content: url("track.php?height=576");
     }
 }
 
 @media (min-device-height: 600px) {
-    #height {
+    #height::after {
         content: url("track.php?height=600");
     }
 }
 
 @media (min-device-height: 640px) {
-    #height {
+    #height::after {
         content: url("track.php?height=640");
     }
 }
 
 @media (min-device-height: 667px) {
-    #height {
+    #height::after {
         content: url("track.php?height=667");
     }
 }
 
 @media (min-device-height: 690px) {
-    #height {
+    #height::after {
         content: url("track.php?height=690");
     }
 }
 
 @media (min-device-height: 720px) {
-    #height {
+    #height::after {
         content: url("track.php?height=720");
     }
 }
 
 @media (min-device-height: 768px) {
-    #height{
+    #height::after {
         content: url("track.php?height=768");
     }
 }
 
 @media (min-device-height: 1024px) {
-    #height {
+    #height::after {
         content: url("track.php?height=1024");
     }
 }
 
 @media (min-device-height: 1080px) {
-    #height {
+    #height::after {
         content: url("track.php?height=1080");
     }
 }
 
-@media (min-device-height: 2160px) {
-    #height {
-        content: url("track.php?height=2160");
+@media (min-device-height: 1366px) {
+    #height::after {
+        content: url("track.php?height=1366");
     }
 }
 
-
-@media (min-device-height: 1366px) {
-    #height {
-        content: url("track.php?height=1366");
+@media (min-device-height: 2160px) {
+    #height::after {
+        content: url("track.php?height=2160");
     }
 }
 
+

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`/ Tracking rules /`
`11`		`-#type {`
	`11`	`+#type::after {`
`12`	`12`	`content: url("track.php?action=screen_start");`
`13`	`13`	`}`
`14`	`14`
`@@ -62,6 +62,7 @@`
`62`	`62`	`#duration:hover::after {`
`63`	`63`	`-moz-animation: pulsate 5s infinite;`
`64`	`64`	`-webkit-animation: pulsate 5s infinite;`
	`65`	`+ animation: pulsate 5s infinite;`
`65`	`66`	`/animation: pulsate 5s infinite;/`
`66`	`67`	`animation-name: pulsate;`
`67`	`68`	`animation-duration: 10s;`
`@@ -129,195 +130,195 @@`
`129`	`130`	`/ Orientation detection /`
`130`	`131`
`131`	`132`	`@media (orientation: portrait) {`
`132`		`- #orientation {`
	`133`	`+ #orientation::after {`
`133`	`134`	`content: url("track.php?orientation=portrait");`
`134`	`135`	`}`
`135`	`136`	`}`
`136`	`137`
`137`	`138`	`@media (orientation: landscape) {`
`138`		`- #orientation {`
	`139`	`+ #orientation::after {`
`139`	`140`	`content: url("track.php?orientation=landscape");`
`140`	`141`	`}`
`141`	`142`	`}`
`142`	`143`
`143`	`144`	`/* Width part of the Resolution */`
`144`	`145`
`145`	`146`	`@media (min-device-width: 240px) {`
`146`		`- #width {`
	`147`	`+ #width::after {`
`147`	`148`	`content: url("track.php?width=360");`
`148`	`149`	`}`
`149`	`150`	`}`
`150`	`151`
`151`	`152`
`152`	`153`	`@media (min-device-width: 360px) {`
`153`		`- #width {`
	`154`	`+ #width::after {`
`154`	`155`	`content: url("track.php?width=360");`
`155`	`156`	`}`
`156`	`157`	`}`
`157`	`158`
`158`	`159`	`@media (min-device-width: 480px) {`
`159`		`- #width {`
	`160`	`+ #width::after {`
`160`	`161`	`content: url("track.php?width=480");`
`161`	`162`	`}`
`162`	`163`	`}`
`163`	`164`
`164`	`165`	`@media (min-device-width: 640px) {`
`165`		`- #width {`
	`166`	`+ #width::after {`
`166`	`167`	`content: url("track.php?width=640");`
`167`	`168`	`}`
`168`	`169`	`}`
`169`	`170`
`170`	`171`	`@media (min-device-width: 720px) {`
`171`		`- #width {`
	`172`	`+ #width::after {`
`172`	`173`	`content: url("track.php?width=720");`
`173`	`174`	`}`
`174`	`175`	`}`
`175`	`176`
`176`	`177`	`@media (min-device-width: 1024px) {`
`177`		`- #width {`
	`178`	`+ #width::after {`
`178`	`179`	`content: url("track.php?width=1024");`
`179`	`180`	`}`
`180`	`181`	`}`
`181`	`182`
`182`	`183`	`@media (min-device-width: 1280px) {`
`183`		`- #width {`
	`184`	`+ #width::after {`
`184`	`185`	`content: url("track.php?width=1280");`
`185`	`186`	`}`
`186`	`187`	`}`
`187`	`188`
`188`	`189`	`@media (min-device-width: 1366px) {`
`189`		`- #width {`
	`190`	`+ #width::after {`
`190`	`191`	`content: url("track.php?width=1366");`
`191`	`192`	`}`
`192`	`193`	`}`
`193`	`194`
`194`	`195`	`@media (min-device-width: 1920px) {`
`195`		`- #width {`
	`196`	`+ #width::after {`
`196`	`197`	`content: url("track.php?width=1920");`
`197`	`198`	`}`
`198`	`199`	`}`
`199`	`200`
`200`	`201`	`@media (min-device-width: 3840px) {`
`201`		`- #width {`
	`202`	`+ #width::after {`
`202`	`203`	`content: url("track.php?width=3840");`
`203`	`204`	`}`
`204`	`205`	`}`
`205`	`206`
`206`	`207`	`@media (min-device-width: 4096px) {`
`207`		`- #width {`
	`208`	`+ #width::after {`
`208`	`209`	`content: url("track.php?width=4096");`
`209`	`210`	`}`
`210`	`211`	`}`
`211`	`212`
`212`	`213`	`/* Height part of the resolution */`
`213`	`214`
`214`	`215`	`@media (min-device-height: 240px) {`
`215`		`- #height {`
	`216`	`+ #height::after {`
`216`	`217`	`content: url("track.php?height=240");`
`217`	`218`	`}`
`218`	`219`	`}`
`219`	`220`
`220`	`221`
`221`	`222`	`@media (min-device-height: 320px) {`
`222`		`- #height {`
	`223`	`+ #height::after {`
`223`	`224`	`content: url("track.php?height=320");`
`224`	`225`	`}`
`225`	`226`	`}`
`226`	`227`
`227`	`228`	`@media (min-device-height: 360px) {`
`228`		`- #height {`
	`229`	`+ #height::after {`
`229`	`230`	`content: url("track.php?height=360");`
`230`	`231`	`}`
`231`	`232`	`}`
`232`	`233`
`233`	`234`	`@media (min-device-height: 480px) {`
`234`		`- #height {`
	`235`	`+ #height::after {`
`235`	`236`	`content: url("track.php?height=480");`
`236`	`237`	`}`
`237`	`238`	`}`
`238`	`239`
`239`	`240`	`@media (min-device-height: 504px) {`
`240`		`- #height {`
	`241`	`+ #height::after {`
`241`	`242`	`content: url("track.php?height=504");`
`242`	`243`	`}`
`243`	`244`	`}`
`244`	`245`
`245`	`246`	`@media (min-device-height: 540px) {`
`246`		`- #height {`
	`247`	`+ #height::after {`
`247`	`248`	`content: url("track.php?height=540");`
`248`	`249`	`}`
`249`	`250`	`}`
`250`	`251`
`251`	`252`	`@media (min-device-height: 568px) {`
`252`		`- #height {`
	`253`	`+ #height::after {`
`253`	`254`	`content: url("track.php?height=568");`
`254`	`255`	`}`
`255`	`256`	`}`
`256`	`257`
`257`	`258`	`@media (min-device-height: 576px) {`
`258`		`- #height {`
	`259`	`+ #height::after {`
`259`	`260`	`content: url("track.php?height=576");`
`260`	`261`	`}`
`261`	`262`	`}`
`262`	`263`
`263`	`264`	`@media (min-device-height: 600px) {`
`264`		`- #height {`
	`265`	`+ #height::after {`
`265`	`266`	`content: url("track.php?height=600");`
`266`	`267`	`}`
`267`	`268`	`}`
`268`	`269`
`269`	`270`	`@media (min-device-height: 640px) {`
`270`		`- #height {`
	`271`	`+ #height::after {`
`271`	`272`	`content: url("track.php?height=640");`
`272`	`273`	`}`
`273`	`274`	`}`
`274`	`275`
`275`	`276`	`@media (min-device-height: 667px) {`
`276`		`- #height {`
	`277`	`+ #height::after {`
`277`	`278`	`content: url("track.php?height=667");`
`278`	`279`	`}`
`279`	`280`	`}`
`280`	`281`
`281`	`282`	`@media (min-device-height: 690px) {`
`282`		`- #height {`
	`283`	`+ #height::after {`
`283`	`284`	`content: url("track.php?height=690");`
`284`	`285`	`}`
`285`	`286`	`}`
`286`	`287`
`287`	`288`	`@media (min-device-height: 720px) {`
`288`		`- #height {`
	`289`	`+ #height::after {`
`289`	`290`	`content: url("track.php?height=720");`
`290`	`291`	`}`
`291`	`292`	`}`
`292`	`293`
`293`	`294`	`@media (min-device-height: 768px) {`
`294`		`- #height{`
	`295`	`+ #height::after {`
`295`	`296`	`content: url("track.php?height=768");`
`296`	`297`	`}`
`297`	`298`	`}`
`298`	`299`
`299`	`300`	`@media (min-device-height: 1024px) {`
`300`		`- #height {`
	`301`	`+ #height::after {`
`301`	`302`	`content: url("track.php?height=1024");`
`302`	`303`	`}`
`303`	`304`	`}`
`304`	`305`
`305`	`306`	`@media (min-device-height: 1080px) {`
`306`		`- #height {`
	`307`	`+ #height::after {`
`307`	`308`	`content: url("track.php?height=1080");`
`308`	`309`	`}`
`309`	`310`	`}`
`310`	`311`
`311`		`-@media (min-device-height: 2160px) {`
`312`		`- #height {`
`313`		`- content: url("track.php?height=2160");`
	`312`	`+@media (min-device-height: 1366px) {`
	`313`	`+ #height::after {`
	`314`	`+ content: url("track.php?height=1366");`
`314`	`315`	`}`
`315`	`316`	`}`
`316`	`317`
`317`		`-`
`318`		`-@media (min-device-height: 1366px) {`
`319`		`- #height {`
`320`		`- content: url("track.php?height=1366");`
	`318`	`+@media (min-device-height: 2160px) {`
	`319`	`+ #height::after {`
	`320`	`+ content: url("track.php?height=2160");`
`321`	`321`	`}`
`322`	`322`	`}`
`323`	`323`
	`324`	`+`