この記事ではHTML5.1の興味をそそる新機能を紹介します！　これらの機能はまだブラウザでサポートされていないものもありますが、紹介する機能に対応したブラウザを使ったと想定して説明します。

 

 

 

 

menu/menuitems要素を用いてContext Menuを利用

HTML5.1は二つの異なるmenu要素を使用します。contextとtoolbarです。

前者はもとから備わっているcontext menuを拡張するために利用し、後者は一般のメニューコンポーネントを表示する目的で利用します。開発の過程でtoolbarは廃止されましたが、contextメニューは残されました。

 

menuタグを使うと複数の<menuitem>要素からなるメニューを表示し、contextmenu属性を使ってあらゆる要素にメニューを結びつけられます。

 

この機能はFirefox49ではサポートされていますが、Chrome54ではサポートされていません。

 

 

 

Details要素とSummary要素

新しい<details>や<summary>要素を使うと、対象要素をクリックすることで追加情報を表示させたり、隠したりする機能を実装できます。

monthやweekおよびdatetime-localなどの新しいinput type

新しいinput typeが追加されました。monthとweekを使うと、週や月を選択できます。

使用しているブラウザがChromeなら、ドロップダウン式のカレンダーから月または週を選べます。

 

また、datetime-localも利用可能となりました。これを使うと、ユーザーのタイムゾーン、つまり、日付と時間を選択できます。

 

Input typeはChromeではサポートされていますが、Firefoxではサポートされていません。

 

 

 

 

 

レスポンシブイメージ

HTML5.1はCSSを使用せずにレスポンシブイメージを実装する新機能をいくつか備えています。

 

srcset画像属性

srcset画像属性を使うと、ユーザーのデバイスに応じて画像表示を最適化できます。

例えば、通信速度の遅い小さなデバイスを使っているユーザーに対しては低解像度の画像を表示するなどです。

sizes画像属性

size画像属性を使うと、ユーザーのデバイスの画面サイズに応じた画像を表示できます。例えば、広い画面のデバイスには画像を２列で表示し、狭い画像のデバイスには１列で画像を表示するなどです。

 

picture要素

画面サイズに応じて画像のサイズを変更するだけでは十分ではなく、異なる画像を表示したい場合もあるでしょう。そういう場合にこのpicture要素を使います。この要素を利用するには、<img>を<picture>要素でラップし、子要素の<source>を複数指定します。こうすると、<source>要素がURLのソースとして機能し、画像をロードします。

 

 

 

form.reportValidity()を使ってフォームを検証

HTML5はform.checkValidity()メソッドを規定しています。このメソッドを使うと、規定の検証ソフトに対するフォームの入力を検証することができ、作業完了後にブール値が返されます。新しいreportValidity()もこれと同じようなものですが、エラーがある場合はユーザーに対してエラーを返す点が異なっています。

 

 

 

フレーム用のAllowfullscreen

このAllowfullscreenを使うと、requestFullscreen()を利用してコンテンツを全画面表示にできます。

 

Element.forceSpellCheck()を利用したスペルチェック

このelement.forceSpellCheck()メソッドを使うと、テキスト要素のスペルチェックができます。しかし、まだどのブラウザもサポートしていません。

 

 

 

最後に

この記事では、HTML5.1の新機能の一部を紹介したにすぎません。

新機能をすべて見たい人はこの仕様の変更点セクションを読んでください。あとはブラウザが早くこれらの機能に対応することを祈りましょう。

 

 

 

※本稿はA glimpse of HTML 5.1を翻訳・再編集したものです。