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のリリースサイクルが変更されました。
- Simplifying Firefox Release Channels and Improving Developer Edition’s Stability
- Dawn project or the end of Aurora
これまでの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がリリースされました。
- Firefox — Notes (53.0) — Mozilla
- Firefox 53: Quantum Compositor, Compact Themes, CSS Masks, and More ★ Mozilla Hacks
今バージョンからWindows XPとVistaのサポートがされなくなった（Firefox 52 ESRのサポートに移行）ほか、Macでは64ビット版のみになったことでアプリケーションのファイルサイズが減少しました。UIまわりでは、パーミッション関連のUIが改善されています。
また、Firefox Developers Editionのテーマだった「Compact」テーマがリリース版にも同梱されました。
グラデーションがなくなりフラットになった。画像は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でサポートされています。