CSS 指纹，今天翻看大佬的文章偶然发现这样一个新词，接下来我们就一起看看到底是个什么东东。
什么是 CSS 指纹？
CSS 指纹是一种跟踪和收集用户信息的技术，这种方法主要是利用了 CSS 的一些特性来跟踪用户的浏览器和设备的各种特征，这些特征以后可以用来识别或跟踪用户
CSS 指纹如何生成
原理比较简单，主要就是通过无数的媒体查询来给页面返回一套适用的 CSS 样式代码，这套 CSS 代码中会有很多的背景图片，背景图片的地址是一个特定的 URL，这个 URL 上携带了一些我们需要收集的参数，比如：
@media screen and (width: 300px) {
body {
background: url(https://zero2one/collect/info/width=300);
}
}
这个媒体查询代码只会在用户设备宽度为 300px 时生效，所以我们上报的地址也可以带上 width=300 的信息，其它信息也类似这种方案去实现，这里就不一一列举了
为了避免信息的重复上报，服务端在接收到该信息上报后，最好将 HTTP 的状态码返回 410（Gone），这样该请求就会缓存下来，之后重复的请求都不会走到服务端，而是走的缓存。最终的效果就类似这样：
简单来说的话，就是 url() 里面可以填入字符串 + 0 或多个修饰符，去看了一下修饰符的含义，似乎修饰符可以写 CSS 函数（类似calc()、var()、attr() …），这样不就满足我们的需求了吗？来模拟写一下：
::root {
--screen-width: 'width=300';
--screen-height: '&height=500';
}
body {
background: url('https://zero2one/collect/info?' var(--screen-width) var(--screen-height));
}
这样就模拟了我们 JS 中的字符串拼接~ 岂不是美哉，然后再加上其它媒体查询的变量修改，就实现了一次请求上报所有信息的需求。
::root {
--screen-width: '';
--screen-height: '';
}
@media screen and (width: 300px) {
::root {
--screen-width: 'width=300';
}
}
@media screen and (height: 500px) {
::root {
--screen-height: '&height=500';
}
}
body {
background: url('https://zero2one/collect/info?' var(--screen-width) var(--screen-height));
}
希望这个草案能顺利通过~ 这样 CSS 指纹的方案就又更加完善了！
结语
本文对于 CSS 指纹 的探讨就到这里了，如果有什么问题或者想法，可以在评论区留言，我们互相交流讨论！