Tracking Website Visitors Using CSS

Jan Brömer, a physics student from Germany with an interest in programming, published an example on GitHub of tracking the movement of visitors on sites using only CSS, without using the power of JavaScript. The code provided by Ian allows, using a formal language to describe the appearance of a document, to collect certain information about the user - the screen resolution of his device, the type of browser (or engine), the presence of specified fonts, and more. It is also possible to track the links that the user followed or moved the cursor to. Using an invisible table of fields on the background of the page, you can identify the peculiarities of moving the mouse across the screen. However, you can use the above method for tracking only if the user visits the page for the first time or hovers the mouse over a specific cell of a hidden table, since repeated actions are not taken into account. You can check the operation of the method here . To use the method, you can add an image from an external source to the CSS using the url (“foo.bar”). Since resources are loaded only when needed, instead of an image, you can specify a link to a collector script and bind it to events such as clicking on a link or moving the mouse over a link. So we can create a selector in CSS that triggers a specific URL when a user clicks on a link:

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

Browser type detection is based on @supports rules . Here you need to check some CSS properties for the browser, such as -webkit-appearance:

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

Fonts can be used to determine the user's OS, since different OSes send different fonts (for example, "Calibri" on Windows). To define a font, you need to create a new font family, the source for loading which will be the data collection script. Next, in the block of text, the font being tested is indicated first, and the font from the new family is indicated second. Next, the text will try to stylize the font; if the first font is present, then the second will be ignored. But if there is no font to check, then the browser will try to use a dummy font as a fallback and send a request to an external script:

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

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

If after using the method there are no results, or a PHP warning appears, this means that the property value is false or the user has not yet visited the page/link.