CSS添加监测代码的几种方法

winbug

1. 常用方法

在选择器中添加content属性属性值为监控地址
例

#alink:active::after {
  content: url('genzong.php?action=link_clicked');
}

2. 浏览器监测

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

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

3. 字体监测

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

/** Font detection **/
@font-face {
  font-family: Font1;
  src: url('genzong.php?action=font1');
}

#font_detection1 {
  font-family: "Microsoft YaHei", Font1;
}

4. 输入监测

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

#checkbox:checked {
  content: url('genzong.php?action=checkbox');
}

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

<input type="text" id="text_input" pattern="^test$" required>
#text_input:valid {
  background: green;
  background-image: url('genzong.php?action=text_input');
}