css一样追踪你，清空缓存也没有用

Posted 2021-04-09 web前端教室

一直以来，网站要追踪用户的操作和信息，都需要用到Js，但今天偶然看到有人用css来做网站用户的交互监测，而且完全可以实现针对不同用户的不同操作。

先说结论，其实实现的思路很简单，我们都知道css中有一些属性可以响应用户的交互，例如，link、hover之类的，当鼠标hover到某个dom上的时候，可以设置background的url是某个php之类的链接。然后你hover一次，就触发一次background的url中的php链接，这样就实现了使用css进行用户追踪与监测。就类似于这样，

<style type="text/css">

.xxxclass{

width:11px;height:11px;

/*...更多*/

}

.xxxclass:hover{

background:url('xxx.php?xx=a&ee=b');

/*之类的链接*/

}

</style>

这其实是用css来写逻辑了，等于是把css当做js来用。这种作法必须是有它特定的应用场景才行，如果只是为了使用css监测用户而这样写css，有点没有必要。

因为除非你单独写监测用户的css，否则你把样式和测试用户的css写在一起，且不说这违背了mvc的原则，单是以后的维护就是一个大问题。当然了，如果有兴趣，可以封装一个css的用户监测组件。

<!-- 下面一些示例 -->

<!-- 监测用户的字体情况， -->

例如你的网站使用了某个xx字体，但用户的电脑上没有，那就可以使用@font-face，它有一个src属性，可以把src设置为某个字体的链接。当用户下载一次，就计数一次。

<style type="text/css">

@font-face{

font-family: :xxxfont;

src:url('xxfont.php?fontxx=xx1');

}

#div_id{

font-family: xxxfont;

}

</style>

<!-- 监测鼠标悬停时间 -->

这个思路很好，就是定义一个css3的动画，然后10s一个url、20s一个url、n秒一个url，看下面的代码，

<style type="text/css">

@keyframes xxmouse{

0%{

background: url('aaa.php?xx=0');

}

30%{

background: url('aaa.php?xx=30');

}

50%{

background: url('aaa.php?xx=40');

}

90%{

background: url('aaa.php?xx=90');

}

}

</style>

这样，你可以根据用户在某个dom上停留的时间来做一些事情。

<!-- 监测特定关键词 -->

我们知道，html5的pattern属性，可以用来验证输入字段的模式，也就是说，你可以使用正则。然后再加上css3的 :valid选择器，可以根据条件来指定样式的变化。就像这样式的，

<input type="text" id="xxxid" pattern="^test$" />

<style type="text/css">

#xxxid{

background: url('xxx.php?xxx=testxxx');

}

</style>

<!--  -->

我看网上还有一些例子，但也都大同小异，基本上都是通过各种CSS样式中的src属性，来向后台发请求。说到根儿上，还是“事件驱动”。

但这样做有啥意义么？我个人主观感觉没啥必要性，因为css和js，都一样会对网页造成阻塞。只不过是阻塞的阶段有些区别而已。

浏览器在下载JS的时候，会阻止图片、css之类的文件下载；而CSS会阻塞dom树的渲染，因为你必须有css之后，对dom的渲染才有意义。

喔，明白了，也许这种操作出现的原因，就在于css和js阻塞浏览器的不同阶段。但我依然觉得这种操作的应用场景会非常的小。