1.纯CSS实现数据上报比如跟踪统计某个按钮的点击事件：.button-1:active::after{content:url(./像素.gif?action=click&id=button1);显示：无；}.button-2:active::after{内容：url(./pixel.gif?action=click&id=button2);display:none;}此时，当我们点击按钮时，会将相关的行为数据上报给服务器。这种举报就算是禁止JS也无法阻止。当然，我们可以统计的不仅仅是点击行为、悬停行为、焦点行为，当然还有很多其他方面。例如：1.不支持CSS3浏览器比例统计。任意元素{背景：url(./pixel.gif?css=2);背景图像：url(./pixel.gif?css=3)，无；}比如我的Chrome发送的图片请求地址是：同样的，我们可以检测其他CSS属性支持的比例，这比单纯看浏览器的比例准确很多。因为是同一个Chrome浏览器，不同的用户版本可能不一样。如果你想准确知道对某些CSS新特性的支持情况，这种CSS报告方式更为准确。您可以使用@supports规则。.any-element{background:url(./pixel.gif?grid=0);}@supports(display:grid){.any-element{background:url(./pixel.gif?grid=1);}}2.Retinascreenratiostatistics要么报告为0要么1，最后你可以知道视网膜屏幕的比例。.any-element{background:url(./pixel.gif?retina=0);}@mediascreenand(-webkit-min-device-pixel-ratio:2){.any-element{background:url(./pixel.gif?retina=1);}}比如我家的橱窗显示：同样可以检测宽屏设备的比例等。为了帮助大家学习更简单高效，我将大量资料免费分享给大家，帮助你在成为前端工程师甚至全栈工程师的道路上克服障碍。在这里推荐一个前端全栈学习扣qun：784783012欢迎大家进群交流讨论，学习交流，共同进步。当你真正开始学习的时候，难免会不知从何下手，导致效率低下，影响你继续学习的信心。但最重要的是你不知道哪些技术需要掌握，学习时频繁踩坑，最终会浪费很多时间，所以有效的资源还是很有必要的。3、是否支持某种字体。例如用户电脑是否安装了思源黑体：@font-face{font-family:anyFontName;src:url(../image/pixel.gif?font=unmatch&id=s_h_s);}。element-with-text{font-family:'SourceHanSansCN','anyFontName';}这取决于字体请求。如果你的浏览器没有安装思源黑体，它会尝试加载字体anyFontName，于是发起请求，如下图：如果安装了，则不报。//zxx:CSS中一些常见中文字体的英文名称，可以参考我之前的研究成果：《CSSfont-family常见中文字体对应的英文名称》。*以上1、2、3个CSS上报数据的小按钮，大家可以点这里自己体验一下：部分CSS跟踪上报说明demo页面截图如下：*我们也可以使用浏览器的nativebehavior为了简化我们的报告，成本，例如表单验证错误，用于统计用户注册或其他重要表单操作的成功率。CSS如下：;}per提交表单时，我们将类名.track添加到表单元素中。这时候会自动报告表格是否填写成功。:invalid和:valid都是标准的原生CSS伪类选择器，我们不需要自己写。验证逻辑。JS如下：forms.addEventListener('submit',function(event){event.preventDefault();//是否上报成功this.classList.add('track');//这个不影响原生表单的提交行为，实际开发中需要更多的Ajax绑定(这个),0);});HTML这里也需要novalidate属性：
