CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页（如打印）时候的样式渲染表现。
默认情况下，元素的跨行或跨列渲染都是裁剪分割，各得一部分，借助box-decoration-break属性，可以让换行，或者换列的各部分元素按照独立的样式进行渲染，活用这种特性，可以让我们的布局和样式表现更上一层。
CSS :placeholder-shown伪类实现Material Design占位符交互效果
2018年12月25日 by 阅读 28562 次, 今日 3 次
Material Design规范中占位符交互效果是这样的：focus输入框的时候，placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript，实际上，纯CSS就能搞定之，就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错，可以在实际项目中应用。究竟如何实现？有没有这么神奇？一起进来看看吧~
从天猫某活动视频不必要的3次请求说起
2018年12月24日 by 阅读 32049 次, 今日 10 次
我们在移动端做H5开发的时候，有时候会用到MP4视频，对于一些酷效果，是性价比最高的方式。然而，很多前端开发在使用这些视频的时候没有注意，或者根本就不知道视频的某些信息的位置会影响浏览器的请求个数，从而影响网页性能。
CSS vector-effect与SVG stroke描边缩放
2018年12月24日 by 阅读 20817 次
CSS ::backdrop伪元素是干嘛用的？
2018年12月22日 by 阅读 26907 次, 今日 8 次
周知：CSS -webkit-伪元素选择器不再导致整行无效
2018年12月17日 by 阅读 18564 次, 今日 5 次
通常，如果选择器链或组中有无效的伪元素或伪类，则整个选择器列表无效。如果伪元素（但不是伪类）具有-webkit-前缀，那么对于Firefox 63+，Blink、Webkit和Gecko浏览器认为它是有效的，而不会使选择器列表无效。
使用wavesurfer.js显示mp3 audio音频的波形图
2018年12月9日 by 阅读 46745 次, 今日 13 次
如果你想实现右图所示的波形图效果，可以借助wavesurfer.js。wavesurfer.js上手简单，扩展丰富，有多达35个可选参数，什么音频速率控制，波形图大小尺寸啊，都完全不在话下。还有好多种方法，对了，还有很多额外的插件，丰富的使用案例。
基本上，你要想对音频进行解析，显示个图形啥的，不要多想了，就wavesurfer，童叟无欺，老少皆宜，居家旅行，开发必备。
CSS font-feature-settings 50+关键字属性值完整介绍
2018年12月9日 by 阅读 29573 次, 今日 7 次
CSS font-feature-settings属性控制OpenType字体中的高级排版功能，也就是可以让OpenType字体排版更加精致，符合实际开发需要。
兼容性很不错，支持的特征关键标签也很多，都是4个字母，全部加起来，可能上百要的，本文主要介绍浏览器能够支持的一些特征标签。
CSS蛋疼应用之：数据上报和HTML验证
2018年12月6日 by 阅读 19541 次, 今日 1 次
介绍两个我觉得比较蛋疼但有意思的CSS应用，一个就是纯CSS实现数据上报，用户行为跟踪；另外一个就是纯CSS实现HTML验证，并且在页面上进行提示。比较有脑洞，有想法，虽然以后估计用不到，但是，其中新奇的思路说不定对于我们开阔眼界很有帮助。
HandBrake乃MP4免费压缩webm转换工具不二之选
2018年12月3日 by 阅读 24057 次, 今日 6 次
HandBrake是视频处理的软件，开源，免费，而且对web视频呈现非常友好。对于我们开发者而言，用来进行MP4视频压缩可谓是不二之选，无需特别技巧便可直接将各类视频格式转换成MP4格式，可以指定帧率，画面质量，声音速率，以及画面大小来实现我们的压缩效果，极小尺寸，同时视频依旧高质量，运行稳定，非常推荐。
我的应用
我的应用