Ян Бемер (Jan Böhmer) рассказал о собственной технике отслеживания пользователей, для реализации которой требуется только CSS. Она позволяет узнать такую базовую информацию о посетителе, как:
- разрешение экрана устройства входа;
- используемый браузер;
- кликаемые внешние ссылки;
- элементы, на которые наводится мышь;
- системные шрифты.
Принцип работы
Реализация технологии основана на возможности добавлять в CSS изображения из внешних источников через свойство url("foo.bar"). Поскольку ресурсы загружаются по мере необходимости, вместо ссылки на изображение в качестве параметра можно указать ссылку на внешний скрипт для сбора статистики. Это позволяет определить, перешел ли пользователь по ссылке или же просто навел на нее. Примерный вид селектора для осуществления описанного процесса:
#link2:active::after {
content: url("track.php?action=link2_clicked");
}При этом PHP-скрипт фиксирует время клика на сервере.
Используемый браузер можно определить с помощью @supports Media-Query. Тут CSS помогает определить свойства, специфичные для каждого браузера (например, -webkit-appearance для Chrome):
@supports (-webkit-appearance:none) {
#chrome_detect::after {
content: url("track.php?action=browser_chrome");
}
}Для определения шрифта создаётся новое произвольное семейство шрифтов (вместо ссылки на шрифт опять же вставляется ссылка на скрипт для сборки статистики). Затем производится проверка наличия шрифта в системе. В случае неудачи будет вызван уже фиктивный шрифт.
/** Определение шрифта **/
@font-face {
font-family: Font1;
src: url("track.php?action=font1");
}
#font_detection1 {
font-family: Calibri, Font1;
}Протестировать новую идею самостоятельно можно тут.