「Safari 10.1」で新たにサポートされるCSSグリッド・Fetch・Download属性などの新機能・新仕様をAppleが公開

By iphonedigital

Appleが開発するウェブブラウザ・Safariの最新版となる「Safari 10.1」の新機能や仕様が開発者向けページのGuides and Sample Code上で公開されました。iOSアプリ内で呼び出されることも多いので、Safariのバージョンアップはその後の開発に影響し、地味ながらも少しずつアプリ界隈などを含めて変えていくため、今後の動きを知る上でも重要なバージョンアップです。

Safari 10.1
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html

◆Web API
・Fetch
Fetchはウェブ向けにデザインされた「XMLHttpRequest」の代替となるフレキシブルで総括的なリクエスト＆レスポンスAPI。Fetch APIを使えば簡単にレスポンスヘッダーにアクセス可能で、CORS要求のための内蔵サポートもあります。なお、FetchはJavaScriptのPromiseを使用してリザルトをより扱いやすいようにしています。

・IndexedDB 2.0
SafariのIndexedDBインプリメンテーションは素早く、完全に標準準拠で、新しいIndexedDB 2.0の新機能もサポートします。

・Custom Elements
Custom Elementsは、値の変更に反応するカスタムリアクションコールバックを含むHTML要素を明らかにするためのメカニズムを提供します。2016年に導入されたスロットベースのShadow DOM APIと結合することで、Custom Elementsは再利用可能なコンポーネントの生成が可能になります。

・Input Events
Input Events(入力イベント)はウェブ上でリッチテキストの編集作業を行う際のプロセスを簡易化するためのAPIです。Input Events APIは新しい入力前のイベントを加え、デフォルトの編集行動を遮り、入力イベントを新しい属性に強化します。

・ポインター・ロック
macOSのSafariでは、ユーザーのジェスチャーによりポインターをロックすることができます。マウスの生動作データが利用できる「movementX」といったマウスイベントインターフェースで拡張。

ポインターがロックされた際、ユーザーはマウスカーソルが隠されたことを示すバナーを見ることができ、「Escape」キーを押せばポインターのロックを解除可能です。

・Gamepad
Gamepad APIにより、接続したゲームパッドデバイスでウェブコンテンツへの入力が可能になります。ゲームパッドにはさまざまなレイアウトのものがあり、ボタンやジョイスティックなどさまざまですが、コードによりこれらを簡易化して標準的なゲームパッドのレイアウトにします。

◆JavaScript
・ECMAScript 2016とECMAScript 2017
ECMAScript 2016とECMAScript 2017のサポートは、macOSとiOSのSafariで利用可能です。これによりasyncやawait syntaxのサポートも加わり、共有メモリオブジェクトやAtomics、Shared Array Buffersもサポートします。

◆HTML
・インタラクティブなバリデーションフォームのサポート
新しくインタラクティブなバリデーションフォームをサポートしたことで、フォームが提出されると自動的にユーザーデータが有効になるようなフォームの作成が簡単になります。この機能は、どんな種類のデータをフォームが必要としており、どのように正しい情報を入力すればよいかを理解する助けになります。

・HTML5のDownload属性
アンカー属性として、リンクターゲットとして特定のファイルをダウンロードさせるDownload属性を、ページ遷移のリンクの代わりに指定することができるようになります。Download属性が指定されたリンクをクリックすると、ファイルとしてダウンロードされるようになります。オプション値としてファイル名を指定してダウンロードさせることもできます。

◆Layout and Rendering
・CSSディープカラーのサポート
以前までのCSSは、色域がsRGBに制限されていました。しかし今、より広域な「Display P3」のような色空間を新しいカラー機能とともに利用することができるようになります。例えば「Display P3」の色空間を使うためには以下のようにセットします。

em { color: color(p3 50 250 100); }

詳細な情報についてはCSS Color Module Level 4 Specificationを参照。

・CSSグリッドレイアウト
SafariはCSSグリッド（日本語訳こちら）をサポートし、ビューポートの制限に基づいて反応する複雑なレイアウトを作ることができるようになります。ページを行と列に基づくいくつものエリアに分割し、グリッドコンテナ同士の関係に基づくフレキシビリティを実現します。

・固定位置のエレメントについての挙動をアップデート
Safariはビューポートについて、fixedとstickyの値を取る要素もピンチズームが可能になります。これによりiOSの入力フィールドでfixedとstickyを無効化する必要がなくなります。

◆Safari Browser Behaviors
・フルスクリーンでのキーボードインプットを実現
macOSのSafariにおいて、キーボードインプットはウェブページ内だけに制限されなくなり、HTML5のフルスクリーン表示もサポートします。

◆Web Inspector
・Web Inspectorによるデバッグ機能をアップデート
Web Inspector機能のデバッガータブにおいてWeb Worker JavaScriptスレッドによるデバッグ機能を追加。デバッガータブ内において現在実行しているところなどのコードをハイライトすることで段階的なデバッグを可能にします。新しい段階的ハイライトは複雑なコントロールフローやシングルラインで多くの式が含まれるJavaScriptのデバッグをよりやりやすくしてくれます。

◆アクセシビリティ
・Media Queryのモーションを減少
「prefers-reduced-motion」をMedia Queryで使うことで、システム設定でモーションを減らすように設定している特定ユーザーに対し、大きなエリアでのモーションを減らすスタイルを作ることが可能。

◆Safari App Extensions
ツールバーアイテムの画像を動的変更したり、コンテキストメニューのテキストを確認・動的変更したり、アプリ込みでSafariのアプリ拡張と直接通信できるようになるのがSafariの機能拡張「Safari App Extensions」です。また、SafariのApp Extensionsはコンテンツブロッカーと関連づけられており、再読込したり、現在の状態を確認したりすることができます。

Safariの拡張機能のプリファレンスはローカライズの説明、ディスプレイ名、SafariのApp Extensionsのバージョン番号を表示することができ、SafariのApp Extensionsによってよりニュアンスの違うメッセージを許可することができます。

なお、Safari 10.1はSafari Technology Previewからデベロッパー向けに提供されています。