&nbs p;
一、纯 CSS 实现数据上报
举个例子，要跟踪并统计某个按钮的 点击事件 ：
.button-1:active: :after { content: url(./pixel.gif?action=click&id=butto n1 ); dis play : none; } .button-2:active :: after { content: url(./pixel.gif?action=click&id=button2); display: none; } 此时，当我们点击按钮的时候，相关行为数据就会上报给 服务器 ，这种上报，就算把JS禁掉也无法阻止。
您可以狠狠地点击这里：纯CSS跟踪统计上报点击行为demo
点击demo页面的两个按钮，可以看到发出了如下的请求：
当然，我们可以统计的不仅仅是单击行为，hover行为，focus行为都可以统计，当然，还有很多其他方面的。例如：
1. 不支持CSS3浏览器比例统计.any-element { background: url(./pixel.gif?css=2); background -i mage: url(./pixel.gif?css=3), none; } 例如，我的Ch rom e发出的图片请求地址就是：
类似的，我们可以检测支持其他一些CSS属性的比例，要比单纯看浏览器的占比要 精准 的多。因为同样是C hr ome浏览器，不同用户版本可能不一样，要想准确 知道 某些CSS新特性支持情况，这种CSS上报方法要更准确。
可以使用 @supports 规则。
.any-element { background: url(./pixel.gif?grid=0); } @supports (display: grid) { .any-element { background: url(./pixel.gif?grid=1); } } 2. retina屏幕占比统计 要么上报0，要么上报1，最后可以知道retina屏幕的比例。
.any-element { background: url(./pixel.gif?retina=0); } @media screen and (- webkit -min-device-pixel-ratio: 2) { .any-element { background: url(./pixel.gif?retina=1); } } 例如，我家里的window普通 显示屏 ：
类似的，可以检测 宽 屏设备比例等。
3. 是否 支持某字体例如，用户是否 电 脑是否安装了思 源 黑体：
@font-face { font-f ami ly: anyFontN am e; src: url( .. /image/pixel.gif?font=unmatch&id=s_h_s); } .element-w IT h -t ext { font-family: 'Source Han Sans CN', 'anyFontName'; } 这个要看font请求，如果你的浏览器没有安装思源黑体，则会尝试加载anyFontName这个字体，于是发起了请求，如下图所示：
如果安装，则没有上报。
//zxx: 对于一些常见中文字体在CSS中的英文名称，可以参见我之前的研究成果：“CSS font-family常见中文字体对应的英文名称”。
以上1,2,3三个CSS上报数据的小按钮，您可以狠狠地点击这里亲自体验一番：一些CSS跟踪上报示意demo
页面截图如下：
我们还可以借助浏览器原生行为 简化 我们上报 成本 ，比方说表单验证出错，用来统计用户注册 或者 其他 重要 表单操作的成功率。
CSS如下：
.track:invalid { background: url(./pixel.gif?action=regist& stat us=invalid); } .track:valid { background: url(./pixel.gif?action=regist&status=valid); } 每当表单提交的时候，我们给form元素添加类名 .track ，此时，其会自动上报表单是否填写完全成功， :invalid 和 :valid 都是标准的原生的CSS伪 类选择器 ，我们无需自己写验证逻辑。
JS如下：
forms.addEventListener('s ub mit', function (event) { event.p rev entDefault(); // 上报成功与否 this.classList.add('track'); // 这个是 不影响 原生表单的提交行为，实际开发多走Ajax if (this.reportValidity()) { this.submit(); } setTimeout(function () { this.classList.remove('track'); }.bind(this), 0); }); HTML 这里也需要novalidate属性配合下：
<form novalidate></form>
眼见为实，您可以狠狠地点击这里：表单验证出错与数据上报demo
不过 ，这种方法有个缺陷，无论成功与失败，只能上报一次。
表单的 reportValidity() 方法虽然很省力，但是会呼起浏览器原生的提示，过不了设计师那一关的，因此，恩，大家high一下即可。
二、纯CSS实现HT ML 验证与提示
再说说另外一个纯CSS 应该 ，那就是进行HTML验证，并且直接在页面上输出来。
举个 简单 例子，图片如果空 alt 属性，则高亮这个图片：
img [alt=""] { outline: 2px solid red ; } 又或者 _blank 链接的 rel 属性没有加 noo PE ner 和 noreferrer 。
a[t arg et="_blank"]:not([rel="noopener noreferrer"]) { outline: 2px solid red; } 诸如此类。
然后配合伪元素在页面上显示提示的文字：
script[src]:not([async]) { display: block; } script[src]:not([async])::after { content: '试试给带有[src="…"]的<script>元素添加[async]属性'; } 然后，就有清闲的有志之士还专门搞了个通过CSS验证检测HTML合法性的CSS库，名为 const ruct.css，项目地址为：https://github .COM /t7/construct.css
这里有个demo，有兴趣的可以进去瞅瞅。
使用很简单，你的项目引入这个CSS，那些使用有问题的HTML就会标记并提示，类似下面截图：
然而，有些提示嘛，咳咳，有些牵强附会了，大家当新闻八卦看看就好了。
三、为什么说是蛋疼应用
本文提到的两个CSS的新奇应用，怎么说呢，有点像 手工 耿哥的的各种手工作品，很有新意，很有特色，可惜，并不实用。
比方说一 开始 的数据上报，局限很大，很多行为你无法统计；另外维护非常不方便，把一大堆 url地址 塞到CSS中，回头要是改个什么东西，很啰嗦的。CSS是偏前前端的玩具，而数据上报偏后的前端更合适，实际开发肯定不会这么玩的，人力资源 利用 完全没有 最大化 嘛。
还有那个HTML验证，这年头，还有谁关心HTML语义，结构啥的嘛，小程序，Vue这种HTML结构都是自定义的，和标准越走越远了，没有市场，就没有 价值 。而且里面很多验证，有些想得太多，空div为什么就不能存在呢？我就想不通了。
因此看来，本文介绍的这两个CSS应用，只适合远观，不适合亵玩。
以上！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS蛋疼应用之：数据上报和HTML验证 全部内容，希望文章能够帮你解决 html5教程-CSS蛋疼应用之：数据上报和HTML验证 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS蛋疼应用之：数据上报和HTML验证的详细内容...