最近看到幾個使用 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
參考資料:
Leave a Reply