除了用JS来跟踪用户，现在有人提出CSS也可以用于网页跟踪分析。译者认为这种方法更优雅，更简洁，而且不容易屏蔽，值得一试，想要了解更多，可以查看仓库地址（https://github.com/jbtronics/CrookedStyleSheets）和demo(http://crookedss.bplaced.net/)我们可以用它来做什么我们可以收集一些关于用户的基本信息，比如屏幕分辨率（当浏览器优化时）和用户使用的浏览器（引擎）此外，我们可以监控用户是否点击了某个链接或将鼠标悬停在某个元素上，用于跟踪用户将鼠标悬停在哪些链接上，甚至可以跟踪用户如何移动鼠标（使用页面上的不可见字段），但是，用我现在的方法我只能跟踪用户的第一次点击或者悬停，我相信，修改我的方法最终可以跟踪用户的每一次点击***，我们还可以监控用户是否安装了特定的字体，基于此信息，我们可以跟踪用户使用的操作系统，因为使用的字体不同的操作系统也略有不同，比如CalibriforWindows。这是如何实施的？在CSS中，可以使用url("foo.bar")属性引用外部资源来添加图片。有趣的是，此资源仅在需要时加载（例如，单击链接时）因此，我们可以使用CSS创建一个选择器，当用户单击链接时调用特定的UPL#link2:active::after{content:url('track.php?action=link2_clicked');}在服务器端，php脚本会在调用URL时保存时间戳。浏览器监控浏览器监控是基于@supportsMedia-Query，我们可以监控浏览器的一些特殊属性比如-webkit-appearance@supports(-webkit-appearance:none){#chrome_detect::after{content:url('track.php?action=browser_chrome');}}字体监控对于字体监控，需要定义一个新字体。如果字体存在，文本将尝试使用该字体进行样式设置。但是，当用户在系统上找不到字体时，定义的字体作为回退，在这种情况下，浏览器将尝试加载定义的字体并调用服务器上的跟踪脚本/**Fontdetection**/@font-face{font-family:Font1;src:url('track.php?action=font1');}#font_detection1{font-family:Calibri,Font1;}Hoverdetection对于悬停检测（基于jeyroik的思路），我们需要定义一个关键帧，每次使用这个关键帧去请求一个URL@keyframespulsate{0%{background-image:url('track.php?duration=00');}20%{background-image:url('track.php?duration=20');}40%{background-图片: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:pulsate5sinfinite;-webkit-animation:pulsate5sinfinite;/*animation:pulsate5sinfinite;*/animation-name:pulsate;animation-duration:10s;content:url('track.php?duration=-1');}我们可以通过补充关键帧设置来优化分辨率监控。可以使用CSS提供的:selected选择器#checkbox:checked{content:url('track.php?action=checkbox');}为了监听字符串，我们结合HTML模式属性，可以帮助我们解决一些基本的输入验证，结合:valid选择器，当输入匹配成功时，浏览器会请求我们的跟踪站点
