您不能錯過的 Safari 10.0 新特性

作為一名前端，您可以忽略昨晚 wwdc 的更新，但您一定不能錯過這篇文章。safari 10.0 随之釋出，帶來了不少新的特性，為開發者帶來福音。小編參照官方文檔，為大家整理翻譯，便于閱讀，麼麼哒。

web apis

支援indexeddb

safari 10.0 對indexeddb的html5本地存儲方式實作完整支援w3c标準。通過該api，開發者可以在web應用的用戶端實作離線存儲，或者緩存可觀數量的結構化資料。

程式設計化實作剪切和拷貝功能

通過javascript操作（如下）

能夠程式設計化地實作剪切和拷貝文本到剪貼闆。

小編說：這樣就不用麻煩地通過flash來實作了，贊。

cps 2.0

内容安全政策（content security policy，簡稱cps）增強支援至2.0版本标準。

shadow dom

shadow dom的1.0版本為web元件提供了實作基礎。你可以放心地通過shadow dom來封裝功能，進而使得其與頁面内的腳本或樣式不互相影響。

小編說：“shadow dom 是一個 html 的新規範，其允許開發者封裝自己的 html 标簽、css 樣式和 javascript 代碼。shadow dom 以及我們以後将會讨論的一些技術，使得開發人員可以建立諸如

<video></video>

這樣自定義的一級标簽。總的來說，這些新标簽和相關的 api 被稱為 web components”——引自《shadow dom：簡介》。

es6

在os x以及ios系統上的safari已經對被譽為javascript語言重大變革的——ecmascript 2015 标準（亦稱為es 6）實作完整支援。

es 國際化

融合了ecmascript 國際化 api 标準，也就是ecma-402，支援自動根據用戶端的使用者語言和區域設定數字格式化、貨币、日期時間格式化等功能，又或者是根據所提供的使用者語言和區域來設定。

dom 相容性改進

dom相容性改進使得safari 10.0 對w3c測試通過率得到提高，與其他浏覽器能夠更好地相容。

3d touch 事件

在ios上帶來了3d touch 事件——touchforcechange事件，該事件當且僅當在壓感變化時被觸發，并且該事件等價于os x上的webkit私有的webkitmouseforcechanged事件。事件中的touch對象的force屬性值變化範圍從0.0到1.0。

webgl

webgl渲染上下文參數選項antialias目前在ios上得到支援，預設值為true。

webgl渲染上下文參數選項alpha目前在ios上支援設定為false。

單個頁面允許運作的webgl上下文受到限制，限制總數為16個。當超出這個限制門檻值時，若繼續增加新的上下文會導緻最早建立的上下文被銷毀。

media

在ios上内嵌自動播放視訊

webkit-playsinline屬性得到支援後，在iphone上的safari允許視訊内嵌播放。如果屬性沒有被設定時，視訊會預設全屏播放，但使用者可以通過關閉按鈕退出全屏，而視訊會繼續内嵌播放。

在ios上，如果視訊沒有滑動條或者禁用滑動條時，在頁面加載後會自動播放。

在os x上實作畫中畫功能

在os x上的safari也帶來了畫中畫功能，使得使用者能夠将視訊獨立出來觀看、任意調整視窗大小，或者置前于其他程式視窗，甚至可以在切換桌面時保持在目前螢幕。

開發者在自定義html5 video元素時，可以通過javascript的呈現模式api（presentation mode api）來為

元素增加畫中畫功能。

text features

woff 2.0支援

新的woff2.0改進了網頁字型壓縮，是以網頁在加載字型時将花費更少的寬帶。

字型加載

－web開發者們能夠依據css font loading module level 3 規範來通過腳本應用和加載字型，同時還可以跟蹤字型的加載狀态。

當且僅當渲染文本的字元符合unicode範圍标準時，網頁字型才會被下載下傳。

layout and rendering

css3的object-position屬性支援

object-position屬性指定了替換元素（如video、img、object）在其包含容器中的對齊方式。另外，object-position屬性與 background-position屬性的使用非常相似。

支援svg的路徑裁切

如css shapes level 2 specification中的規範所說，你可以裁切通過path元素實作的各種各樣的形狀，甚至包括貝塞爾曲線路徑以及evenodd路徑填充規則。

支援 #rbga 以及 #rrggbbaa的顔色值寫法

safari支援css color level 4 specification所規範描述的#rbga 以及 #rrggbbaa形式的顔色值寫法。

border-image屬性新值支援

對于border-image屬性值round和space已經得到支援。

image-rendering屬性新值支援

對于image-rendering屬性值crisp-edges和pixelated已經得到支援，同時crisp-edges的帶有webkit字首的等效寫法是-webkit-crisp-edges或者是 -webkit-optimize-contrast。

right-to-left(從右往左書寫的)語言支援

由于rtl語言的支援，是以通過directioncss屬性，可以相應地調整滾動條的定位方式和表單的外觀樣式控制方式。

媒體查詢對廣色域屬性的支援

媒體查詢增加支援color-gamut屬性，實作對在廣色域顯示屏裝置上的css屬性和圖檔元素的樣式控制，例如：

css break相關屬性新增

break-after、break-before、break-insidecss屬性目前已得到支援

不再需要-webkit-字首的css屬性

以下css特性已經得到支援，不再需要-webkit-字首：

filter

cross-fade

image-rendering

web inspector (web檢查器)

webdriver 支援

在os x上的safari已經實作支援webdriver，能夠讓開發者實作web内容的自動化測試。它提供了一系列接口來操作dom元素和控制浏覽器的表現行為。你可以在safari的菜單中的開發選項裡選擇啟用遠端自動化測試(remote automation)，然後通過/usr/bin/safaridriver來啟動伺服器。更多的可用庫資訊可在selenium webdriver進行查閱。

記憶體調試

web檢查器新版的時間線(timelines)可以實作web應用記憶體的使用情況的可視化檢查以及繪制時堆配置設定的時間快照。這些工具能夠幫助開發者更好地定位優化web應用的記憶體性能問題。

更快的采樣分析器（？）

當調試工具被禁用時，新版的javascript分析器在高分屏下執行代碼進行采樣，有着更高性能。這讓腳本可以全速即時編譯和運作，使記錄的運作時間更加準确。

native apis

在web上調用apple pay功能

使用apple pay，開發者可以為使用者提供更安全、更便捷的支付環境來進行購物體驗，使用者隻需要在iphone上通過touch id或者apple watch就可以完成支付。為了能夠在網頁上調用apple pay功能，你可以點選applepay js framework reference了解更多。

wkwebview 頁面預覽行為

更新後的wkwebview api支援對超連結的預覽，為使用者呈現自定義視圖。通過這個api，你可以通過peek和pop手勢來觸發預覽視圖，避免跳轉去safari，除此之外，你還可以自定義預覽行為。這些新方法屬于wkuidelegate類的内容—webview:shouldpreviewelement:,webview:previewingviewcontrollerforelement:defaultactions:, 以及webview:commitpreviewingviewcontroller:

在ios 10.0版本之後，wkwebview的allowslinkpreview屬性值預設為yes

safari視圖控制器

在ios 10，safari視圖控制器允許為視圖欄的背景自定義顔色。再加上在ios 9時已經允許可以為ui控制元素自定義顔色，開發者可以通過完全地自定義safari視圖控制器外觀，給予使用者更好的統一外觀的app内置應用設計體驗。

wkwebview中的鍵盤展示

在ios 10，在鍵盤呼出時，應通過更新wkwebview對象的window.innerheight屬性而不是調用resize事件，以使得更加吻合在safari的原生表現。

safari 應用插件

現在你可以寫os x原生safari應用插件并把它放到apple store上掙錢。之前給 ios 寫的廣告攔截器（content blockers） 還可以很輕松地導出成 os x 版本，作為safari的插件。同時，注入的腳本和應用的樣式也可以應用到web内容中。