Safari – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 Windows Creators Update,Firefox 53,Chrome 58リリース──2017年4月のブラウザ関連ニュース /myakura/23905/ Thu, 29 Jun 2017 00:30:07 +0000 /?p=23905 連載： WEB標準化動向 (23)

4月にはFirefox 53とChrome 58がリリースされました。そして、Windows Creators Updateが一般公開され、Edgeも新しいEdgeHTML 15が搭載されたバージョンに更新されました。

また、Firefoxのリリースサイクルが変更され、新しい機能が実装されてからリリースされるまでの実装が短縮されることになりました。

Windows Creators Updateリリース、EdgeもEdgeHTML 15に更新

4月11日にWindows Creators Updateが公開され、Microsoft Edgeも更新されました。

開いているタブをよけておく機能の追加や、タブのサムネイルを表示するなど、ブラウザとしての使い勝手にも手が入りました。

レンダリングエンジンであるEdgeHTMLもバージョンが15に更新されており、新機能が追加されています。開発ガイドが公開されています。

Payment Request API、CSS Custom Propertiesなどは、Edgeのブログでも過去に取り上げられていますね。

Intersection Observerの実装はうれしいですね。これは要素とブラウザの表示領域が交差したことを検知するAPIで、画像などの遅延ロードやパララックス的な表現の実装に役立ちます。FRESH!のパフォーマンス改善手法のひとつとしても取り上げられました。

JavaScriptでは、Async Functions（async/await）の実装がうれしいです。今回Edgeがサポートしたので、主要ブラウザの最新バージョンすべてが対応しました。

目立たない機能の実装も…あるかも

Dev Guideの下に、実装されたAPIの一覧があったので、ブログなどでは取り上げられない機能のうち、気になったものをチェックしました。

  • Element.closest()、Element.matches()の実装
  • text-combine-uprightプロパティ（接頭辞なし）の実装
  • outline-offsetプロパティの実装
  • -webkit-text-strokeプロパティとサブプロパティの実装
  • translate、scale、rotateプロパティの実装

最後のtranslate、scale、rotateプロパティですが、これはCSS Transformsの変換関数だったtranslate()、scale()、rotate()をプロパティ化したものです。プロパティになったので記述の短縮になりますし、書き順で結果が変わってしまうことのあるtranslateプロパティでの指定よりも、意図した効果を実現しやすくなります。

すでにChromeで実装されており、Edgeでの実装もとてもうれしい…と書いていたのですが、手元でちょっと試したところ未知のプロパティとなってしまいました…秋の新しいバージョンに期待します。

Firefoxのリリースプロセスに変更、Auroraチャンネルが廃止

4月18日より、Firefoxのリリースサイクルが変更されました。

これまでのFirefoxは、「Nightly → Aurora → Beta → Release」と4つのチャンネルに分かれていました。このうち、Auroraチャンネルが廃止され、「Nightly → Beta → Release」と、1サイクル短くなります。これにより、新しく実装された機能が手元に届くまでの期間が、これまでより1サイクルぶん（6〜8週）短くなります。

Auroraチャンネルはこれまで、Developer Editionという名前のビルドとして提供されていました。Developer Editionというシステムは廃止されないようですが、中身はBetaチャンネルになります。Beta版とのリリースとの違いは、Developer Editionはこれまで通り異なるプロファイルが作られることなどにあります。

Auroraチャンネルの廃止によって、4月19日にAuroraチャンネルに移行予定だったFirefox 55は次のサイクルまでNightlyに留まります。Nightlyが2サイクル分続くので、Firefox 55で導入される機能の数がいつもより増えるかもしれませんね。

Firefox 53リリース

4月19日に、Firefox 53がリリースされました。

今バージョンからWindows XPとVistaのサポートがされなくなった（Firefox 52 ESRのサポートに移行）ほか、Macでは64ビット版のみになったことでアプリケーションのファイルサイズが減少しました。UIまわりでは、パーミッション関連のUIが改善されています。

また、Firefox Developers Editionのテーマだった「Compact」テーマがリリース版にも同梱されました。

スクリーンショット：FirefoxのCompact Lightテーマ

グラデーションがなくなりフラットになった。画像はLightだがDarkテーマも。

レンダリングエンジン周りでは、以下のあたらしい機能がサポートされています。

CSS Textの実装で日本語の扱いが向上

Firefox 52から部分的にサポートされていたのですが、CSS Text Level 3の「Segment Break Transformation Rules」が実装され、日本語や中国語の文字間などに改行がある際の処理が変更されました。

Webページを表示するとき、HTML中の改行は半角スペースに変換されて表示されます。

<p>Hello↵
World</p>

こういう風に、改行前後に空白がなくても、「HelloWorld」ではなく「Hello World」と表示されます。この処理、単語の区切りに空白を使う言語ではよいのですが、日本語などでは不自然な箇所で空白が入ってしまい煩わしいです。

CSS Text Level 3では、改行前後の文字を見て、それが日本語や中国語のものであれば、その改行を除去して扱うという仕様が加わりました。以下のエントリで細かくまとめられています。

この仕様の実装によって日本語内での改行が省かれるので、改行がつくる空白に依存しているコンテンツがあれば、見た目に影響がでるかと思います。

display: flow-root

displayプロパティの値にflow-rootが加わりました。floatの解除には::afterを使う、display: tableを使うなどがありましたが、ちゃんとした方法になります。

CSS Alignmnent Level 3のplace-items, place-self, place-contentがサポートされました。FlexboxやGridで使われるalign-items/align-self/align-contentとjustify-items/justify-self/justify-contentをまとめて指定するプロパティです。

caret-colorプロパティ

先月リリースされたChrome 57でサポートされた、caret-colorプロパティがFirefoxにも導入されました。3月にリリースされたChrome 57でサポートされており、そちらで簡単に取り上げています。

CSS Transitions仕様に追加されたtransitionstart, transitionrun, transitioncancelイベントがサポートされました。MozillaのBrian Birtlesさんのブログエントリで、導入の経緯も含め簡単に紹介されています。

その他

アルファチャンネルを持つWebMがサポートされました。Chromeチームがつくったデモで確認できます（だいぶ気味の悪いデモですが…）

ビデオ関連では、video要素などのplay()メソッドがPromiseを返すようになりました。

auxclickイベントが実装されました。主要なボタン以外のボタンがクリックされたときなどに発火するイベントです。ChromeもChrome 55から実装しています。

Chrome 58リリース

abbrのデフォルトスタイルが変更に

略語をマークアップするabbr要素のデフォルトスタイルが変更され、CSS3のtext-decorationプロパティを使うようになりました。以下のスタイルが、ChromeのUAスタイルシートに追加されています。

abbr[title], acronym[title] {
    text-decoration: dotted underline;
}

FirefoxもFirefox 40で変更されています。

多くはないと思いますが、使われているサイトでは、二重線になってしまうケースがあるかもしれません。

color-gamut媒体特性のサポート

メディアクエリーのcolor-gamut媒体特性がサポートされました。

color-gamutはディスプレイの色域が特定ものにマッチするかを調べる媒体特性で、Safari 10.1でサポートされています。

]]> Firefox, Chrome, SafariがCSS Gridに一斉対応ほか──2017年2月と3月のブラウザ関連ニュース /myakura/22818/ Thu, 13 Apr 2017 04:00:44 +0000 /?p=22818 連載： WEB標準化動向 (22)

2月はブラウザのリリースがなかったのですが、3月にはFirefox 52, Chrome 57, Safari 10.1がリリースされました。いくつかのブラウザに共通して大きな機能追加があったので、まずはそこから紹介します。個々のリリースについては、そのあとで取り上げます。

Firefox, Chrome, SafariがCSS Gridに一斉対応

CSS Grid LayoutがFirefox 52, Chrome 57, Safari 10.1で有効になりました。長らく試験的な実装状態が続いていたのですが、タイミングをはかったかのように一斉に使えるようになりました。

CSS Grid Layoutは、かなり強力なレイアウト用の仕様です。 ちょうど、HTML5 Experts.jpのトップページがCSS Gridの説明に都合良さそうなので、ちょっと書きながら紹介しようと思います。

スクリーンショット：HTML5 Experts.jpのトップページ

HTML5 Experts.jpのトップはグリッドレイアウトを意識した見た目になっている

HTML5 Experts.jpのトップページは、ロゴやサイドバーなどのブロックが、15pxの間隔をおいて配置されています。
ちょっと線を引いてみましょう。

スクリーンショット：HTML5 Experts.jpのトップページにグリッドの線をひいた

グリッドのガイド線を引いた。線で区切られた領域に各パーツが収まっているのがよくわかる

CSS Gridも同様に、配置する基準となる線を定義し、その線と線で区切られた領域に、コンテンツを配置します。Photoshopでガイドをひいて、その中で矩形選択をするようなかんじでしょうか。

現在のトップページをCSS Gridで書くと、このようなかんじになります。

body {
  display: grid;

  /* 縦線をひく */
  grid-template-columns: 1fr 290px 430px 290px 1fr;

  /* 横線をひく */
  grid-template-rows: 210px 60px 1fr /* 以降は割愛 */;

  /* 隙間を定義すると、隙間分の線を引かなくてよいので楽 */
  grid-gap: 15px;
}

#logo {
  /* 横の配置、2番目の線（1番目の線は左端）から3番目の線まで */
  grid-column: 2 / 3;

  /* 縦の配置、1番目の線（上端）から2番目の線まで */
  grid-row: 1 / 2;
}
...

枠だけですが、以下にコードを置いてみました。

CSS Gridは機能が強力なぶん、構文も複雑です。先程書いたのは一例で、ほかにも線に名前をつけたり、アスキーアートのような構文でグリッドのセルを定義できたりします。

ドキュメンテーションやチュートリアルのサイトもすでにあるので、それを参考にしてみましょう。

このうち、Grid Gardenは、CSS Gridの構文の一部をゲームで学べるサイトです。入門にちょうどよいかと思います。

また、Firefoxの開発者ツールには、CSS Gridインスペクタが搭載されました。グリッドの線や隙間を視覚的に確認できてとても便利です。

CSS Gridを使う場合、コンポーネントの見た目とレイアウトを、コード上ではっきり分離しないと扱いづらくなるので、マークアップやCSS設計にもいろいろ影響を与えるだろうと感じています。気が向いたら、取り上げるかもしれません。

Firefox, ChromeではWebAssemblyも有効に

こちらはFirefoxとChromeのみですが、WebAssemblyが有効になりました。

WebAssemblyについては、清水さんの連載を読んでいただくことにして、説明は割愛します。

Mozilla Hacksでも2月にWebAssemblyの特集が組まれています。JITコンパイラやアセンブリの話から始まるなど、読み物としても面白いものになっています。

この特集の他にも、asm.jsと比較しWebAssemblyが速い理由や、WebAssembly Explorerというツールの紹介もされています。

MDNにもWebAssemblyのドキュメントがまとめられており、日本語訳も有志によって進められているようです。

Firefox 52

3月7日に、Firefox 52がリリースされました。Captive portal（Wi-Fiサービスのログインページ）の検出が追加されたり、HTTPなページでパスワードを扱っている場合警告が出たり、Flash以外のNPAPIプラグイン（AcrobatやSilverlight、Javaなど）が無効にされたりと、セキュリティ周りの機能強化が目立ちます。

とはいえ、フロントエンド周りの機能強化も、先述したCSS GridとWebAssemblyサポートに加えて、以下のようなものがあります。

space-evenly

Flexboxのjustify-contentでspace-evenlyという新しい値がサポートされました。

space-aroundとなにが違うかというと、space-aroundでは連続したアイテム間では空白が左右のそれの倍になってしまうのですが、space-evenlyでは「even（均等）」と名のつく通り、空白の大きさが等しくなります。仕様書の画像がわかりやすいです。

justify-contentプロパティなどに指定する各種値のレンダリングの違いを比較した画像

space-evenlyのほうがspace-aroundよりも使われそう

CSS Color Level 4のrgb()とhsl()

CSS Color Level 4のrgb(), hsl()関数表記が実装されました。「もとからあったじゃないか」と思う方しかいないと思いますが、CSSお得意の構文変更です。

これまでのrgb()やhsl()は、それぞれの色の値をカンマで指定していました。

それが空白区切りになりました。

color: rgb(128 90 0);

また、整数値しか取れなかったのが小数も受け入れるようになりました。hsl()については、これまで数値でしか指定できなかった色相を、角度（degなど）を使って指定可能になりました。

color: rgb(111.4 128 0.0);
color: hsl(120deg 100% 30%);

そして、これまで別の関数表記だったrgba(), hsla()の機能を統合し、rgb(), hsl()からアルファを指定できるようになりました。アルファはスラッシュで区切り指定します。また、これまでは数値のみの指定でしたが、パーセンテージでも指定可能となりました。

color: rgb(128 90 0 / 50%);

構文が変わったと書きましたが、互換性という名目で古い構文も引き続き定義されるので、移行しなければならないというわけではありません。

ES2016, ES2017のサポート

JavaScriptでは、ES2016やES2017の以下の機能が実装されました。

  • Exponentiation operator（**）
  • Destructuring rest parameters
  • Async Functions（async/await）
  • Trailing commas in functions

ES2016以降の実装について、ここ数リリースでのまとめも公開されています。

現在はまだ提案であるAsync Iteratorなどの実装も進められているようです。楽しみですね。

新しいResponsive Design Modeになった開発者ツール

開発者ツールでは、Responsive Design Modeが強化され、モバイル環境のエミュレーションがより細かく行えるようになりました。

UIが変わったほか、回線環境のスロットリングと、デバイスピクセル比のカスタマイズ、デバイスのプリセットなどが追加されました。回線のスロットリングができるようになったので、回線速度のレンダリングへの影響を検証しやすくなりました。

スクリーンショット：Firefox 52の開発者ツールで登場した新しいResponsive Design Mode

Nexus 5をエミュレートすると、画面サイズやデバイスピクセル比はもちろん、UA文字列も切り替わる

ほか、Responsive Design Modeではありませんが、アニメーションパネルではイージングの視覚化も行われるようになりました。

同等の機能はChrome DevToolsにもだいぶ前からあるのですが、Escを押して現れるドロワーを開き、そこからAnimationタブを開くなど、機能への動線がよくなかったりします。

Chrome 57

Chrome 57がリリースされました。

フロントエンド周りの機能強化は、先述したCSS GridとWebAssemblyサポート以外に以下のようなものがあります。

text-decorationのサブプロパティが実装

CSS Text Level 3のtext-decorationプロパティが実装され、下線の色やスタイルを変更可能になりました。

これまではborderを使ってなんとかするハックだったので、これはうれしいですね。

/* リンクの下線を青色の点線にする */
:any-link {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: slateblue;
}
/* text-decorationがショートハンドになったため、以下のようにも書ける */
:any-link {
  text-decoration: underline dotted slateblue;
}

Firefoxがだいぶ前から（接頭辞つきですが）サポートしており、続いて何年か前にSafariが、そして今回ようやくChromeでもサポートされました。

日本語では特に影響がありませんが、text-decoration-skipプロパティも一部が実装されました。text-decoration-skip: inkと指定すると、ディセンダなどのある文字（gやjなど）に下線が重なるのを防げます。

text-decoration-skip: inkの例。「HTML5 Experts.jp」という文字の「p」と「j」のディセンダを避けて下線が引かれている

フォントサイズが大きいととくにうれしい

caret-colorプロパティ

CSS UIで定義されているcaret-colorプロパティがサポートされました。キャレットの色を変更できます。

input {
  caret-color: orange;
}

ファンシーな機能ではありますが、入力欄の色が薄い色になったときにコントラスト比が保てないという問題への対応でもあります。

スクリーンショット：caret-colorにorangeを指定したinput要素

細くて見えないかも。なおキャレットの太さなどを指定するプロパティはありません

V8 5.7ではpadStart/padEndが実装、高速化も

Chromeのバージョンにあわせ、V8も5.7になりました。

新機能については、文字列の詰めを行うpadStart()とpadEnd()の導入が主でしょうか。

以前、padStart()と同様のことをするleft-padというモジュールが消えてnpmが大混乱になったので、Nodeで使えると依存を減らせて嬉しいかもしれません。

padStart(), padEnd()は、Firefox 48, Safari 10で実装済みで、EdgeでもCreators UpdateのEdge（EdgeHTML 15）でサポートされます。

他に取り上げられているのは、パフォーマンスの向上です。 正規表現周りのパフォーマンス向上については、独立したエントリが1月に公開されています。

また、V8チームはここ数バージョンほどES2015の実行速度改善に取り組んでおり、そのエントリも公開されています。

V8 5.7時点でES5と比べた実行速度差は、平均で1.86倍、中央値で1.3倍にまで減少したとのことです。

まだ差があるため「やっぱりBabelか…」という話になるかもしれません。

が、コンパイル後のES5のコードの容量が増大すれば、JavaScriptのパースなどにコストがかかり、Webアプリの最初のレンダリングまでの時間に影響します。コードの容量と実行速度、どちらも与える影響を鑑みた上で選択できるといいですね。

Safari 10.1リリース

macOS 10.12.4とiOS 10.3がリリースされ、Safari 10.1もリリースとなりました。Safari 10.1で新しく入った機能が、AppleのドキュメンテーションやWebKitのブログで紹介されています。

いくつか紹介します。

Custom Elements v1

Safari 10のShadow DOM v1サポートに引き続き、Custom Elements v1もサポートされました。

HTMLのForm Validation

ついにHTMLのForm ValidationがSafariでもフルサポートされました。

HTML5からtype=emailといった新しいinputの型や、required属性、pattern属性など、フォームの入力内容を調査する属性が導入されました。

検証項目に違反する入力内容があると、フォーム送信前にブロックされるという仕様なのですが、Safariは長らく対応していませんでした。DOMから入力内容がvalidかをチェックはできるのですが、UI上のサポートがなかったのがうれしくありません。

Safari 10.1では、他のブラウザと並んでフォーム送信時のチェック（ブロック）を行うようになったほか、好きなタイミングでフォームの検証状態を通知できるreportValidity()メソッドも一緒にサポートしました。こちらはBlinkのみで長らくサポートされていたもので、最近になりFirefoxもサポートしたものです。

広色域の色指定

新しいデバイスにはDisplay P3という色域の広いディスプレイを導入しているAppleですが、その恩恵をWebコンテンツでも受けられるべく、sRGBを基準としているCSSの色域を拡張する提案を行い、その一部を実装しました。

実装されたのは、color()関数とメディアクエリのcolor-gamut媒体特性です。

color()は、RGB各色の度合いを色域を含め指定できる新しい関数です。

color(display-p3 0 1.0 0)

このように指定すると、P3ディスプレイでの緑100%となり、sRGBでは表現できない、より濃い緑を発色できます。

]]> Firefox 51・Chrome 56リリース、Safari 10.1発表、Windows 10 Creator’s UpdateのEdge、WebKitほか──2017年1月のブラウザ関連ニュース /myakura/22272/ Tue, 07 Feb 2017 03:04:00 +0000 /?p=22272 連載： WEB標準化動向 (21)

2017年1月は新年早々いろいろ動きがありました。Firefox 51とChrome 56のリリース、Safari 10.1発表、Windows 10 Creator’s UpdateのEdge、WebKitにWebRTCとCredential Management API、Facebookとブラウザベンダー協力の話など、注目ニュースが満載です！

Firefox 51リリース

1月24日に、Firefox 51がリリースされました。

WebGL 2のサポートや、非HTTPSなページ上のパスワードフォーム入力についてのUI改善が目玉ですが、すでに知っているところだと思うので、地味なところをとりあげます。

::placeholder 疑似要素と :placeholder-shown 擬似クラスが実装されました。input 要素やtextarea 要素の placeholder 属性で指定するプレースホルダ周りのスタイルを調整するためのものです。前者はプレースホルダのテキストを、後者はプレースホルダが表示されているときの要素（input など）を表します。

SVGでは、xlink 接頭辞なしの href 属性がサポートされました。これまでSVG内で外部リソースを読み込んだりSVG内の要素を参照する際は、XLinkを使っていました。SVGがXMLのフォーマットというところに由来するのですが、名前空間の扱いの難やHTMLとの親和性などをふまえ、SVG 2.0で名前空間なしの属性が導入されました。

この名前空間なしの href 属性ですが、Internet ExplorerがSVGを初実装したIE9から使えます。SVGを実装するにあたって、検討段階だったSVG 2.0で取り入れたい機能の先行実装をさせたという話を以前SVG WGの人に聞いたことがあります。

SVGまわりでは、tabindex 属性や data- 属性に対応しました。使えなかったのに驚く方もいるかもしれませんが、これらはHTMLのグローバル属性だったので、SVGの要素では使えず、dataset プロパティなどのアクセサリーもなかったのでした。これらもSVG 2.0で導入されたものです。

Chrome 56リリース

1月25日に、Chrome 56がリリースされました。

パフォーマンスの観点から、タッチイベントハンドラの passive オプションがデフォルトで true になりました。Android版Chromeでは多くの場合、スクロールがスムーズになるとのことです。

CSSでは、position: sticky が復活しました。むかーしむかし実装されていたのですが、パフォーマンスの観点から削除されていたのでした。scroll イベントを監視しなくてもよくなるので、パフォーマンス向上が期待できる機能です。

Web PaymentsのPayment Request APIに追加された　canMakePayment()　メソッドがサポートされました。このメソッド、昨年AppleがWebでのApple Payを発表した祭、Web Paymentsにないものとして上げていたメソッドのひとつです。Web PaymentsのアクティビティにもAppleが関わり、APIの差異を埋めているようなので、今後に期待ですね。

他にも、border-image-repeat: spaceがサポートされています。これでようやく実装がそろった感じですね。

Safari 10.1発表

macOS Sierra 10.12.4のベータ版が開発者向けに公開され、Safariが10.1にアップデートすることがわかりました。昨年春にリリースされたSafari 9.1のように、WebKitがアップグレードされ、新しい機能が導入されます。

APIの目玉はCustom Elementsでしょうか。Safari 10でもShadow DOMがサポートされたので、Web Componentsがまたさらに進みます。
ほかにも、Fetch APIやIndexed DB API　2.0, Gamepad APIがサポートされます。Gamepad APIはすこし意外ですね…ブラウザでゲームパッドを使うようなゲームを提供する顧客がいるのでしょうか？

JavaScriptでは、ES2017仕様のAsync Functionsや SharedArrayBuffer に対応します。

HTMLでは、HTML 5のフォームバリデーション機能がついに実装されました。これまでもDOM上では検証していたのですが、invalidな際にフォームの送信をブロックするという挙動を実装していなかったのでした。

CSSではGrid Layoutが有効になります。リリース時期を春とすると、FirefoxやChromeと同時期になります。いっきに使いどころが増えそうです。

Windows 10 Creator’s UpdateのEdge

Microsoftのブログが活発に更新され、Windows 10 Creator’s Updateで提供される各種機能の紹介がされています。先月から引き続きいくつか取り上げます。

このエントリでは、タブのサムネイルや一時退避といったブラウザのUIの機能（Operaみたいですね）や、EPUB、Payment Requset APIのサポートなど、EdgeHTML 15で目玉になる機能をまとめています。

WebRTC 1.0は互換性のため実装を始めたもので、あくまでORTCを推奨していくという立場のようです。コーデックもVP8をサポートしましたが、ソフトウェアでコードのため電力消費やCPUの使用はH.264よりも高いとのこと。

他にも、Content Security Policy Level 2のサポート、フルカラー絵文字のサポートもあるようです。

WebKitにWebRTCとCredential Management API

Safari 10.1もうれしいですが、次期メジャーバージョンでも嬉しい機能が入りそうです。

ひとつは、WebRTCです。1月19日に、Appleのエンジニアによって、WebKitにWebRTCのライブラリがチェックインされました。

WebRTCについては、getUserMedia() の実装が進んでいましたが、通信周りのAPIは特に進んでいませんでした。EdgeもEdgeHTMLでWebRTC (1.0)を実装しますが、ようやくといったところでしょうか。

コミットログを読むと、Chromeのソースコードをインポートして利用しており、Chromeとの互換性がなかなか期待できそうです。

もうひとつは、Credential Management APIです。1月24日に、AppleのエンジニアがWebKitにCredential Management APIを実装予定という旨のメールをメーリングリストに投稿しています。

Credential Management APIはパスワードやソーシャルログインなど、ユーザーの認証情報を抽象化して扱うAPIで、ログイン周りの煩雑さを解消できます。現在はChromeでのみ使えますが、Safariでも使えるようになるとモバイルでのログイン周りがとても便利になりそうです。

次期iPhoneで顔認証が導入されるといった噂を目にしていまし、信憑性が高まった気もします。

Facebookとブラウザベンダーの協力

Facebookの開発者ブログに、ブラウザベンダーと協力してFacebookへのリクエストを省力化したという話が掲載されています。あわせて、Chrome、Mozillaの開発者ブログでも紹介されています。

Facebookは各種アセットを、ハッシュ付きURL＋長大なキャッシュ有効時間というキャッシュ戦略で運用しています。キャッシュの有効時間が長ければ、ブラウザは再読込の際に同じリソースをダウンロードする確率が低くなるので、ネットワークにやさしいです。

しかし、これまでのHTTPキャッシュでは、ダウンロードは防げても、リクエスト自体は起こってしまっていました。パフォーマンスの観点からもうれしくありません。Facebookが自身のアクセスを解析したところ、全体の60％がそういったリクエストだったそうです。更に調べると、他のブラウザが13％〜22％だったのに対し、Chromeだけは63％ととても高い数値を示していたとのこと。

これを解消しようとFacebookのエンジニアがChromeチームに働きかけ、挙動を変更。結果63％だったものが24％まで減少したとのこと。

Firefoxでは、Chromeと同様の挙動変更を行わない代わりに、Cache-Control: immutable という新しいヘッダの値を実装しました。このヘッダについては、Jxckさんが自身のブログにまとめているのでそちらをご覧ください。

]]> details要素がサポート追加となったFirefox 49リリース、Safari 10リリースやベンチマークのMotionMarkなど──2016年9月のブラウザ関連ニュース /myakura/21141/ Thu, 13 Oct 2016 23:58:18 +0000 /?p=21141 連載： WEB標準化動向 (17)

2016年9月のブラウザ関連ニュースは、details要素がサポート追加となったFirefox 49や、Safari 10リリースとベンチマークのMotionMarkなどについて紹介します。

Firefox 49リリース

9月20日に、Firefox 49がリリースされました。

今回はいつも以上にいろいろ追加されてる気がします。

HTML関連では、<details> 要素がサポートされました。トグルで表示・非表示を切り替えるウィジェットをJavaScriptなしに導入できます。

これ関連で面白いなと思ったのが、HTML5 <details> in GitHub です。参考情報としてエラーログなどを張りつける際にログを <details> で囲むことで、ページが長くなるのを防ぎます。

Qiitaでも対応したとのことなので、コード一式をとりあえず書いておくとかそんなときに使えそうですね。

DOMまわりでは、before(), after(), replaceWith(), append(), prepend() メソッドがサポートされました。jQueryで見たことがあるメソッド名が多いですが、それらとほぼ同様で、要素の追加・置き換えを行います。なお要素を削除する remove() については、Firefox 23からサポートされています。

CSSでは、Level 4の機能がいくつかサポートされました。

#rrggbbaa 式の色表記がサポートされました。こちらは先日Blinkでも有効にされかけたのですが、WebViewの誤った実装との互換性をとるため無効にされてしまいました。

background-clip: text がサポートされました。背景画像でテキストをくり抜く表現が実現できます。もともとWebKitの独自拡張でしたが、広く使われてしまったこともあり、Backgrounds & BordersモジュールLevel 4で定義されました。

background-position-x/-yもサポートされました。background-position は水平方向・垂直方向の位置両方を指定しなければいけませんが、これらを使うと個別の方向ごとに位置を指定できます。もともと古いIEやWebKitでサポートされていたもので、こちらもBackgrounds & BordersモジュールLevel 4で定義されました。

背景画像系ではほかにも、Level 3の background-repeat　の round と spaceがサポートされました。他のブラウザでは結構前からサポートされていたので、追いついたかたちです。

-webkit- サポートも追加

もともと独自拡張だった機能のサポートがこのバージョンで行われたのには理由があります。Firefox 49では、-webkit- 接頭辞つきのCSSプロパティやAPIの一部をエイリアスとしてサポートしたからです。これによって、主にモバイル向けWebサイト・アプリの互換性が向上します。

-webkit- の部分的サポートは突然始まったことではなく、日本や中国などの特定サイトに限定し行われていました。それが方針転換し、すべてのサイトに適用されるようになりました。

標準化された機能と接頭辞つき実装には、標準化の過程でプロパティ名や値の取り扱いなどに違いが生まれます。こうした違いをどう埋めるかを明文化すべく、Compatibility Standardという仕様も作られています。ただ、すべての接頭辞つき機能がここで記されるわけではなく、webkitMatchesSelector() などは標準仕様に取り込まれるかたちで定義されています。

Safari 10リリースとベンチマークのMotionMark

9月13日のiOS 10と9月20日のmacOS 10.12 Sierraリリースにともない、Safari 10がリリースされました。Sierraだけでなく、El Capitanにも提供されています。

Safari 10の新機能については、過去の記事で取り上げているので、気になる方はそちらをご覧ください。

さて、9月21日に、WebKitからMotionMarkという、グラフィックス処理のパフォーマンスを計測するベンチマークが発表されました。

MotionMarkは、既存のグラフィクス関連ベンチマークが抱えていたいくつかの問題を解決するために用意したとのこと。計測対象がフレームレートではなく、フレームレートが閾値以下になったときのアニメーションの複雑さであることや、いろんなテストをいちシーンに詰め込まず、問題を切り分けやすくするといった工夫がされているようです。

Safari 10でMotionMarkを実行した結果。スコアは145.15（±5.12％）


この記事を書いているマシン（2011年のMacBook Air、11インチモデル）上のSafari 10で実行してみた

]]> Firefox 47・Safari 10、EdgeとProgressive Web Appsの新機能など─2016年6月のブラウザ関連ニュース /myakura/19921/ Tue, 05 Jul 2016 02:25:46 +0000 /?p=19921 連載： WEB標準化動向 (14)

6月7日にリリースされたFirefox 47や、WWDCで発表されたSafari 10、WindowsにおけるProgressive Web Apps対応など、6月も注目のブラウザニュースをお届けします。

Firefox 47リリース

6月7日にFirefox 47がリリースされました。

今回は開発者ツールを取り上げましょう。まずはResponsive Design ModeでUA文字列をカスタマイズできるようになりました。いまのところプリセットがないので面倒ではありますが、そこそこ便利です。

スクリーンショット：開発者ツールのResponsive Design Modeのツールバー。Custom User AgentでUA文字列を設定できるようになった。

さて、これはいいなと思ったのが、コンソールの複数行入力です。以前からShift+Enterで可能でしたが、Shiftを押し忘れてしまって赤い SyntaxError を見るなんてひとは多かったのではないでしょうか。

スクリーンショット：Chrome DevToolsのコンソールで、複数行入力をしようとして失敗した例。「{」でEnterを間違えて押してしまいエラーがでた。

Firefox 47の開発者ツールは入力中のコードの構文を解釈するようになり、{ など「開いている」状態でEnterを押すと自動的に複数行入力になります。foo(...) など「閉じている」場合はふつうに評価されます。

スクリーンショット：Firefoxの開発者ツールのコンソールでは、構文を解釈するので「{」は開いた状態と認識され、ただのEnterでも次の行にカーソルが移動する。

構文エラーを意図的に入力したい方には不便かもしれませんが、基本的にはとても便利です。
ちなみにSafariではたしかSafari 7くらいからできます。

ほか、Service Worker関連のデバッグに便利な機能が多数追加されています。

Safari 10発表

6月13日から17日までAppleのWWDCが開催され、MacのOSがOS XからmacOSになるなどいろんなことが発表されました。
SafariもSafari 10になることが発表されました。すでに実装される機能が公開されています。

ES6のサポートはうれしいですね。Indexed DBやCSS Filtersの接頭辞削除など、互換性も向上しています。
フォント関連機能にも大きな進展があります。Font Loading APi、WOFF 2.0、unicode-range のサポートが追加されました。とくに日本語のWebフォントは容量が大きいので、これらの機能はうれしいですね。

このエントリでは、先日Webフォントの読み込み中の挙動が変更されたことも書いてあります。これまではWebフォントが読み込まれるまでテキストが表示される問題でしたが、今回の変更でFirefoxやChromeと同じく、Webフォントの読み込みに時間がかかる場合は3秒後にフォールバックのフォントで一旦表示するようになりました。Safari 10の紹介には書いてありませんが、この変更が取り込まれてることを祈りましょう。

Keynoteで発表されたApple Pay on the WebについてはSafariでのみしか利用できない、Web Paymentsワーキンググループで策定している標準APIではないといった批判の声もあります。これについてはAppleのEdward O’ConnorがWeb Paymentsワーキンググループに対して説明をしています。

マーチャントの検証機能や canMakePayments() といった標準にはないメソッドがApple Payにはあるそうです。AppleもWeb Paymentsワーキンググループに参加していますし、標準APIもよいものにしていってほしいですね。

また、Flashコンテンツについても、ユーザーのアクションなしには実行できないようになると発表されました。

MacにはFlash Playerがプリインストールされていないので、インストールしていない人もいるかと思います（Chrome内蔵のFlash Player経由で見るなどは大いにありそうですが）。他のブラウザーもFlashをなるべく実行しないように動いていますし、HTML5なコンテンツへの移行が急務になりそうですね。

EdgeとProgressive Web Apps

Microsoft EdgeチームのJacob Rossiが、MediumにWindowsにおけるWebアプリのこれまでと今後のProgressive Web Apps対応について投稿していました。

WindowsにおけるProgressive Web Apps対応は、ChromeやOperaのそれよりも、よりOSの機能との統合を考えているようです。具体的な例としてアプリケーションのリストへの追加や、アプリの設定やアンインストールといったものを紹介しています。また、WindowsストアやBingの検索結果への表示といった、アプリの発見についてもいろいろ考えている模様。PWAをふつうのアプリとして扱うよという強いメッセージを発しています。

この記事と時を同じくして、Push API, Web App Manifest, Cache APIの実装開始も発表されました。Windowsというデスクトップ環境が主流のプラットフォームでWebアプリをどう統合していくか、とても楽しみです。

]]> WebAssembly実装プレビュー、Chrome 49新機能など─2016年3月のブラウザ関連ニュース振り返り /myakura/18768/ Mon, 18 Apr 2016 00:00:26 +0000 /?p=18768 連載： WEB標準化動向 (11)

2016年3月のブラウザニュースは、Chrome 49の新機能、Firefox 45とinnerText、WebAssembly実装のプレビュー、Edgeの拡張機能、Safari 9.1リリースなどについて紹介します。

Chrome 49でCSS Variablesサポート

3月2日に、Chrome 49がリリースされました。新機能はベータ版がリリースされた際にまとめられています。また、同じエンジンを搭載するOpera 36のリリース記事でも紹介されています。

注目はCSS Custom Properties（通称Variables）でしょうか。プリプロセッサやポストプロセッサが持つ変数とちがい、ちゃんと継承されるというのが特徴です。これを利用し、Jake Archibaldが、display の値をカスタムプロパティで定義し、外部CSSが読み込まれた際に block に書きかえさせ段階的にCSSを読み込ませるというアイデアを披露しています。

V8も更新され、ES2015のdestructuringとdefault parametersが使えるようになりました。また、Promiseのrejectionを検知する unhandledrejection イベントおよび rejectionhandled イベントもサポートされました。

Firefox 45と innerText

3月8日に、Firefox 45がリリースされました。

ES 2015のClass構文が有効にされています。うれしいですね。

他には、他ブラウザとの互換性のため innerText プロパティがサポートされました。要素内の「レンダリングされたテキスト」を取得するプロパティです。

この「レンダリング」というのが曲者です。要素内の文字列を取得するには textContent プロパティがありますが、こちらは「DOM要素内のテキスト」なので display: none などが指定された要素内のテキストももちろん返ります。いっぽう、 innerText はレンダリング結果を考慮するため display: none な要素内のテキストは結果に入りません。

innerText はブラウザ拡張などで外部サイトをいじったりするときには便利だったりしますが、レイアウトを行うためパフォーマンスに影響があります。単純に要素のテキストを取得したい場合は textContent を使いましょう。

WebAssembly実装のプレビュー

3月15日に、Mozilla、Google、Microsoftが、WebAssemblyの実験的なサポート状況について公開しました。WebAssemblyの試験実装は昨年から進められていますが、3ブラウザで相互運用可能な状態になったとのことです。

FirefoxとChromeについては、NightlyやCanaryでフラグを有効にすると試せます。

WebAssemblyについては、中心人物のひとり、MozillaのLuke Wagner氏へのインタビューが面白いです（インタビューの場に混ぜていただきました）。インタビューが行われたMozillaのView Source Conferenceでのセッション資料も参考になります。

また、先日ポッドキャストでのインタビューも行われています。こちらもあわせてどうぞ。

Edgeの拡張がプレビュー版に

Microsoft Edgeの拡張機能が、ついにプレビュー版に入りました。

拡張は正式リリース時にはWindows Storeから追加できるようになるそうです。

拡張の構造はChrome拡張互換のAPIですが、現時点では本家やMozillaのWebExtensionsと少し違い、chrome オブジェクトが browser オブジェクトに変わっているそうです。ちょっと面倒ですね。

サポート予定のAPIはロードマップが公開されています。Firefox, Edge, Chromium系で（だいたい）同じコードで拡張が動くようになるのでやる気がでますね。

Safari 9.1リリース、さらにTechnology Preview登場

3月21日に、OS X 10.11.4とiOS 9.3がアップデートされ、Safari 9.1がリリースとなりました。WebKitのブログで新しい機能が紹介されています。

新しい機能は内部的に利用されてもいるようで、追加されたCSS Custom Propertiesを使い、Web Inspectorのコードをシンプルにした話もエントリとして公開されています。

さらに、3月30日、Safari Technology Previewという開発者向けのビルドが公開されました。

Safari Technology Previewはリリース版のSafariよりも新しいWebKitを搭載したビルドで、2週間にいちど更新されます。最初のビルドではES2015のArrow Functionsやイテレータ、Web標準ではShadow DOM (v1)などが使えるようになっています。

なお、レンダリングエンジンのWebKitはこれまでもナイトリービルドを提供していましたが、Safari Technology Previewは独立したUIを持ち、App Storeから更新されるといった違いがあります。

現段階でiOS版のプレビューは提供されていませんが、多くの人がそれを望んでるだろうとは認識しているとのこと。こちらのほうが出ると嬉しいので、要望をあげましょう。

]]> Visual Studio Codeが、Edgeより先にChrome連携─2016年2月のブラウザ関連ニュース振り返り /myakura/18748/ Thu, 14 Apr 2016 00:30:48 +0000 /?p=18748 連載： WEB標準化動向 (10)

2016年2月のブラウザニュースは、Microsoft Edgeの新機能やFirefoxのリリースサイクル変更、Visual Studio CodeとChrome連携、Safari 9.1のWeb Inspectorなどについて紹介します。

2016年のMicrosoft Edge

Edgeの今年の計画が発表されました。

パフォーマンス向上などはもちろん、アクセシビリティやコミュニティと積極的に関わると書いてあるのは心強いですね。

新しい仕様の実装に関しては、こんなふうに言っています。

Our goal is to find the right approach to implementing new web standards features that may undergo rapid evolution, potentially causing unneeded turbulence for web developers (e.g. Flexbox or WebRTC/ObjectRTC), or may gather popularity and then be abandoned for various reasons (e.g. Object.observe() or SMIL).


Flexboxの構文変更や Object.observe() の削除など、開発者に不必要な混乱をもたらすことは避けつつも、日々更新されるWeb標準の実装によいアプローチを見つけることをゴールとしているそうです。標準化団体やChromeチームのやり方を軽く牽制しているようにも感じますね。

ともかく、こうしたゴールを設定したうえで、ECMAScriptのModules、WOFF 2.0、ES 2016以降の機能いくつかの実装を開始したと発表しました。また、Service Worker実装の初期段階としてFetch APIの実装も始めています。

Edgeの機能ですが、すでに検討中のものはEdgeのPlatform statusページで、そこにないものは開発者向けのフィードバックサイトから投票・提案できるので、ぜひ見てみましょう。

Firefoxのリリースが6〜8週のサイクルに

Firefoxのリリースが、6〜8週のサイクルへと変更されることが発表されました。

Firefoxは2011年春より、6週間で新しいメジャーバージョンをリリースしています。Chromeも2010年夏より6週のモデルでリリースしていますが、ときには8週近くになるなど、柔軟なスケジュールとなっています（なのでほんの少しずつですが、FirefoxとChromeのバージョンの差が縮んでいました）。

今回の変更でサイクルが可変になるものの、リリース予定日は公表されており、また1年にリリースされるバージョンもこれまでと一緒のことです。年末にはFirefox 50になっているなんて、すごいですねー。

VS CodeでChrome DevToolsと連携

Microsoftが提供するVisual Studio Codeに、Chromeと連携する拡張が提供されました。しかもMicrosoft製です。

Chrome DevToolsのDebugger Protocolを拡張で実装したということみたいです。

それにしてもEdgeよりも先にChromeとは…。そして、“For now we are support Google Chrome, but we’re also looking at expanding our support to Microsoft Edge and other browsers” と、Edgeだけでなく他のブラウザにも目を向けているとのこと。FirefoxやSafariとも繋がるのでしょうか。

Safari 9.1のWeb Inspector

1月分で取り上げたSafari 9.1のWeb Inspectorでは、CSS編集が強化されているとのこと。

これまでのStylesパネルは他の開発者ツールとだいたい同じでしたが、新しく追加されるVisual Stylesパネルでは、スライダーやドロップダウンリストなどが、GUIからスタイルを編集できるようになります。Keynoteみたいですね。

GUIでのスタイル編集は、Chromeも少しずつ進めており、カラーピッカーにMaterial Designのパレットを導入したりなどしています。また、要素のmarginや大きさをクリック＆ドラッグで編集できるLayout Modeも試験機能ではありますが実装しています。

]]> 【HTML5 Experts.jp】2016年1月のブラウザ関連ニュース /myakura/18382/ Wed, 09 Mar 2016 00:00:26 +0000 /?p=18382 連載： WEB標準化動向 (9)

2016年1月のブラウザニュースは、Safari 9.1のリリース、Firefox 44リリース、Chrome 48リリース、EdgeのJavaScriptエンジンChakraのオープンソース版「ChakraCore」についてお届けします。

Safari 9.1発表

iOS 9.3とOS X 10.11.4のベータ版が開発者向けに提供され、その中でSafari 9.1のリリースが明らかとなりました。

9.1では先月紹介したタップ時の350msの遅延をなくす仕組みや、CSS Custom Properties（CSS Variables）、font-feature-settings プロパティとそれに関連する font-variant 系サブプロパティ、will-change プロパティがサポートされるようです。

セキュリティや安定性向上のためのアップデートではない、マイナーアップデートは久しぶりです。Safariはこれまで、新しい機能の追加やバグの修正を年一度のメジャーアップデートでしか提供しておらず、開発者の不満を高めていました。ChromeやFirefox、Edgeほどを望む必要があるかはわかりませんが、9.1のようにエンジンのバージョンアップを含むリリースがもうすこしあるとうれしいですね。

Firefox 44リリース、Service Workerが有効に

1月26日にFirefox 44がリリースされました。

このバージョンでついにFirefoxでもService Workerが有効になりました。

CSSの unicode-range デスクリプタがサポートされました。

開発者ツールではCSS Animationsのエディタが協力になりました。Chromeにもあるような、スライダーでアニメーションの状態を逐次確認できるようなUIがついています。

CSSアニメーションを学べるDevTools Challengerというサイトも、44がDeveloper Editionだった昨年11月ころから公開されています。アニメーションで動く深海生物を開発者ツールから操作するというチュートリアルです。

Chrome 48リリース、縦書きCSSの向上

1月20日にChrome 48がリリースされました。

このリリースで、CSS Writing Modesの接頭辞がとれました。Writing Modesについては昨年末のCodeGridで取り上げられています。

また、OpenTypeフォントの機能にアクセスする font-feature-settings も接頭辞がとれました。Safari 9.1の公開も近いようなので、接頭辞まわりがだいぶすっきりしますね。

ChakraCoreが公開

12月分で取り上げた、EdgeのJavaScriptエンジンChakraのオープンソース版「ChakraCore」ですが、1月13日に公開されました。

ロードマップも公開されています。JITなしでUbuntuでもまず動かせるようにするとか、WebAssemblyへの対応、Async FunctionをECMAScript仕様に持っていくといったことが書かれています。

一週間後には、ChakraCoreをNodeのエンジンにするべくPull Requestが投げられました。

JavaScriptエンジンの競争がさらに盛んになってきそうですね。

]]> iOS7におけるMobile Safariの主な変更点 /shumpei-shiraishi/2602/ Thu, 19 Sep 2013 10:34:09 +0000 /?p=2602 iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。

元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。

ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです…

UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに

Webブラウジングをしている最中は、フルスクリーンがデフォルトになりました。ホスト名部分をクリックしたり、トップに戻るようスクロールを始めた時に、URLバーとツールバーが表示されます。

Webページはフルスクリーンに近いサイズで表示される

Webページはフルスクリーンに近いサイズで表示される

ユーザーの操作に応じてツールバーが出現する

ユーザーの操作に応じてツールバーが出現する

問題は、ツールバーの表示／非表示が切り替わった際にresizeイベントが発生せず、メディアクエリなどでも検知できないことです。これにより、画面の高さが変わったことをアプリが検知できないということになり、なるべく固定の幅や高さを確保しようとするゲームなどでは、時に大きな問題になります。 また、ネイティブではないスクロール（iframeやoverflow:scroll、JavaScriptベースのスクロールなど）を使用しているアプリの場合は、ツールバーが表示されっぱなしになってしまう事があります。

Appleのサイトもネイティブのスクロールを使用していないためか、URLバーとツールバーが表示され続ける

Appleのサイトもネイティブのスクロールを使用していないためか、URLバーとツールバーが表示され続ける

新しいジェスチャー

新しいSafariでは、画面端からスワイプするというジェスチャーに操作が割り当てられました。 画面の下端から上に向かってジェスチャーすることでコントロールセンターを表示でき、画面の横端から右／左にスワイプすることで「戻る／進む」といったナビゲーションを行えます。

スワイプ操作を取り扱っているWebアプリは、画面端に適切なマージンを設けていない限り、これらのジェスチャーと被ってしまう可能性があります。

また、右・左のスワイプ操作に割り当てられている「戻る／進む」と言ったナビゲーションは、ナビゲーション前後のページが重ねて表示されます。こうした動作は、履歴管理API（History API）を用いる単一ページアプリケーションでは多少問題になるかもしれません。同じアプリのUIが重ねて表示されることになるためです。

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で動作させた様子

    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）のブログ記事は素晴らしいリソースですので、ぜひ一度目を通してみてください。

]]>