日本のみなさん、こんにちは!
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要素へのweek、month、datetime-localタイプの追加iframe要素へのallowfullscreen属性の追加img要素や関連する要素のwidth="0"のサポートinput要素やtextarea要素におけるspellcheck属性の追加oncut、oncopy、onpasteハンドラの追加mousewheelイベントをwheelイベントに変更
などなど。
それぞれの詳細については、HTML 5.1の勧告を参照してください[6]。
3. おわりに
記事の途中から急に雑になった気がしないでもないですが、今回の複数画像リソースへの対応もそうであったように、HTMLの仕様は、より現実に即した方向へと変化していきます。
特に今回からは、ワークフローの改善により勧告の頻度が上がりました。
そのため、注意深く追いかけていくことで、これまでよりも大きな恩恵を受けることができるでしょう。
teratailブログでも、何か新しい動きがあればレポートしていきたいと思います。
4. 参考
- HTML 5.1 is a W3C Recommendation | W3C News
https://www.w3.org/blog/news/archives/5932 - Working on HTML5.1 | W3C Blog
https://www.w3.org/blog/2016/04/working-on-html5-1/ - GitHub - w3c/html: Working Draft of the HTML specification
https://github.com/w3c/html - HTML 5.2
https://www.w3.org/TR/2016/WD-html52-20160818/ - HTML 5.1 Implementation report
https://w3c.github.io/test-results/html51/implementation-report.html - HTML 5.1
https://www.w3.org/TR/html51/
