ホームページ » コーディング » HTML 5.1の10の新機能とその使い方

    HTML 5.1の10の新機能とその使い方

    HTMLの仕様は 大幅な見直し 数週間前にW3Cが出版したとき 新しいHTML 5.1勧告 最近のブログ投稿で、W3Cは新しいメジャーリリースを ゴールドスタンダード, HTML 5.1はHTMLを使用してより柔軟なWebエクスペリエンスを作成する方法の新しい方法を提供します。.

    この記事では、皆さんが利用できる新機能について説明します。 JavaScriptに触れずに, しかし、JavaScriptの背景の改善は、あなたがそれを見ることができるように、注目に値する。 公式変更履歴.

    現在すべてのブラウザがこれらの機能のすべてをサポートしているわけではないので注意してください。 ブラウザのサポートを確認する あなたが生産にそれらを使用する前に。に興味があるなら HTML標準のさらなる発展, HTML 5.2のドラフトもチェックすることができます。.

    レスポンシブデザインのための複数の画像リソースの定義

    HTML 5.1では、あなたは使うことができます と一緒にタグ付け srcset 作成する属性 レスポンシブ画像選択 可能。の タグは 画像コンテナ これにより開発者は 異なる画像リソースを宣言する に適応するために UAのビューポートサイズ、画面のピクセル密度、画面の種類、およびその他で使用されるパラメータ レスポンシブデザイン.

    の タグ自体には何も表示されず、単に次のように機能します。 複数の画像リソースのコンテキスト. あなたは宣言する必要があります デフォルトの画像リソース の値として src の属性 タグ、そして 代替画像リソース 内に入る srcset の属性 そして 要素.

    コード例：

    2.追加情報を表示または非表示にする

    とともに

    そして タグ、できます 詳細情報を追加 コンテンツ作品に。追加情報 デフォルトでは表示されません, しかし、ユーザーが興味を持っているなら、彼らは 見てみるという選択肢がある. あなたのコードでは、あなたはすることになっています 置きます 内側のタグ
    . 後に あなたができるタグ 追加情報を追加する 隠したい.

    コード例：

     
     
    エラーメッセージ
     
     この動画のダウンロードを完了できませんでした. 
     
    ファイル名：
    yourfile.mp4
     
    ファイルサイズ：
    100 MB
     
    期間：
    00:05:27

    これはFirefox 50.0.2でこのコード例がどのようになるかです。

    3.ブラウザのコンテキストメニューに機能を追加する

    とともに 要素とその type = "コンテキスト" 属性、できます カスタム機能を追加する に ブラウザのコンテキストメニュー. あなたが割り当てる必要があります の子要素として

    タグ。の id の 要素はする必要があります と同じ値を持つ コンテキストメニュー 属性 コンテキストメニューを追加したい要素の

    の タグ缶 3種類あります, 「チェックボックス」, "コマンド" （JavaScriptを使ってアクションを追加する必要があります） 無線. コンテキストメニューに複数のメニュー項目を追加することは可能ですが、 ブラウザサポート この機能は まだあまり良くない. Chrome 54はそれをサポートしていません、そして、Firefox 50は1つの追加のコンテキストメニューの存在を許すだけです。以下に、Firefox 50でコード例がどのように機能するかを見ることができます。.

    4.ヘッダーとフッターをネストする

    HTML 5.1ではあなたにできること ヘッダとフッタをネストする 各レベルが セクショニングコンテンツに含まれる. 以下のメモはW3Cのドキュメントからのスクリーンショットで、ヘッダーとフッターの入れ子の正しい方法について開発者に助言します。.

    この機能はあなたが追加したい場合に便利です。 セマンティックセクショニング要素への複雑なヘッダ, といった

    そして
    . 以下のコード例は、ヘッダーの内側にサイドバーを作成します。