前端杂谈 - 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 -前缀。