隐私防不胜防—让你一手JavaScript又何妨，仅用 CSS实现网页追踪

大家好，我是最帅气的小编

一日不见，如隔四秋

上一篇推文还是在去年发的

这么久不见我都快不会尬聊了

你们确定不来后台互动一波么

如何实现

基本原理

在 CSS中， 我们可以使用url（“foo.bar”）从外部资源添加图像，这个资源只在需要的时候被加载（例如，当链接被点击时）。

所以，我们可以用 CSS 创建一个选择器，当用户点击某个链接时调用某个特定的 URL。

在服务器端，PHP脚本在调用URL时保存时间戳。

浏览器监测

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

字体监测

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

悬停监测

对于悬停监测（基于 jeyroik 的想法），我们需定义一个关键帧，每次使用这个关键帧都要去请求一个 URL。

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

我们可以通过补充关键帧的设置，来优化分辨率的监测。

输入监测

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

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

Demo