使用 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 或使用者尚未造訪該頁面/連結。