原文地址：CrookedStyleSheets作者：jbtronics除了使用JS跟踪用户，现在有人提出CSS也可以用于网页跟踪分析。译者认为这种方法比较优雅简洁，不易被封堵，值得一试，想要了解更多，可以查看仓库地址和demo，我们可以用它来做什么我们可以收集一些基本信息关于用户，例如屏幕分辨率（当浏览器最大化时）以及用户使用的浏览器（引擎）。此外，我们可以监控用户是否点击链接或悬停在元素上以跟踪用户悬停的链接，甚至可以跟踪用户如何移动鼠标（在页面上使用不可见字段），但是，以我当前方法我只能跟踪用户的第一次点击或者悬停，我相信修改我的方法最终可以让跟踪用户的每一次点击最后，我们还可以监控用户是否安装了特殊字体，根据这些信息，我们可以跟踪用户使用的操作系统，因为不同的操作系统使用的字体也略有不同，比如Windows的Calibri。可以使用引用外部资源的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');}}字体监控对于字体监控，需要定义一种新字体。如果字体存在，文本将尝试使用该字体进行样式设置。但是，当用户在系统中找不到字体时，定义的字体将作为后备。在这种情况下，浏览器将尝试加载定义的字体并调用服务器上的跟踪脚本/**Font检测**/@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-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:pulsate5sinfinite;-webkit-动画：脉动5s无限；/*animation:pulsate5sinfinite;*/animation-name:pulsate;动画持续时间：10s；content:url('track.php?duration=-1');}我们可以通过补充关键帧的设置，优化监听分辨率输入监听来监听用户是否选中了复选框，我们可以使用:selectedCSS提供的选择器#checkbox:checked{content:url('track.php?action=checkbox');}为了监听字符串，我们结合HTMLpattern属性，可以帮助我们解决一些基本的输入验证，结合:valid选择器，当浏览器匹配输入成功会去请求我们的跟踪站点
