IOS9对于WEB前端来说有哪些改变?
注:小编是一个有轻微处女座情节的人,所以很多内容为了方便阅读和格式美观,我都做成了图片,上传后头条都压缩了图片质量,但是不影响大家阅读,因为可以点击放大,哇哈哈!
随着9月25日iPhone6s的发货,早已预订的人是不是心里开始有点小激动了。那么它的到来对于前端来说有哪些新东西?
Force Touch
针对此次的3D Touch 页面中多了三个事件,当然了,以下事件请自带webkit前缀
1. mouseforcewillbegin
2. mouseforcedown
3. mousefoeceupJavascript代码
看字面意思就能理解了,用法和其他事件一样,只是奇怪为何不起名为forcetouchdown,forcetouchup ??
backdrop-filter
iOS9 中的Safari支持背景模糊这个CSS属性
CSS代码
效果如下:
更多filter查看:https://drafts.fxtf.org/filters/#typedef-filter-function-list
CSS Supports
iOS9中,CSS也可以做一些特性检测,即@supports,用法和media query一样简单,例如
CSS代码
当然也可以用Javascript检测
Javascript代码
CSS Scroll Snapping
HTML代码
CSS代码
这个属性是干嘛的,看下面的图就知道了,除了从最后变换到起始位置不是很自然以外,中间的过程是不是屌屌的?!
Split View
分屏模式,在这种模式下,浏览器可能会呈现如下三种状态(头疼的事情就来了)
1. 以1/3屏幕宽度呈现
2. 以1/2屏幕宽度呈现
3. 以2/3屏幕宽度呈现
Picture in Picture
JS有了判断画中画的API,可以让我们主动切换视频的展示模式,如下:
Javascript代码
ECMAScript 6 Enhancements
下面的ECMAScript 6 Safari现在支持的内容:
Classes
Computed Properties
Weak Set
Number Object
Octal and Binary Literals
Symbol Objects
Template Literals
System Font Support
苹果操作系统之间自动切换两个光学,size-specific字体家庭适应新的系统字体,“San Francisco”。您可以使用以下CSS规则网络智能切换字体以适应操作系统的字体。
font-family: -apple-system, sans-serif;
除了字体,iOS允许您指定系统的尺寸和重量文本样式。使用CSS字体属性与新支持下面的文本样式的关键词。
Unprefixed CSS Properties
以下属性现在完全支持Safari,不用添加webkit -前缀。