很久没写过关于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
了。能够触发他对应的点击事件,然后执行相应的关闭逻辑。