CSS中一些“奇技淫巧”

[jiangshanmeta]

声明一下，这里的奇技淫巧是指自己用得少觉得新奇而且有实际应用场景的CSS属性，而不是诸如用CSS画个IE8不支持的IE8图标之类的纯粹为了炫技然而实际没什么用途的黑魔法。

currentColor

这是一个颜色的关键字值，浏览器将对应的值解析为color的值，可以用在border 、box-shadow、background上面。有点像less、sass中的变量。用途的话张鑫旭大神已经给了几个

user-select

知乎上有一个作者保留权利，对于这种情况如果用户复制的话会复制一些版权信息。其实现上我猜是监听了copy事件之类的。我觉得知乎可以对这些作者保留权利的内容使用user-select:none;，这样对于普通用户连选择都做不到。

不过这个属性兼容性有点差，在can I use上查到的信息是目前还是乖乖加上私有前缀吧。

::selection

在CSS中伪元素常用的只有::before和::after,::selection就显得比较小众了。浏览器默认的文字选中样式是白字蓝底，说实话真的不好看。这个伪元素就给了我们控制选中状态文字样式的可能性。

本来以为萌娘百科的黑幕样式会使用这一个选择器，然而他们使用了浏览器的默认选择状态。

pointer-events:none

这个CSS让js和CSS的边界越来越模糊。想象这么一个场景：要做一个活动页，需要全屏的canvas绘制一些东西，这个canvas相当于一个遮罩层，但是我又想遮罩层下面的元素响应各种事件，尤其是点击事件。想通过js完成这件事目测要写一堆，但是对这个遮罩层使用pointer-events:none即可让这个遮罩层不响应点击事件。

content的attr

伪元素大家应该不陌生了，但是伪元素的content属性我一般用的不多，后来发现一篇文章美化加载失败的图片发现了content属性的一些玩法。我们可以通过attr属性引入一些属性的内容，比如img::after{content:'['attr(src)']'}，这样就能在图片加载不出来的时候把原始图片地址显示出来（虽然我怀疑用户能否理解）。类似的思路，我们可以显示a标签的href属性a::after{content:attr(href)}。

今天发现了一个attr结合data的一个demo

direction

这个属性有用的只有两个值：ltr、rtl，含义分别是从左向右和从右向左。猜也能猜出来默认值是ltr。或许你会认为应用rtl后会改变文字排版变成从右向左排布，然而那是writing-mode的工作（顺便说一句，目前文字排版的常规模式是从左到右从上到下，除了搞两句古诗词的文艺小清新我觉得没人会闲的改变这种模式）。那么这个direction改变的是什么的方向？ 改变的是内联元素块的左右顺序，而内联元素块内部的元素是当做一个整体看待。换句话说，direction属性可以在不改变DOM前后顺序的前提下改变内联元素块的前后顺序，听着好像低配版的flex布局的order属性。

干什么用呢？张鑫旭大神提供了例子，在不改变DOM的情况下添加类名改变弹框组件的按钮顺序。

padding

关于padding作为前端应该都不陌生，但是padding本身也是具有奇技淫巧的。

之前我利用padding实现了自适应的正方形和长宽比一定的长方形，今天学了一手新的，结合padding以及background-clip绘制图形。

在线demo.

在bootstrap导航条组件中，有一个三道杠的图标，他们的实现是使用三个span元素做的，根据张鑫旭大神的思路，这里使用一个div就完成了。对于这个需求，其实也可以通过伪元素来实现。

另外还有一些视频进度条的圆环，我结合伪元素、圆角、padding、background-clip也实现了。对于这一需求，也可以通过box-shadow来实现。

counter-reset 和 counter-increment

这两个属性属于兼容性非常好但是却被大家遗忘的属性，这个可以结合伪元素为列表添加序号。

@supports

关于这个的语法这篇文章已经提供了很好的介绍。

这个属性类似于@media，用来进行CSS支持性判断的。然而最大的问题的这个属性本身就有兼容性问题，为了说明正确使用这个属性的姿势，先来一段bootstrap的代码(在carousel的样式里)：

@media all and (transform-3d), (-webkit-transform-3d) {

}

这个其实相当于@supports的hack版本(虽然是bootstrap的，但不建议使用)，先写一套低版本兼容低版本浏览器的CSS，然后查询难兼容的属性是否支持，如果支持就覆盖掉旧的CSS用新的特性替代。