読者です 読者をやめる 読者になる 読者になる

HTML 5.1勧告! これだけは押さえておきたい変更点

f:id:moo-lev:20161026123631p:plain

日本のみなさん、こんにちは!

teratailエンジニアの鈴木です!

本日(日本時間)W3Cのブログで正式に発表があり[1]、HTML 5.1が 勧告 (REC)となりました! よっ!

今回は、このHTML5初のマイナーバージョンアップデートについて、Web制作者が押さえておきたい変更点を、いくつかピックアップして紹介してみようと思います。

 

HTML 5.0の勧告は2014年の10月に行われ、これは1つ前のバージョンから10年以上の時を経た、大幅なアップデートでした。

今回勧告されたHTML 5.1は、前回の勧告から2年程度しか間が空いていませんが、ワーキンググループはおよそ1年に1度HTMLの安定したバージョンを勧告としてリリースできるようなワークフローに取り組んでいることが、4月に発表されています[2]。

なお現時点でHTML 5.2についても、GitHubでEditor's Draftを見ることができたり[3]、W3CのサイトでFirst Public Working Draftを見ることができたりします[4]。

HTML 5.1での変更項目についてざっと雰囲気を掴みたい人は、Implementation reportを見てみるのが良いかもしれません[5]。

 

1. 複数の画像リソースへの対応

HTML 5.1で、img要素のsrcset属性や、picture要素が、正式に加わりました。

多様化するユーザーのアクセス環境を背景に、複数の画像リソースを適切に切り替えることは、もはやWeb制作において必須です。

スクリプトを使う方法では、画像の読み込みがスクリプトの実行に依存するため、ロード時間が長くかかったり、二重に読み込んでしまったりといった問題があります。

そこで、srcset属性やpicture要素が導入され、ユーザー環境に応じた複数画像の切り替えを、柔軟に行えるようになりました。

 

1-1. デバイスピクセル比に基づく選択

以下のようなx記述子を用いた指定により、デバイスピクセル比に基づいて、サイズ違いの複数画像を提供する事ができます。

ブラウザは、スクリーンのピクセル密度やズームレベルやネットワーク状況等から、最適なリソースを読み込みます。

<img src="./100-daisy.jpg" alt="" width="100"
  srcset="./150-daisy.jpg 1.5x, ./200-daisy.jpg 2x" />

 

1-2. ビューポートに基づく選択

以下のようなw記述子を用いた指定により、ビューポートに基づいて、サイズ違いの複数画像を提供する事ができます。

ビューポートに基づく選択では、sizes属性(任意)と組み合わせて、より柔軟な指定を行う事もできます。

<img src="./400-daisy.jpg" alt=""
  sizes="(max-width: 640px) 100vw, 50vw"
  srcset="./400-daisy.jpg 400w, ./800-daisy.jpg 800w" />

 

1-3. アートディレクションに基づく選択

picture要素とsource要素(及びmedia属性)を使用する事で、任意の条件に応じた異なる画像を提供する事ができます。

<picture>
  <source media="(min-width: 960px)" srcset="large.jpg" />
  <source media="(min-width: 480px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="" />
</picture>

 

2. その他の変更点

上に書いたような画像周りの変化に加えて、HTML 5.1では以下のような変更も行われました。

  • input要素へのweekmonthdatetime-localタイプの追加
  • iframe要素へのallowfullscreen属性の追加
  • img要素や関連する要素のwidth="0"のサポート
  • input要素やtextarea要素におけるspellcheck属性の追加
  • oncutoncopyonpasteハンドラの追加
  • mousewheelイベントをwheelイベントに変更

などなど。

それぞれの詳細については、HTML 5.1の勧告を参照してください[6]。

 

3. おわりに

記事の途中から急に雑になった気がしないでもないですが、今回の複数画像リソースへの対応もそうであったように、HTMLの仕様は、より現実に即した方向へと変化していきます。

特に今回からは、ワークフローの改善により勧告の頻度が上がりました。

そのため、注意深く追いかけていくことで、これまでよりも大きな恩恵を受けることができるでしょう。

teratailブログでも、何か新しい動きがあればレポートしていきたいと思います。

 

4. 参考

  1. HTML 5.1 is a W3C Recommendation | W3C News
    https://www.w3.org/blog/news/archives/5932
  2. Working on HTML5.1 | W3C Blog
    https://www.w3.org/blog/2016/04/working-on-html5-1/
  3. GitHub - w3c/html: Working Draft of the HTML specification
    https://github.com/w3c/html
  4. HTML 5.2
    https://www.w3.org/TR/2016/WD-html52-20160818/
  5. HTML 5.1 Implementation report
    https://w3c.github.io/test-results/html51/implementation-report.html
  6. HTML 5.1
    https://www.w3.org/TR/html51/