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

HTML 5.1 の概要

2 年前の HTML5 標準のリリースは、Web 開発コミュニティにとって大きな出来事でした。これは、一連の印象的な新機能が含まれているだけでなく、HTML 4.01 標準が 1999 年にリリースされて以来、HTML に対する初めてのメジャー バージョン アップデートであるためでもあります。 「最新の」HTML5 標準を使用していることを自慢している Web サイトが今でもいくつか見られます。

幸いなことに、HTML 標準の次の更新までそれほど長く待つ必要はありません。 2015 年 10 月、W3C は HTML5 に残っている問題のいくつかを修正することを目的として、HTML5.1 ドラフトの作業を開始しました。複数回の修正を経て、草案は 2016 年 6 月に「勧告候補」段階、2016 年 9 月に「勧告案」段階に到達し、最終的に 2016 年 11 月に W3C 勧告がリリースされました。新しい規格に注目している人は、それが曲がりくねった道であることに気づいたかもしれません。当初提案された HTML5.1 の機能の多くは、設計が不十分であったり、ブラウザ ベンダーのサポートがなかったりするため、放棄されました。

HTML5.1 はまだ開発中ですが、W3C は HTML5.2 のドラフトの作業を開始しており、2017 年末にリリースされる予定です。この記事では、HTML5.1 の興味深い新機能と改善点について概要を説明します。これらの機能に対するブラウザのサポートはまだ不足していますが、少なくとも、各例をテストするためにこれらの機能をサポートするブラウザをいくつか紹介します。

コンテキストメニューはmenu要素とmenuitem要素を使用します

HTML5.1 ドラフトでは、コンテキストとツールバーという 2 つの異なるメニュー要素が導入されています。前者はローカル コンテキスト メニューを拡張するために使用され、通常はページ上でマウスを右クリックすることでアクティブ化され、後者は通常のメニュー コンポーネントを定義するために使用されます。開発プロセス中にツールバーは廃止されましたが、コンテキスト メニューは残されました。

<menu> タグを使用して、1 つまたは複数の <menuitem> 要素を含むメニューを定義し、それを contextmenu 属性を使用して任意の要素にバインドできます。

各 <menuitem> は次の 3 つのタイプのいずれかになります:

• チェックボックス – オプションを選択または選択解除できます;

• 
  

• コマンド – マウスのクリックでアクションを実行できます

• 
  

• ラジオ – 一連のオプションから 1 つを選択できます。

以下は、Firefox 49 では実行できる基本的な使用例ですが、現時点では Chrome 54 では実行できません。

CodePen 上の SitePoint (@SitePoint) の HTML5.1 メニューの例を参照してください。

サポートされているブラウザでは、このコンテキスト メニューの例は次のようになります:

コンテキスト メニューにはカスタム項目があります。

詳細と概要の要素

新しい <details> 要素と <summary> 要素は、マウスをクリックすることで追加情報を表示したり非表示にしたりできます。これは JavaScript を使用するときによく行われることですが、<details> 要素と <summary> 要素を使用してこれを行うことができます。 <summary> 要素をクリックして、残りの詳細要素を表示または非表示にします。 次の例は、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 の週、月、日時の入力を参照してください。

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

レスポンシブ画像

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 要素を使用する必要があります。 <picture> で複数の異なる <source> 要素を指定することで、さまざまな画面サイズに合わせてさまざまなリソースを持つピクチャを定義できます。 <source> 要素は、画像をロードするための 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 属性をすべての子要素に追加するのと同じように、すべての子要素に対するユーザー操作を無効にすることができます。

ダイアログ要素

<dialog> 要素はネイティブ ポップアップを提供し、便利なフォーム コレクションも備えています。<dialog> のメソッド属性を使用すると、フォームがサーバーに送信されなくなり、代わりにポップアップが閉じられ、結果がサーバーに返されます。ポップアップの創始者。

この機能は firfox でまだサポートされているようですので、次の例を見てください (翻訳者注: filfox V49.0.2 はサポートしていません:

) SitePoint (@SitePoint) HTML ダイアログ要素の CodePen の例を参照してください。

著者のその他の記事

• ESLint を使って稼働中 — Pluggable JavaScript Linter

• 
  

• PhantomCSS を使用したビジュアル回帰テスト

以上がHTML5.1 の新しいコンテンツの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。