Material Design规范中占位符交互效果是这样的：focus输入框的时候，placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript，实际上，纯CSS就能搞定之，就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错，可以在实际项目中应用。究竟如何实现？有没有这么神奇？一起进来看看吧~
“CSS相关”目录存档
CSS :placeholder-shown伪类实现Material Design占位符交互效果
2018年12月25日，星期二CSS vector-effect与SVG stroke描边缩放
2018年12月24日，星期一
CSS ::backdrop伪元素是干嘛用的？
2018年12月22日，星期六
周知：CSS -webkit-伪元素选择器不再导致整行无效
2018年12月17日，星期一
通常，如果选择器链或组中有无效的伪元素或伪类，则整个选择器列表无效。如果伪元素（但不是伪类）具有-webkit-前缀，那么对于Firefox 63+，Blink、Webkit和Gecko浏览器认为它是有效的，而不会使选择器列表无效。
CSS font-feature-settings 50+关键字属性值完整介绍
2018年12月9日，星期日
CSS font-feature-settings属性控制OpenType字体中的高级排版功能，也就是可以让OpenType字体排版更加精致，符合实际开发需要。
兼容性很不错，支持的特征关键标签也很多，都是4个字母，全部加起来，可能上百要的，本文主要介绍浏览器能够支持的一些特征标签。
CSS蛋疼应用之：数据上报和HTML验证
2018年12月6日，星期四
介绍两个我觉得比较蛋疼但有意思的CSS应用，一个就是纯CSS实现数据上报，用户行为跟踪；另外一个就是纯CSS实现HTML验证，并且在页面上进行提示。比较有脑洞，有想法，虽然以后估计用不到，但是，其中新奇的思路说不定对于我们开阔眼界很有帮助。
杀了个回马枪，还是说说position:sticky吧
2018年12月2日，星期日
position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，Chrome什么时候杀了个回马枪，居然又支持了。眼瞅着，各个浏览器纷纷立了山头，要必要关心关心position:sticky了，不要被人留下厚此薄彼的口舌。结果一关心，竟然发现，sticky定位要比预想的更强大，更有趣……
大侠，请留步，要不过来了解下CSS Scroll Snap？
2018年11月28日，星期三
CSS Scroll Snap是CSS中一个独立的模块，可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置。虽然Scroll Snap最后的定位效果是平滑的，但是Scroll Snap的作用不是平滑滚动，而是元素定位增强。要想实现平滑滚动，请使用CSS scroll-behavior属性。
5分钟快速了解下CSS4 color-adjust属性
2018年11月27日，星期二
CSS届的绘图板CSS Paint API简介
2018年11月26日，星期一
本文介绍CSS Paint API，CSS Paint API是CSS Houdini的一部分，是目前应用比较多的API之一，其是做什么用的呢？有什么好处呢？本文就将通过一个简单的案例，带你快速了解CSS Paint API，本文属于前端技术广度方面的学习，博闻强识。
我的应用
我的应用