用 CSS 實現 Tracking

最近看到幾個使用 CSS 做追蹤的小技巧，在這也記錄一下 XD

• 使用者滑鼠移動到特定元素時

#target:hover::after {
  content: url("track.php?action=hover");
}

• 使用者點擊特定連結時

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

• 特定 browser 偵測(e.g. chrome)

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

• 字體支援度偵測 (e.g. 如果不支援 Calibri 字體)

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

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

• checkbox 被選取時

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

以上是幾個可能比較常用的追蹤時機，比較適用在特定環境偵測的情境下．

實務上通常是配上一個 unique 的使用者識別代號，相較於普遍使用的 js 追蹤技術還是有些地方需要修改及調整 XD

參考資料:

• https://github.com/jbtronics/CrookedStyleSheets