Rastreando visitantes do site usando CSS

Jan Brömer, estudante de física da Alemanha com interesse em programação, publicou no GitHub um exemplo de rastreamento da movimentação de visitantes em sites usando apenas CSS, sem usar o poder do JavaScript. O código fornecido por Ian permite, por meio de uma linguagem formal para descrever a aparência de um documento, coletar certas informações sobre o usuário - a resolução da tela de seu dispositivo, o tipo de navegador (ou mecanismo), a presença de fontes especificadas, e mais. Também é possível rastrear os links que o usuário seguiu ou para os quais moveu o cursor. Usando uma tabela de campos invisível no fundo da página, você pode identificar as peculiaridades de mover o mouse pela tela. No entanto, você pode usar o método acima para rastreamento apenas se o usuário visitar a página pela primeira vez ou passar o mouse sobre uma célula específica de uma tabela oculta, uma vez que ações repetidas não são levadas em consideração. Você pode verificar o funcionamento do método aqui . Para usar o método, você pode adicionar uma imagem de uma fonte externa ao CSS usando a url (“foo.bar”). Como os recursos são carregados somente quando necessário, em vez de uma imagem, você pode especificar um link para um script coletor e vinculá-lo a eventos como clicar em um link ou mover o mouse sobre um link. Assim podemos criar um seletor em CSS que acione uma URL específica quando um usuário clica em um link:

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

A detecção do tipo de navegador é baseada nas regras @supports . Aqui você precisa verificar algumas propriedades CSS do navegador, como -webkit-appearance:

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

As fontes podem ser usadas para determinar o sistema operacional do usuário, já que sistemas operacionais diferentes enviam fontes diferentes (por exemplo, "Calibri" no Windows). Para definir uma fonte, é necessário criar uma nova família de fontes, cuja fonte de carregamento será o script de coleta de dados. A seguir, no bloco de texto, a fonte que está sendo testada é indicada primeiro e a fonte da nova família é indicada em segundo lugar. A seguir, o texto tentará estilizar a fonte, se a primeira fonte estiver presente a segunda será ignorada. Mas se não houver nenhuma fonte para verificar, o navegador tentará usar uma fonte fictícia como alternativa e enviará uma solicitação para um script externo:

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

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

Se após a utilização do método não houver resultados, ou aparecer um aviso do PHP, isso significa que o valor da propriedade é falso ou o usuário ainda não visitou a página/link.