HTML5が2014年10月に正式に勧告されてから2年経ちますが、マイナーアップデートバージョンとして「HTML5.1」が2016年11月1日に正式に発表されました。
「HTML5.1」ではHTML5に機能拡張が施され、要素や属性の追加や変更が実施されています。
今回、追加された機能で最も期待されているのが、レスポンシブWebデザインを簡単に実現できる「picture要素」です。
「picture要素」内に「source要素」と「srcset属性」で読み込ませたい画像を指定した上で、必要な数だけネストする事で、端末に応じた画像を表示させる事ができるようになります。
下記の例では、通常時は「img要素」で指定した「small.jpg」を表示しますが、画面サイズが1000px以上の場合は「large.jpg」を表示し、画面サイズが640px以上の場合は「middle.jpg」を表示します。
|
1 2 3 4 5 |
<picture> <source media="(min-width: 1000px)" srcset="large.jpg"> <source media="(min-width: 640px)" srcset="middle.jpg"> <img src="small.jpg" alt="sample image."> </picture> |
レスポンシブWebデザインでは、1枚の高解像度画像を画面サイズに応じて伸長表示させていましたが、読み込む画像のファイルサイズが同一の為、スマートフォンでの利用は不向きとされていました。今後は「picture要素」を使用する事で、画面サイズに応じた適切な画像の読み込み指定を行えるようになります。
Retinaディスプレイ用に画像を切り替えるのに最適ですね。
ただしIEには未対応との事なので使用する際にはご注意ください。
「HTML5.1」のその他の変更点について興味のある方はW3Cの公式リリースを参照ください。
