Отслеживания посетителей сайтов с помощью 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, то это значит, что значение свойства ложно или пользователь еще не посетил страницу/ссылку.