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要素とmenuitems要素を使用します

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

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

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

• チェックボックス - オプション (オプション) を選択または選択解除できます。

• コマンド - マウスがクリックされたときにアクションを実行できます。

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

Firefox 49 で動作する基本的な使用例がありますが、現時点では Chrome 54 では動作しません。

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

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

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

詳細要素と概要要素

新しい

要素と

要素は、マウスをクリックすることで追加情報を表示したり非表示にしたりできます。これは JavaScript を使用するときによく行われることですが、

要素と

要素を使用してこれを行うことができます。

要素をクリックすると、残りの詳細要素を表示または非表示にすることができます

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

<img src="/static/imghwm/default1.png"  data-src="images/low-res.jpg"  class="lazy"   srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

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

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

<img src="/static/imghwm/default1.png"  data-src="images/low-res.jpg"  class="lazy"   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="/static/imghwm/default1.png"  data-src="images/low-res.jpg"  class="lazy"   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 属性は、ビューポート (ビューポート) の幅が 40em 以下の場合、画像の幅をビューポートの幅の 50% として定義します。画像の幅は、口の幅の 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="/static/imghwm/default1.png"  data-src="images/large/low-res.jpg"  class="lazy"   alt="HTML5.1の新機能" >
</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 要素

要素はネイティブのポップアップ ボックスを提供し、便利なフォームのコレクションも備えています。

のメソッド属性を使用すると、フォームがサーバーに送信されなくなります。ポップアップ ボックスを閉じ、結果をポップアップ ボックスの作成者に返します。

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

SitePoint (@SitePoint) のサンプル HTML ダイアログ要素を参照してください) CodePen

上記は HTML5.1 の新しい内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。