前端开发入门到实战:纯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;
}
例如,我的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普通显示屏:
类似的,可以检测宽屏设备比例等。
为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习扣qun:784783012 欢迎大家进群交流讨论,学习交流,共同进步。
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。
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);
});
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]属性';
}
然后,就有清闲的有志之士还专门搞了个通过CSS验证检测HTML合法性的CSS库,名为construct.css,项目地址为:https://github.com/t7/construct.css
这里有个demo,有兴趣的可以进去瞅瞅。
使用很简单,你的项目引入这个CSS,那些使用有问题的HTML就会标记并提示,类似下面截图:
然而,有些提示嘛,咳咳,有些牵强附会了,大家当新闻八卦看看就好了。
三、为什么说是蛋疼应用
本文提到的两个CSS的新奇应用,怎么说呢,有点像手工耿哥的的各种手工作品,很有新意,很有特色,可惜,并不实用。
比方说一开始的数据上报,局限很大,很多行为你无法统计;另外维护非常不方便,把一大堆URL地址塞到CSS中,回头要是改个什么东西,很啰嗦的。CSS是偏前前端的玩具,而数据上报偏后的前端更合适,实际开发肯定不会这么玩的,人力资源利用完全没有最大化嘛。
还有那个HTML验证,这年头,还有谁关心HTML语义,结构啥的嘛,小程序,Vue这种HTML结构都是自定义的,和标准越走越远了,没有市场,就没有价值。而且里面很多验证,有些想得太多,空div为什么就不能存在呢?我就想不通了。
前端开发入门到实战:纯CSS实现数据上报和HTML验证相关推荐
- 前端开发入门到实战:六种组织CSS的方式
OOCSS OOCSS 意为面向对象的CSS.这种方法有两种主要 观点: 结构与设计分离 容器和内容分离 使用这套结构,开发者能得到可以在不同地方使用的一般类. 在这一步,会存在两点(通常就好和坏): ...
- 前端开发入门到实战:JavaScript字符串转换数字
js 字符串转换数字方法主要有三种: 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者 ...
- React前端开发入门与实战案例
课程介绍 本课程主要讲解React的基础使用技巧及实战案例. React 是一个用于构建用户界面的 JavaScript 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).R ...
- 前端开发入门:html和css基础知识回顾2
HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...
- 前端开发入门到实战:HTML5 video视频播放
一.下面播报一则新闻 Chrome 70已经原生支持HTML5 <video>播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变 ...
- html前端页面的基本骨架是,web前端入门到实战:css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
- web前端开发入门(一)
web前端开发入门(一) 前端开发入门 HTML/CSS/JavaScript JavaScript 总结 思考和实践 前端开发入门 首先必须掌握 HTML/CSS/JavaScript 这三大基础技 ...
- web前端开发入门学习线路图详解-2019升级版
现如今,Web前端工程师已经成为各大互联网公司不可或缺的热门职位,从业者队伍日渐庞大,这其中不乏零基础学习者和转行人士.为了方便大家系统而全面的掌握前端基础知识,千锋小编特意整理了web前端开发入门学 ...
- Web前端开发入门之网页制作三要素!
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...
最新文章
- 阿里无人车配送快递突破 100 万单,小蛮驴牵引的自动驾驶战略布局
- c++中使用Tesseract-OCR
- 使用Swagger2Markup实现API文档的静态部署(二):Markdown和Confluence
- 【20170926】【软工】第1次个人作业
- 设计模式 -(5)装饰模式(结构型)
- Mysql导入excel数据,解决某些特殊字符乱码问题
- C#-WebForm-★★★JQuery知识——基础知识、选择器、事件★★★
- [Matlab] PDETool 的 Set Formula 的元素排列顺序会影响 Boundary 的判定
- jinja test
- Android写的一个设置图片查看器,可以调整透明度
- Bom Shanka Machines psymmetrix Delay for Mac(音频延迟效果器)
- springboot整合sentinel
- 地理探测器“运行时系统找不到指定文件”报错
- igs无法分配驱动器映射表_CAD图纸字体不全怎么办?只要修改字体映射表就可以轻松解决了...
- 三角形内切圆半径计算
- Python格式化字符串f-string概览
- 数据分析中的口径是什么?
- 学计算机用华硕电脑,适合大学生使用的最佳笔记本电脑推荐,华硕 ZenBook UX330UA...
- 用python实现相声、评书自动下载(四)
- php简易登录注册PHP+MySQL