CSS ::backdrop伪元素可以控制视频，弹框或者普通全屏元素的黑色蒙层背景样式的。兼容性还很不错，实际项目中可以用一用。
CSS ::backdrop伪元素是干嘛用的？
2018年12月22日 by 阅读 27249 次, 今日 18 次周知：CSS -webkit-伪元素选择器不再导致整行无效
2018年12月17日 by 阅读 18769 次, 今日 20 次
通常，如果选择器链或组中有无效的伪元素或伪类，则整个选择器列表无效。如果伪元素（但不是伪类）具有-webkit-前缀，那么对于Firefox 63+，Blink、Webkit和Gecko浏览器认为它是有效的，而不会使选择器列表无效。
使用wavesurfer.js显示mp3 audio音频的波形图
2018年12月9日 by 阅读 47852 次, 今日 33 次
如果你想实现右图所示的波形图效果，可以借助wavesurfer.js。wavesurfer.js上手简单，扩展丰富，有多达35个可选参数，什么音频速率控制，波形图大小尺寸啊，都完全不在话下。还有好多种方法，对了，还有很多额外的插件，丰富的使用案例。
基本上，你要想对音频进行解析，显示个图形啥的，不要多想了，就wavesurfer，童叟无欺，老少皆宜，居家旅行，开发必备。
CSS font-feature-settings 50+关键字属性值完整介绍
2018年12月9日 by 阅读 30084 次, 今日 27 次
CSS font-feature-settings属性控制OpenType字体中的高级排版功能，也就是可以让OpenType字体排版更加精致，符合实际开发需要。
兼容性很不错，支持的特征关键标签也很多，都是4个字母，全部加起来，可能上百要的，本文主要介绍浏览器能够支持的一些特征标签。
CSS蛋疼应用之：数据上报和HTML验证
2018年12月6日 by 阅读 19720 次, 今日 16 次
介绍两个我觉得比较蛋疼但有意思的CSS应用，一个就是纯CSS实现数据上报，用户行为跟踪；另外一个就是纯CSS实现HTML验证，并且在页面上进行提示。比较有脑洞，有想法，虽然以后估计用不到，但是，其中新奇的思路说不定对于我们开阔眼界很有帮助。
HandBrake乃MP4免费压缩webm转换工具不二之选
2018年12月3日 by 阅读 24404 次, 今日 23 次
HandBrake是视频处理的软件，开源，免费，而且对web视频呈现非常友好。对于我们开发者而言，用来进行MP4视频压缩可谓是不二之选，无需特别技巧便可直接将各类视频格式转换成MP4格式，可以指定帧率，画面质量，声音速率，以及画面大小来实现我们的压缩效果，极小尺寸，同时视频依旧高质量，运行稳定，非常推荐。
HTML5 video视频播放Picture-in-Picture画中画技术
2018年12月2日 by 阅读 43439 次, 今日 27 次
Chrome 70已经原生支持HTML5视频播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。实际上，这里的画中画要比当前视频网站的画中画要更强，强在其是一个客户端层面的接口，小视频窗口是操作系统窗体级别的，就算你的浏览器切换到其他选项卡页面，或者最小化，也会在你电脑右下角播放视频。
于是乎，我们可以一边码代码一边看网页小视频了！
杀了个回马枪，还是说说position:sticky吧
2018年12月2日 by 阅读 192307 次, 今日 52 次
position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，Chrome什么时候杀了个回马枪，居然又支持了。眼瞅着，各个浏览器纷纷立了山头，要必要关心关心position:sticky了，不要被人留下厚此薄彼的口舌。结果一关心，竟然发现，sticky定位要比预想的更强大，更有趣……
大侠，请留步，要不过来了解下CSS Scroll Snap？
2018年11月28日 by 阅读 51165 次, 今日 26 次
CSS Scroll Snap是CSS中一个独立的模块，可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置。虽然Scroll Snap最后的定位效果是平滑的，但是Scroll Snap的作用不是平滑滚动，而是元素定位增强。要想实现平滑滚动，请使用CSS scroll-behavior属性。
我的应用
我的应用