jbtronics/CrookedStyleSheets

Proof of Belief for Web residence monitoring, fully the utilization of CSS and no Javascript.

What carry out we carry out with this diagram?

We are able to possess some identical outdated information about the particular person, cherish the display resolution (when browser is maximized) and which browser (or engine) is weak.
Extra we can detect if a particular person opens a hyperlink or hovers with the mouse over a fragment. This is also weak to display screen which (exterior) links a particular person visits and the utilization of the flit diagram, it must be even that you simply may per chance per chance presumably presumably also bring to mind to display screen, how the particular person moved its mouse (the utilization of an invisible desk of fields in the page background). Nevertheless the utilization of my diagram, its fully that you simply may per chance per chance presumably presumably also bring to mind to display screen, when a particular person visits a hyperlink the first time or hovers about a enviornment the first time. Per chance it be that you simply may per chance per chance presumably presumably also bring to mind to modify the manner, so it is that you simply may per chance per chance presumably presumably also bring to mind to display screen every click on.

Furthermore it is that you simply may per chance per chance presumably presumably also bring to mind to detect, if a particular person has installed a particular font. Based on this info it must be that you simply may per chance per chance presumably presumably also bring to mind to detect, which OS a customers makes use of (ensuing from various OS ships various fonts, e.g. « Calibri » on Windows).

How does it work?

In CSS you may per chance per chance presumably presumably also add an image from an exterior resource the utilization of the url(« foo.bar »); property. Attention-grabbing is, that this resource is fully loaded, when it is significant (as an illustration when a hyperlink is clicked).

So we can create a selector in CSS, that calls a impart URL, when the particular person clicks a hyperlink:

#link2:packed with life::after {
    boom: url("display screen.php?motion=link2_clicked");
}

On the server facet, a PHP script, assign the timestamp, when the URL is named.

Browser detection is in step with @helps Media-Inquire, and we take a look at for some browser particular CSS property cherish -webkit-appearance:

@helps (-webkit-appearance:none) {
    #chrome_detect::after {
        boom: url("display screen.php?motion=browser_chrome");
    }
}

For font detection, a recent font family is printed. Then a text is tried to model with the font that must be checked if it exists. When the browser doesn’t bag the font on the particular person’s machine, then the outlined font is weak as a fallback. When this happens, the browser tries to load the font and calls the monitoring script on the server.

/** Font detection **/
@font-face {
    font-family: Font1;
    src: url("display screen.php?motion=font1");
}

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

Demo

Right here you may per chance per chance presumably presumably bag a demo of the data on this Repo. The index.html is the file that is being tracked the utilization of this diagram, consult with the consequences.php for the consequences of the monitoring.

If nothing or a PHP warning looks after a Property, this diagram that the price of this property is misleading, or that the particular person has now no longer visited the page or hyperlink yet (Yeah its a tiny bit dirty, however you may per chance per chance presumably presumably also be conscious the principle of the manner…).
Also resolution detection works now no longer so nicely yet, ensuing from I in point of fact like fully detection for the mostly weak display widths. Extra it is a ways a tiny bit tricky to detect the true display height of the particular person, ensuing from CSS makes use of the height of the browser window and stuff than the Windows’ process bar makes the browser residence smaller than the display screen.