HTML5.1 の新しいコンテンツの紹介

詳細と概要については、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 の週、月、日時の入力を参照してください。

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

レスポンシブ画像

HTML 5.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 の場合は低解像度の画像が表示され、3 以上の場合は高解像度の画像が表示されます。 -res が表示されます が表示されます。

または、画像をさまざまなサイズで表示することを選択できます。これには 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 ピクセルとして定義されています。

サイズ属性

ユーザーの画面サイズに応じて画像を異なる方法で表示したい場合があります。たとえば、画像を幅の広い画面では 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 属性はイメージの幅をビューポートの幅の 50% として定義します。ビューポートの幅が 40em 以下の場合、size 属性はイメージの幅を 100% として定義します。ビューポートの幅。

絵要素

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

レスポンシブ イメージについて詳しく知りたい場合は、「srcset を使用してレスポンシブ イメージを構築する方法」をクリックしてください。

form.reportValidity() を使用してフォームを検証します

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

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

「名」入力ボックスは空でないことが必要です。入力されていない場合は、エラーがマークされます。予想どおりに進むと、次のようになります:

フレームのallowfullscreenプロパティ

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

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

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

HTML5.1には機能が書かれていません

一部の機能は最初のドラフトで定義されましたが、主にブラウザー ベンダーからの関心がなかったため、最終的には削除されました。楽しい方法をいくつかご紹介します:

不活性属性

inert 属性は、disabled 属性をすべての子要素に追加するのと同じように、すべての子要素に対するユーザー操作を無効にすることができます。

ダイアログ要素