**作者:**big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋!
随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一轮的研究。那么它的到来对于前端来说有哪些新东西?
Force Touch
针对此次的3D Touch 页面中多了三个事件,当然了,以下事件请自带webkit前缀
mouseforcewillbegin
mouseforcedown
mousefoeceup
Javascript代码
看字面意思就能理解了,用法和其他事件一样,只是奇怪为何不起名为forcetouchdown,forcetouchup ??
backdrop-filter
iOS9 中的Safari支持背景模糊这个CSS属性
CSS代码
效果如下:
CSS Supports
iOS9中,CSS也可以做一些特性检测,即@supports,用法和media query一样简单,例如
CSS代码
当然也可以用Javascript检测
Javascript代码
CSS Scroll Snapping
HTML代码
CSS代码
这个属性是干嘛的,看下面的图就知道了,除了从最后变换到起始位置不是很自然以外,中间的过程是不是屌屌的?!深入学习
Split View
分屏模式,在这种模式下,浏览器可能会呈现如下三种状态(头疼的事情就来了)
以1/3屏幕宽度呈现
以1/2屏幕宽度呈现
以2/3屏幕宽度呈现
Picture in Picture
JS有了判断画中画的API,可以让我们主动切换视频的展示模式,如下:
Javascript代码
其他更新
更好的支持ES6:classes,computed properties,template literals and weak sets
支持CSS4的伪类选择器::not,:matches,:any-link,:placeholder-shown,:read-write,:read-only