Firefox 38 が正式リリース、レスポンシブ・イメージ、ruby 要素のサポートなど

Firefox の最新版、Firefox 38 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。自動更新が少し遅れて、38.0.1 として届いたので、リリース直後に少し問題があったみたいですね。

picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、所謂レスポンシブ・イメージ （Responsive images） の利用が可能になりました。また、ruby 要素、CSS Ruby への対応が行われ、ルビの使用が可能になっています。

• Firefox 38.0 リリースノート
• Android 版 Firefox 38.0 リリースノート
• Firefox 38 for developers ： MDN

picture 要素と srcset 属性

picture 要素については、下記のページで仕様に基づいた具体的な説明をしています （W3C の仕様書はこちら）。

• picture 要素 ： W3 Watch Reference HTML5 タグリファレンス

srcset 属性は、picture 要素の属性ではなく、picture 要素内で使用可能な source 要素や img 要素に指定することで、複数のイメージソースを指定することができます。srcset 属性と、source 要素についての解説は下記。

• srcset 属性 ： W3 Watch Reference HTML5 タグリファレンス
• source 要素 ： W3 Watch Reference HTML5 タグリファレンス

ちなみに、今年発売された著書、「できるポケット HTML5 & CSS3/2.1 全事典」 にも picture 要素や srcset 属性などの解説が含まれていますよ （宣伝）。

具体的な使用方法としては、例えば srcset 属性を img 要素に使用するなら下記のような感じになります。

<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
     alt="Marie Lloyd" width="100" height="150" />

上は、デバイスピクセル比で指定した例、下はスクリーンサイズでの指定例。

<img sizes="100vw"
     srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
     src="wolf-400.jpg" alt="The rad wolf" />

デバイスが srcset 属性に対応している場合、例えば、デバイスのスクリーンサイズが 360px だった場合は、「wolf-400.jpg」 が表示されるでしょう。

なお、「400w」 のように 「w」 を使用した場合は src 属性の値は無視されます。一方、「1.5x」 のように 「x」 を使用して指定した場合は、src 属性に指定された値が、「1x」 時のリソースとして利用されます。

srcset 属性に対応していない環境に対しては、src 属性に指定したリソースが、フォールバックとして利用されますので、通常通り画像が表示されますよと。

picture 要素を使用する場合は下記のような感じになります。source 要素に media 属性を使用してメディアクエリを指定したりできますから、より複雑な指定も可能になります。まぁやり過ぎるとメンテナンスが大変なことになりそうですが。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg" />
  <source media="(min-width: 32em)" srcset="med.jpg" />
  <img src="small.jpg" alt="The president giving an award." />
</picture>

ちなみに、picture 要素内には、img 要素が 1つだけ必須です。picture 要素に対応していない環境では、この img 要素がフォールバックになる仕組みですね。

ルビのサポート

ruby 要素、および「CSS Ruby」 に対応したことで、ルビが使えるようになりました。

ruby 要素については下記のページを参考まで。

• ruby 要素 ： W3 Watch Reference HTML5 タグリファレンス

その他、セキュリティアップデート

緊急 5 項目を含む、計 13 項目のセキュリティアップデートが行われています。Firefox 38 で行われたセキュリティアップデートについて詳しくは下記のページを参照してください。

• Security Advisories for Firefox

関連エントリー

• Firefox 37 が正式リリース、display: contents のサポートなど
• Firefox 32 が正式リリース、position: sticky; や srcset 属性への対応、開発ツールの機能追加など
• HTML5 仕様 （WHATWG） に picture 要素が追加される
• srcset 属性に対応した Chrome ベータが公開、レスポンシブイメージ対応が可能に
• 新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向
• WebKit （Nightly Builds） で srcset 属性がサポートされたらしい

公開し忘れてたFirefox 37リリース時の記事を公開した数時間後にFirefox 38の自動更新が来るっていうね

— Yoshiki Kato (@burnworks) May 15, 2015