使用 CSS 跟踪网站访问者

Jan Brömer 是一位对编程感兴趣的德国物理系学生，他在GitHub上发布了一个示例，仅使用 CSS 来跟踪网站上访问者的移动情况，而不使用 JavaScript 的强大功能。 Ian 提供的代码允许使用正式语言描述文档的外观，收集有关用户的某些信息 - 设备的屏幕分辨率、浏览器（或引擎）的类型、指定字体的存在以及更多的。还可以跟踪用户关注或将光标移动到的链接。使用页面背景上不可见的字段表，您可以识别在屏幕上移动鼠标的特殊性。但是，只有当用户第一次访问该页面或将鼠标悬停在隐藏表格的特定单元格上时，才可以使用上述方法进行跟踪，因为不考虑重复操作。您可以在此处检查该方法的操作。要使用该方法，您可以使用 url (“foo.bar”) 将外部源的图像添加到 CSS。由于仅在需要时加载资源而不是图像，因此您可以指定收集器脚本的链接并将其绑定到事件，例如单击链接或将鼠标移到链接上。因此，我们可以在 CSS 中创建一个选择器，当用户单击链接时触发特定的 URL：

# link2 : active :: after {
     content : url ( " track.php? action = link2_clicked " );
}

浏览器类型检测基于@supports规则。这里需要检查浏览器的一些CSS属性，例如-webkit-appearance：

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

字体可用于确定用户的操作系统，因为不同的操作系统发送不同的字体（例如 Windows 上的“Calibri”）。要定义字体，您需要创建一个新的字体系列，加载源将是数据收集脚本。接下来，在文本块中，首先指示正在测试的字体，然后指示新系列的字体。接下来，文本将尝试对字体进行样式化；如果第一种字体存在，则第二种字体将被忽略。但是，如果没有要检查的字体，那么浏览器将尝试使用虚拟字体作为后备并向外部脚本发送请求：

@ font-face {
     font-family : Font1;
    src : url ( " track.php? action = font1 " );
}

# font_detection1 {
     font-family : Calibri, Font1;
}

如果使用该方法后没有结果，或者出现 PHP 警告，则意味着该属性值为 false 或用户尚未访问该页面/链接。