WWW Watch

HTML5 仕様 (WHATWG) に picture 要素が追加される

WHATWG 版の HTML5 仕様に、picture 要素が追加されました。picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比やサイズなどに応じた、複数イメージソースの出し分けが可能になります。

HTML5Simon Pieters 氏 (Opera Software) のツイート経由ですが、WHATWG 版の HTML5 仕様に、picture 要素が追加されたそうです。

picture 要素は、所謂レスポンシブ・イメージ (Responsive images) を実現するための要素で、picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、sizes 属性を組み合わせて指定することで、デバイスピクセル比やサイズなどに応じた、複数イメージソースの出し分けが可能になります。

picture 要素に関しては、Responsive Images Community Group で最初の Editor's Draft が公開されたときに、下記の記事で取り上げています。

今回、WHATWG の仕様に取り込まれるにあたって少し修正が入っているみたいですが、制作者側に関連する仕様としては、大筋では変更ないみたい。

例えば、最初の Editor's Draft では下記のようになっていた picture 要素のコンテンツモデルが、

Zero or more source elements, followed by one img element.

WHATWG の HTML5 仕様内、および最新版の Editor's Draft では下記のようになっています。

Content model:
Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.

オプションで、script 要素や template 要素を含めてもいいよってことですね。

追記

木達氏から下記のご指摘をいただいたので追記。

おっしゃる通りで、WHATWG は HTML5 という名称は使っていません (WHATWG で新たに 1 から策定されている HTML 仕様で、バージョン 5 ではないですからね / 同時に、Introduction では 「これって HTML5 なの?」 という質問に、「まぁ簡単に言えばそうだね」 と書いています)。

で、今回、その辺は承知の上で、便宜上わかりやすく (だって HTML5 って書いた方がさ、わかりやすいじゃん・・・) こう書いているだけですので、その辺は悪しからず。

また、こういう書き方すると、HTML5 (とも呼ばれる次期 HTML) の仕様が 2カ所で別々に策定されているという誤解を招くかもしれませんが、あくまで、標準仕様としての次期 HTML (要するに HTML5) の策定は W3C が行っています。

HTML 5.1 Nightly にも追加

追記ですが、HTML 5.1 Nightly 仕様にも picture 要素が追加されました。

関連エントリー

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー