Відстеження відвідувачів сайтів за допомогою CSS

Ян Бремер, студент-фізик з Німеччини, що цікавиться програмуванням, опублікував на GitHub приклад відстеження переміщення відвідувачів сайтами із застосуванням тільки CSS, без використання можливостей JavaScript. Код, наданий Яном, дозволяє за допомогою формальної мови опису зовнішнього вигляду документа зібрати певну інформацію про користувача – роздільну здатність екрана його пристрою, тип браузера (або движок), наявність заданих шрифтів та інше. Також є можливість відстежити посилання, якими переходив користувач або до яких підводив курсор. Використовуючи невидиму таблицю полів на тлі сторінки, можна виявити особливості переміщення мишки по екрану. Однак, використовувати наведений вище метод для відстеження можна тільки в тому випадку, якщо користувач вперше відвідує сторінку або наводить мишу на певну комірку прихованої таблиці, оскільки повторні дії не враховуються. Перевірити роботу методу можна тут . Для використання методу можна додати зображення із зовнішнього джерела CSS за допомогою url («foo.bar»). Оскільки ресурси завантажуються лише за потреби, замість зображення можна вказати посилання на скрипт-складальник і прив'язати його до таких подій, як перехід на посилання або підведення миші до посилання. Таким чином, ми можемо створити селектор 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 " );
    }
}

За допомогою шрифтів можна визначити ОС користувача, оскільки різні ОС відправляють різні шрифти (наприклад, Calibri у Windows). Для визначення шрифту необхідно створити нове сімейство шрифтів, джерелом для завантаження якого буде скрипт-складальник даних. Далі в блоці тексту першим вказується шрифт, що перевіряється, а другим - шрифт з нового сімейства. Далі текст спробує стилізувати шрифт, якщо перший шрифт присутній, то другий буде ігнорований. Але якщо шрифту, що перевіряється, немає, то браузер спробує використовувати фіктивний шрифт як запасний варіант і відправить запит до зовнішнього скрипту:

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

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

Якщо після використання методу результатів не надійшло, або з'явилося попередження PHP, це означає, що значення властивості помилково або користувач ще не відвідав сторінку/посилання.