HTML5.1の新機能-H5 チュートリアル-php.cn

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 メニューの例を参照してください。

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

A HTML 5.1 context menu

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

詳細要素と概要要素

新しい

要素と

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

要素と

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

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

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

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

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

Details and summary elements

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

入力は、月、週、日時ローカルの 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 の週、月、日時の入力を参照してください。

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

Week, month and datetime-local inputs

レスポンシブ画像

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

srcset 属性

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

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

<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 属性は、ビューポート (ビューポート) の幅が 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="images/large/low-res.jpg">
</picture>

ログイン後にコピー

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

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

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

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

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

Working form validation with a message

フレームのAllowfullscreenプロパティ

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

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

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