Theo dõi khách truy cập trang web bằng CSS

Jan Brömer, một sinh viên vật lý đến từ Đức có niềm yêu thích với lập trình, đã xuất bản một ví dụ trên GitHub về việc theo dõi chuyển động của khách truy cập trên các trang web chỉ sử dụng CSS mà không sử dụng sức mạnh của JavaScript. Mã do Ian cung cấp cho phép, sử dụng ngôn ngữ chính thức để mô tả giao diện của tài liệu, thu thập thông tin nhất định về người dùng - độ phân giải màn hình của thiết bị, loại trình duyệt (hoặc công cụ), sự hiện diện của các phông chữ được chỉ định và hơn. Cũng có thể theo dõi các liên kết mà người dùng đã theo dõi hoặc di chuyển con trỏ tới. Sử dụng một bảng trường vô hình trên nền của trang, bạn có thể xác định các điểm đặc biệt của việc di chuyển chuột trên màn hình. Tuy nhiên, bạn chỉ có thể sử dụng phương pháp trên để theo dõi nếu người dùng truy cập trang lần đầu tiên hoặc di chuột qua một ô cụ thể của bảng ẩn vì các hành động lặp lại không được tính đến. Bạn có thể kiểm tra hoạt động của phương pháp tại đây . Để sử dụng phương pháp này, bạn có thể thêm hình ảnh từ nguồn bên ngoài vào CSS bằng url (“foo.bar”). Vì tài nguyên chỉ được tải khi cần, thay vì hình ảnh, bạn có thể chỉ định liên kết tới tập lệnh thu thập và liên kết nó với các sự kiện như nhấp vào liên kết hoặc di chuyển chuột qua liên kết. Vì vậy, chúng ta có thể tạo bộ chọn trong CSS để kích hoạt một URL cụ thể khi người dùng nhấp vào liên kết:

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

Việc phát hiện loại trình duyệt dựa trên quy tắc @supports . Tại đây bạn cần kiểm tra một số thuộc tính CSS cho trình duyệt, chẳng hạn như -webkit-appearance:

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

Phông chữ có thể được sử dụng để xác định hệ điều hành của người dùng, vì các hệ điều hành khác nhau gửi các phông chữ khác nhau (ví dụ: "Calibri" trên Windows). Để xác định phông chữ, bạn cần tạo họ phông chữ mới, nguồn tải sẽ là tập lệnh thu thập dữ liệu. Tiếp theo, trong khối văn bản, phông chữ đang được kiểm tra được chỉ định đầu tiên và phông chữ từ họ mới được chỉ định thứ hai. Tiếp theo, văn bản sẽ cố gắng tạo kiểu cho phông chữ; nếu có phông chữ đầu tiên thì phông chữ thứ hai sẽ bị bỏ qua. Nhưng nếu không có phông chữ nào để kiểm tra thì trình duyệt sẽ cố gắng sử dụng phông chữ giả làm dự phòng và gửi yêu cầu đến tập lệnh bên ngoài:

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

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

Nếu sau khi sử dụng phương pháp này không có kết quả hoặc xuất hiện cảnh báo PHP, điều này có nghĩa là giá trị thuộc tính là sai hoặc người dùng chưa truy cập trang/liên kết.