HTML5.1の新機能は何ですか?

以下の例は、Firefox と Chrome でテストできます。

詳細と概要については、CodePen 上の SitePoint (@SitePoint) の HTML5.1 デモをご覧ください。

このデモは、サポートされているブラウザーでは次のように表示されます:

追加の入力タイプ - 月、週、日時ローカル

入力は、月、週、日時ローカルの 3 つのタイプを拡張します。

最初の 2 つのタイプでは、週または月を選択できます。 Chrome では、どちらもドロップダウン カレンダーとして表示され、特定の週または月を選択できます。 JavaScript を使用して値を取得すると、おおよそ次のような文字列が得られます: "2016-W43" (週入力); "2016-10" (月入力)。

当初、HTML5.1 ドラフトでは、datetime と datetime-local という 2 つの日付型入力が導入されました。違いは、datetime-local ではユーザーのタイム ゾーンが使用されるのに対し、datetime ではタイム ゾーンを選択できることです。開発中に datetime は放棄され、現在は datetime-local のみが存在します。 datetime-local 入力は、週や月のように選択できる日付と、個別に入力できる時刻の 2 つの部分で構成されます。

以下はすべての新しいタイプの入力の例です。Chrome では正常に表示されますが、Firefox では表示されません。

CodePen 上の SitePoint (@SitePoint) の HTML 5.1 の週、月、日時の入力を参照してください。

このデモは、サポートされているブラウザーでは次のように表示されます:

レスポンシブ画像

HTML5.1には、CSSを使用せずにレスポンシブ画像を実装するいくつかの新機能が含まれています。各機能には独自の個別の使用シナリオがあります。

srcset 属性

srcset image 属性を使用すると、異なるピクセル密度を持つ複数の代替画像データ ソースをリストできます。これにより、ブラウザーはユーザーのデバイスに適切な品質の画像を選択できるようになります (デバイスのピクセル密度、スケーリング、またはネットワーク速度によって決まります)。たとえば、低速モバイル ネットワークや小さな画面の電話の場合、ユーザーには低解像度の画像が提供される必要があります。

srcset 属性は、URL のカンマ区切りのリストを受け入れます。各 URL には、要求された画像に最も近いピクセル比 (1 つの CSS ピクセルで表される物理ピクセルの数) を表す変更 x が含まれます。以下に簡単な例を示します。

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

この例では、ユーザー デバイスのピクセル比が 1 の場合は低解像度の画像が表示され、2 の場合は高解像度の画像が表示されます。 3以上の場合、超高解像度の画像が表示されます。

あるいは、画像をさまざまなサイズで表示することを選択できます。これには w を使用する必要があります:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

この例では、低解像度画像は幅 600 ピクセル、高解像度画像は幅 1000 ピクセル、超高解像度画像は幅 1400 ピクセルに定義されています。

sizes 属性

ユーザーの画面サイズに応じて、さまざまな方法で画像を表示したい場合があります。たとえば、画像を広い画面では 2 列で表示し、狭い画面では 1 列で表示することができます。これは、size 属性を使用して実現できます。これにより、画面の幅を画像に割り当て、srcset 属性を介して適切な画像を選択できます。以下は例です:

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

ビューポートの幅が 40em より大きい場合、size 属性はビューポートの幅 (viewport) の幅の 50% として画像の幅を定義します。が 40em 以下の場合、イメージの幅はビューポートの幅の 100% として定義されます。

picture要素

画面に応じて画像のサイズを変更してもニーズを満たせず、画面に応じて異なる画像を表示したい場合は、picture要素を使用する必要があります。 で複数の異なる 要素を指定することで、さまざまな画面サイズに合わせてさまざまなリソースを持つピクチャを定義できます。 要素は、画像をロードするための URL のソースとして機能します。

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">

  <img src="images/large/low-res.jpg">
</picture>

レスポンシブ画像について詳しく知りたい場合は、srcsetでレスポンシブ画像を構築する方法をクリックしてください

form.reportValidity()でフォームを確認します

HTML5で定義されているform.checkValidity()メソッドでフォームを確認できます事前定義されたバリデーターと一致し、ブール値を返すかどうか。新しい reportValidity() メソッドも同様で、フォームを検証して結果を返しますが、ユーザーにエラーを報告することもできます。以下に例を示します (Firefox または Chrome でテストしてください):

CodePen で SitePoint (@SitePoint) サンプル HTML 5.1 レポートの有効性デモをご覧ください。

「名」入力ボックスは空でないことが必須で、入力されていない場合はエラーがマークされます。期待通りであれば、次のようになります:

フレームのAllowfullscreenプロパティ

フレームの新しいブールプロパティallowfullscreenは、requestFullscreen()メソッドを通じてコン​​テンツを全画面で表示できるかどうかを制御できます。

スペルチェックには element.forceSpellCheck() を使用します

新しい element.forceSpellCheck() メソッドを使用すると、テキスト要素に対してスペルチェックをトリガーできます。これは、この記事にリストされている、どのブラウザーでもまだサポートされていない最初の機能でもあります。おそらく、これは、ユーザーが直接編集していない要素を検査するために使用できる可能性があります。

HTML 5.1 に含まれない機能

いくつかの機能が最初のドラフトで定義されましたが、主にブラウザー ベンダーからの関心の欠如により、最終的には削除されました。興味深いメソッドをいくつか紹介します:

inert 属性

inert 属性は、disabled 属性をすべての子要素に追加するのと同じように、すべての子要素に対するユーザー インタラクションを無効にできます。

Dialog 要素