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

Firefox 38 が正式リリースされ、自動更新も提供開始されました。picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、レスポンシブ・イメージの利用が可能になりました。またルビへの対応が行われています。

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

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

Firefox 38

picture 要素と srcset 属性

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

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

ちなみに、今年発売された著書、「できるポケット 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 要素については下記のページを参考まで。

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

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

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?