使用 CSS 追踪用户

通过css追踪，就可以在用户禁止Js后，依然能够拿到自己想要得到的用户的操作信息，（不知道会不会有调皮的前端工程师，偷偷来拿用户信息，隐私？）

总结德国学生Jan Böhmer的github上的文章和sf社区的文章，同时针对他的问题：无法第二次迭代显示，提出了新的想法 empty the buffer。

一、点击检测（用 CSS 你可以使用 url(“xx.xx”) 属性引用外部资源添加图像，同样也可以使用该属性，在用户使用时调用，如：按钮）

html:
<a id = "opooc" href:"http://www.opooc.com" target:"view_window">去找opooc</a>

css:
#opooc：active::after{
content:url("opooc.php")
}

php(opooc.php):
<?php
session_start();
$_SESSION["opooc"] = date(DATE_RFC822);
session_unset();
>
php(result.php)
<b><?php print $_SESSION["opooc"] ?></b>

二、悬停监测（鼠标停留在某一控件的时间可以拿到,我们可以通过补充关键帧的设置，来优化分辨率的监测）

@keyframes pulsate {
0% {
background-image: url('track.php?duration=00');
}
20% {
background-image: url('track.php?duration=20');
}
40% {
background-image: url('track.php?duration=40');
}
60% {
background-image: url('track.php?duration=60');
}
80% {
background-image: url('track.php?duration=80');
}
100% {
background-image: url('track.php?duration=100');
}
}

然后，我们使用定义的关键帧创建动画，我们可以定义动画持续的时间，这也是我们测量的最大时间

#duration:hover::after {
-moz-animation: pulsate 5s infinite;
-webkit-animation: pulsate 5s infinite;
/*animation: pulsate 5s infinite;*/
animation-name: pulsate;
animation-duration: 10s;
content: url('track.php?duration=-1');
}

三、输入监测

监测用户选中了某个复选框，我们可以使用 CSS 提供的 :selected 选择器

#checkbox:checked {
content: url('track.php?action=checkbox');
}

为了监测字符串，我们结合了 HTML pattern 属性，它可以帮助我们解决一些基本的输入验证，再结合 :valid 选择器，浏览器当输入匹配成功时会去请求我们的追踪站点

<input type="text" id="text_input" pattern="^test$" required>
#text_input:valid {
background: green;
background-image: url('track.php?action=text_input');
}

四、浏览器监测(是基于 @supports Media-Query 的，我们可以监测浏览器的一些特殊的属性，例如 -webkit-appearance)

@supports (-webkit-appearance: none) {
#chrome_detect::after {
content: url('track.php?action=browser_chrome');
}
}

五、 字体监测（需要定义一个新的字体，如果一个字体存在，文本会尝试使用该字体进行样式设置，然而，当用户在系统上找不到该字体时，定义的字体会作为备用，在这种情况下，浏览器会尝试去加载定义的字体并在服务器上调用追踪脚本）

@font-face {
font-family: Font1;
src: url('track.php?action=font1');
}
#font_detection1 {
font-family: Calibri, Font1;
}