iOS9_changes

このエントリでは、iOS 9 における Mobile Safari の変更点について、気になった点をまとめています。
このエントリは推敲が終わっていません。

source: https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW6

Support Force Touch Event

マウスイベントの一部として、フォースタッチイベントがサポートされました。これは iPhone 6s などの今後発売される新しいデバイスで利用可能になると思われます。

• webkitmouseforcewillbegin
• webkitmouseforcedown
• webkitmouseforceup
• webkitmouseforcechanged
• MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
• MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN

広告をブロックする Safari 拡張機能を作成可能に

JSON でブロックしたいターゲットを指定できるようです。 詳細はあとから追記します。

[
    {
        "action": {
            "type": "block"
        },
        "trigger": {
            "url-filter": "webkit.org/images/icon-gold.png"
        }
    },
    {
        "action": {
            "selector": "a[href^=\"http://nightly.webkit.org/\"]",
            "type": "css-display-none"
        },
        "trigger": {
            "url-filter": ".*"
        }
    }
]

Picture in Picture モードのサポート

iOS 9 から iPad で画面分割モードが追加されています。
その中の１つに、ピクチャー・イン・ピクチャーモードがあり、画面の四隅で YouTube などの動画をオーバレイ状態で再生できるようです

それに伴い、動画コンテンツのプレゼンテーションモードをコントロールするための仕組みが追加されました。

if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
    // Toggle PiP when the user clicks the button.
    pipButtonElement.addEventListener("click", function(event) {
        video.webkitSetPresentationMode(video.webkitPresentationMode === "optimized" ? "inline" : "optimized");
    });
} else {
    pipButtonElement.disabled = true;
}

ピクチャー・イン・ピクチャーは、大きめの TV に搭載されているあの機能ですね。

ピン止めされたタブと、SVG アイコンをサポート

タブを固定(ピン止め)できるようになるとの事です。
また SVG アイコンが利用可能になるとのことです。sizes="any" mask が特徴的です。

<link rel="icon" sizes="any" mask href="website_icon.svg">

CSS Scroll Snapping のサポート

ユーザの操作を起点としたコンテンツのスクロール終了時に、スナップをどうするか指定できます (ここで言うスナップとは、カルーセルUIに並べられた写真をスッスッと左右に指で送る動作の事です)。

言葉で説明するとちょっとわかりづらいので動画も参照してください。

• -webkit-scroll-snap-type: mandatory;
• -webkit-scroll-snap-points-y:
• -webkit-scroll-snap-points-x:
• -webkit-scroll-snap-destination:50%50%;
• -webkit-scroll-snap-coordinate:0%0%;

Backdrop Filters のバリエーションが追加

backdrop-filter: で様々なエフェクトを指定できるようになりました。 CSS Filter ではなかなか表現できなかった事が、より簡単に表現可能になっています。
特に blur は OS の UI と親和性も高いため、使い勝手のよい表現ですね。

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

Other

より細かな変更点について知りたい方は https://github.com/uupaa/WebKitChangeLog/wiki/iOS9.x.x.changesets も参照してください