纯CSS实现数据上报和HTML验证
一、纯CSS实现数据上报
举个例子,要跟踪并统计某个按钮的点击事件:
.button-1:active::after {content: url(./pixel.gif?action=click&id=button1);display: none;
}
.button-2:active::after {content: url(./pixel.gif?action=click&id=button2);display: none;
}
此时,当我们点击按钮的时候,相关行为数据就会上报给服务器,这种上报,就算把JS禁掉也无法阻止。
当然,我们可以统计的不仅仅是单击行为,hover行为,focus行为都可以统计,当然,还有很多其他方面的。例如:
1. 不支持CSS3浏览器比例统计
.any-element {background: url(./pixel.gif?css=2);background-image: url(./pixel.gif?css=3), none;
}
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
例如,我的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. 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-family: anyFontName;src: url(../image/pixel.gif?font=unmatch&id=s_h_s);
}
.element-with-text {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&status=invalid);
}
.track:valid {background: url(./pixel.gif?action=regist&status=valid);
}
每当表单提交的时候,我们给form元素添加类名.track
,此时,其会自动上报表单是否填写完全成功,:invalid
和:valid
都是标准的原生的CSS伪类选择器,我们无需自己写验证逻辑。
JS如下:
forms.addEventListener('submit', function (event) {event.preventDefault();// 上报成功与否this.classList.add('track');// 这个是不影响原生表单的提交行为,实际开发多走Ajaxif (this.reportValidity()) {this.submit();}setTimeout(function () {this.classList.remove('track');}.bind(this), 0);
});
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
HTML这里也需要novalidate属性配合下:
<form novalidate></form>
眼见为实,您可以狠狠地点击这里:表单验证出错与数据上报demo
不过,这种方法有个缺陷,无论成功与失败,只能上报一次。
表单的reportValidity()
方法虽然很省力,但是会呼起浏览器原生的提示,过不了设计师那一关的,因此,恩,大家high一下即可。
二、纯CSS实现HTML验证与提示
再说说另外一个纯CSS应该,那就是进行HTML验证,并且直接在页面上输出来。
举个简单例子,图片如果空alt
属性,则高亮这个图片:
img[alt=""] { outline: 2px solid red; }
又或者_blank
链接的rel
属性没有加noopener
和noreferrer
。
a[target="_blank"]:not([rel="noopener noreferrer"]) { outline: 2px solid red; }
诸如此类。
然后配合伪元素在页面上显示提示的文字:
script[src]:not([async]) {display: block;
}
script[src]:not([async])::after {content: '试试给带有[src="…"]的<script>元素添加[async]属性';
}
web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
使用很简单,你的项目引入这个CSS,那些使用有问题的HTML就会标记并提示,类似下面截图:
然而,有些提示嘛,咳咳,有些牵强附会了,大家当新闻八卦看看就好了。
三、为什么说是蛋疼应用
本文提到的两个CSS的新奇应用,怎么说呢,有点像手工耿哥的的各种手工作品,很有新意,很有特色,可惜,并不实用。
比方说一开始的数据上报,局限很大,很多行为你无法统计;另外维护非常不方便,把一大堆URL地址塞到CSS中,回头要是改个什么东西,很啰嗦的。CSS是偏前前端的玩具,而数据上报偏后的前端更合适,实际开发肯定不会这么玩的,人力资源利用完全没有最大化嘛。
还有那个HTML验证,这年头,还有谁关心HTML语义,结构啥的嘛,小程序,Vue这种HTML结构都是自定义的,和标准越走越远了,没有市场,就没有价值。而且里面很多验证,有些想得太多,空div为什么就不能存在呢?我就想不通了。
纯CSS实现数据上报和HTML验证相关推荐
- html 数据交互动画,纯css实现可交互的动画
如题,不借助JavaScript,只利用CSS,如何实现可交互式的动画呢?或许该需求仅此一种解决方案,绝无仅有.不知该方案是否是第一次找到. 什么是可交互动画? 就是可以响应用户的动画,直接上图吧,更 ...
- 通过页面埋点做监控却不影响性能?解密ARMS前端监控数据上报技术内幕
摘要: 本文将为您介绍,在采集多类日志数据的情况下,阿里云业务实时监控服务(ARMS)之前端监控如何优化日志上报 前端监控 (又叫UEM,User Experience Management, 用户体 ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
- 纯CSS无hacks的跨游览器多列布局(转)
转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...
- 3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
转载自张旭鑫 一.从SVG实现多彩圆环倒计时效果说起 上周我做了个demo,使用SVG和stroke-dasharray和stroke-dashoffset特性实现了一个彩条圆环倒计时效果,大概长下面 ...
- 数据上报痛点解决方案
作者:donnyhuang,腾讯微信支付运营支持研发团队 数据驱动是近年来很火的概念,可以优化产品体验.可以用于运营增长.可以发现质量问题,看起来无所不能,时尚先进.但是,你得先有"数据上报 ...
- html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
- 纯CSS菜单样式,及其Shadow DOM,Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 先放一张效果图 Part 1:纯CSS菜单样式 先放样式代码 1 <sty ...
- html 头尾代码自动,HTML Head Generator - 纯 CSS 实现的头部元标签代码生成器 - 钉子の次元...
前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦.没有到用一行 JavaSc ...
- html自动适应布局,用纯CSS实现自适应布局表格
以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要.这种网页布局就是"自适应布局&q ...
最新文章
- freemaker中配置文件freemarker.properties详解
- 比特币的闪电网络正在创建自己的黑客阵营
- 【错误记录】C 语言中通过指针操作字符串常量出错记录 ( 只有 栈内存 或 堆内存 中的数据才能通过指针修改 | 不要通过指针修改常量区的字符串 )
- python用函数绘制椭圆_python - 如何使用python从3个点找到椭圆的方程 - SO中文参考 - www.soinside.com...
- JAVA--网络编程
- Asp.Net中几种相似数据绑定标记符号的解释及用法
- 信息学奥赛一本通C++语言——1128:图像模糊处理
- css文本省略(······)行高错位(bug)- 解决办法
- 卡通自适应网址发布页源码
- 区块链原理设计与应用_我如何设计一个可以在6个月内吸引200K用户的区块链应用...
- C++:如何在VS中配置第三方动态库 【visual Studio 2017 + Opencv 】
- java过滤html相关标签
- python基础学习笔记4--抽象
- redis数据中的key如果是中文
- 用图形化文件对比工具kdiff3解决git rebase冲突
- QQ省市县三级联动JS
- 穿山甲 groMore 配置广告位 穿山甲/优良汇
- 原来在朋友眼里,我是一个闪闪发光的人
- 任正非最新签发:鼓励来华为“胡说八道”
- [日推荐]『口红IN』女票生气了怎么哄?这里有妙招!
热门文章
- 没有mysql sock_找不到mysql.sock,mysql.sock丢失问题解决方法
- 【web-攻击验证机制】(3.2.3)验证机制设计缺陷:“记住密码” 功能、用户伪装功能、证书确认不完善
- 点播和播放器下载需要的参数的区别(VideoId、AccessKeyId、AccessKeySecret、playKey、playauth)...
- 【2013年总结】思维跌宕起伏,生命颠簸曲折的一年
- 关于C语言数组的输入与输出
- Codeforces633H-Fibonacci-ish II
- 便捷的收集数据工具—Sniffer嗅探器
- 5分钟入门MP4文件格式-mp4的ftyp
- 仿网易评论盖楼PHP+Mysql实现
- 如何导出带有dn值的栅格影像(方便arcgis处理)