CSS3的函数和事件

很久没写过关于css的博客了，今天来记录一下最近遇到的几个新东西。

参考资料：

• css参考手册

Css3函数

之前只知道sass,less这种预处理器有函数，突然发现css3也吸收了他们的想法，搞了自己的函数。目前css的函数有两个：calc/toggle

calc

calc就是calculate的缩写，运算。支持 “+”, “-“, “*”, “/” 运算，使用标准的数学运算优先级规则，要注意运算符前后要有个空格。例如：

width: calc(100% - 100px);

从上边的例子来看，在一些场景下也会很有用的。兼容性也很不错，除了部分安卓浏览器之外，其他都已经支持了。

toggle

看到toggle第一反应是常见的切换，但实际上他的并不是这个作用。toggle能允许子孙元素使用取值序列中的值循环替换继承而来的值。例如每级ul使用不同的标记：

// 定义一个多级的ul，第一级使用disk markers，子孙级依次使用circle, square, box。
ul {
    list-style-type: toggle(disk, circle, square, box);
}

toggle目前不被任何浏览器兼容，可以说根本没啥卵用，这里就当是给自己科普一下吧。

Css3事件

pointer-events

pointer-events能够设置或检索在何时成为属性事件的target。常用的取值有auto/none，其他值只能应用在SVG上。当值为none时，该元素将不会作为点击事件的target，为auto时会。

应用场景： 我们常见的很多弹框和输入框，都会在激活时增加一个半透明的遮罩，当我们点击遮罩时，便会关闭弹框或取消输入。其实这个遮罩层一直都在整个界面之上，平时是透明无色的，并且pointer-event: none;，点击会穿透他，不影响其他元素的点击事件；当激活弹框或输入框的时候，给他一个半透明背景色，并且pointer-event: auto；，他就可以作为点击事件的target了。能够触发他对应的点击事件，然后执行相应的关闭逻辑。