iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。
元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。
ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0
）だそうです…
UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに
Webブラウジングをしている最中は、フルスクリーンがデフォルトになりました。ホスト名部分をクリックしたり、トップに戻るようスクロールを始めた時に、URLバーとツールバーが表示されます。
Webページはフルスクリーンに近いサイズで表示される
ユーザーの操作に応じてツールバーが出現する
問題は、ツールバーの表示／非表示が切り替わった際にresizeイベントが発生せず、メディアクエリなどでも検知できないことです。これにより、画面の高さが変わったことをアプリが検知できないということになり、なるべく固定の幅や高さを確保しようとするゲームなどでは、時に大きな問題になります。 また、ネイティブではないスクロール（iframeやoverflow:scroll、JavaScriptベースのスクロールなど）を使用しているアプリの場合は、ツールバーが表示されっぱなしになってしまう事があります。
Appleのサイトもネイティブのスクロールを使用していないためか、URLバーとツールバーが表示され続ける
新しいジェスチャー
新しいSafariでは、画面端からスワイプするというジェスチャーに操作が割り当てられました。 画面の下端から上に向かってジェスチャーすることでコントロールセンターを表示でき、画面の横端から右／左にスワイプすることで「戻る／進む」といったナビゲーションを行えます。
スワイプ操作を取り扱っているWebアプリは、画面端に適切なマージンを設けていない限り、これらのジェスチャーと被ってしまう可能性があります。
また、右・左のスワイプ操作に割り当てられている「戻る／進む」と言ったナビゲーションは、ナビゲーション前後のページが重ねて表示されます。こうした動作は、履歴管理API（History API）を用いる単一ページアプリケーションでは多少問題になるかもしれません。同じアプリのUIが重ねて表示されることになるためです。
History APIを使用するアプリケーションでは、同じアプリのUIが重ねて表示されてしまう
HTML5関連の変更
- track要素のサポート・・・動画や音声に対して、文字による補足情報（字幕やチャプタータイトルなど）を追加できる、track要素がサポートされました。JavaScript API（webkitHasClosedCaptions）やCSS（::cue擬似要素）もサポートされています。ただし、::cue擬似要素で使用できるプロパティはtext-shadow, opacity, outlineだけです。
- progress要素のサポート・・・進捗状況を表すprogress要素がサポートされました。また、meter要素は
サポートしようとした形跡はあるものの、画面に何も表示されないというバグがあるそうです(^^;意図的に無効にされており、利用できません。(エキスパートNo.18 矢倉さんの指摘により修正) - output要素のサポート・・・プログラムによる計算結果を意味すすoutput要素がサポートされました。
- input要素のdatetimeタイプが削除された・・・代わりに、
dateタイプとtimeタイプを合わせて使うことが推奨されています。datetime-localタイプを使用してください。(エキスパートNo.18 矢倉さんの指摘により修正) - iframe要素のseamless属性がサポートされた・・・シームレスなiframeには、親要素のCSSが適用されます。
JavaScript API関連の変更
- Page Visibility APIのサポート・・・ページの表示状態（表に表示されているか、裏に回っているか）を検知できるAPI
XMLHttpRequest Level2のフルサポート・・・blobの送受信やアップロードの進捗状況を取得すると言った事が可能になりました。(エキスパートNo.18 矢倉さんの指摘により削除。XMLHttpRequest Level2は、仕様としてはもはや存在せず、XMLHttpRequestの仕様に統合されています)- AirPlay APIが導入されました・・・Apple TVと連携したAirPlayを、Webアプリケーションから制御することができます。
- CanvasのAPIが拡充・・・globalCompositeOperation属性やPathクラスがサポートされました。
- Shared Workerが削除・・・複数のWebページ間で一つのワーカーインスタンスを共有するためのShared Workerが削除されました。
- WebSpeech Synthesis APIがサポートされましたが、正しく動作しません。
- MutationObserverがサポートされました。
- requestAnimationFrameからwebkitプレフィックスが取れました。
- transitionendイベント名からwebkitプレフィックスが取れました。
- Web Audio APIからwebkitプレフィックスが取れました。
- hidden属性がサポートされました。
- visibilityState属性がサポートされました。
- window.doNotTrackプロパティがサポートされました。
- Web SQL Database APIが、5MB以上のストレージ容量を扱えなくなりました（以前は上限50MBまで利用可能だった）。5MB以上のデータを保存しようとすると例外（DOMException）が発生します。
CSS関連の変更
position:stickyのサポート・・・
position: stickyを指定された要素は、スクロールによって表示領域から追い出されそうになると、画面端に吸い付くように表示されます。こちらのデモで動作を確認することができます。
position: stickyをMobile Safariで動作させた様子
CSS Regions・・・複数の要素にまたがってコンテンツを「流しこむ」ことができ、雑誌のようなレイアウトを実現できます。こちらのデモを試してみてください。
- CSS Grid Layout・・・要素をグリッド状に配置することのできる仕様です。うまく動作しないそうです。
- CSS Flexbox・・・コンテナ上で要素を縦横に柔軟に配置することのできる仕様です。
動的なフォント・・・筆者も詳細は理解できていないのですが、「読みやすさを向上するために、現在のフォントサイズをベースとして、フォントの重さや文字の間隔などが調整される、とあります。以下に示すような、
-apple-というプレフィックスを持つ定数を多数利用してフォント定義を行っていくようです。h1 { font: -apple-system-headline1 } p { font: -apple-system-body }
CSS Transitionからプレフィックスが取れた
- 丸や四角、多角形などの図形にしたがってコンテンツの切り抜きを行えるCSSクリップパスのサポート。
- フォントのカーニングや合字がデフォルトで利用可能になった
- box-decoration-break: slice/cloneのサポート
- tab-sizeのサポート
- overflow-wrap: normal/hypernate/break-word
- 長さの単位としてのchやvmaxのサポート
- mask-type: alphaのサポート
終わりに
iOS 7のMobile Safariは、Indexed Database APIやWebGL、WebRTCなどの期待される機能は搭載されませんでしたが、細かいアップデートがたくさん行われています。 特に、track要素やCSS Flexboxのサポートは嬉しいですね。 ただ、バグが多いらしいので、Web開発者は頭を悩ませる日々が続きそうです…
この記事では、Webページを記述する際にポイントとなりそうな変更点に絞ってご紹介しました。 繰り返しになりますが、この記事の元になったMaximiliano Firtman氏（@firt）のブログ記事は素晴らしいリソースですので、ぜひ一度目を通してみてください。
