Seguimiento de visitantes del sitio web mediante CSS

Jan Brömer, un estudiante de física de Alemania interesado en la programación, publicó en GitHub un ejemplo de seguimiento del movimiento de los visitantes en sitios utilizando solo CSS, sin utilizar el poder de JavaScript. El código proporcionado por Ian permite, utilizando un lenguaje formal para describir la apariencia de un documento, recopilar cierta información sobre el usuario: la resolución de pantalla de su dispositivo, el tipo de navegador (o motor), la presencia de fuentes específicas y más. También es posible rastrear los enlaces que el usuario siguió o hacia los que movió el cursor. Utilizando una tabla de campos invisible en el fondo de la página, puede identificar las peculiaridades de mover el mouse por la pantalla. Sin embargo, puede utilizar el método anterior para realizar el seguimiento solo si el usuario visita la página por primera vez o pasa el mouse sobre una celda específica de una tabla oculta, ya que las acciones repetidas no se tienen en cuenta. Puedes comprobar el funcionamiento del método aquí . Para utilizar el método, puede agregar una imagen de una fuente externa al CSS usando la URL (“foo.bar”). Dado que los recursos se cargan solo cuando son necesarios, en lugar de una imagen, puede especificar un vínculo a un script recopilador y vincularlo a eventos como hacer clic en un vínculo o mover el mouse sobre un vínculo. Entonces podemos crear un selector en CSS que active una URL específica cuando un usuario hace clic en un enlace:

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

La detección del tipo de navegador se basa en reglas @supports . Aquí debe verificar algunas propiedades CSS del navegador, como -webkit-appearance:

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

Se pueden utilizar fuentes para determinar el sistema operativo del usuario, ya que diferentes sistemas operativos envían fuentes diferentes (por ejemplo, "Calibri" en Windows). Para definir una fuente, debe crear una nueva familia de fuentes, cuya fuente de carga será el script de recopilación de datos. A continuación, en el bloque de texto, se indica primero la fuente que se está probando y en segundo lugar la fuente de la nueva familia. A continuación, el texto intentará estilizar la fuente; si la primera fuente está presente, la segunda será ignorada. Pero si no hay ninguna fuente para verificar, entonces el navegador intentará usar una fuente ficticia como alternativa y enviará una solicitud a un script externo:

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

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

Si después de usar el método no hay resultados, o aparece una advertencia de PHP, esto significa que el valor de la propiedad es falso o el usuario aún no ha visitado la página/enlace.