HTML 5.1 の公開:14 の新機能の説明と実際の使用法
HTML5 は World Wide Web Consortium (W3C) によって所有されており、世界中のプロトコルが相互にアクセスできるように Web 全体に標準を提供しています。 2016 年 11 月、W3C は長期にわたって実行されている HTML 5 をアップデートしました。これは 2 年ぶりのマイナー アップデートです。初期の HTML 5.1 機能の多くは、設計上の欠陥とブラウザ ベンダーのサポートの欠如により廃止されました。
HTML 5.1 に引き継がれた要素や改善点はほとんどありませんが、それでもマイナーなアップデートです。新しい要素の一部にはコンボ タグが含まれており、
W3C は、2017 年末近くにリリースされる予定の HTML 5.2 のドラフトに向けた作業をすでに開始しています。その間、バージョン 5.1 で導入されたいくつかの興味深い新機能と改善点を紹介します。これらの機能は JavaScript に触れずに利用できます。 すべてのブラウザがこれらの機能をサポートしているわけではないため、運用環境で使用する前にブラウザのサポートを確認することをお勧めします。
14.フィッシング攻撃を防ぐ
target=’_blank’ を使用している人のほとんどは、新たに開いたタブによって window.opener.location がフィッシング ページに変更される可能性があるという興味深い事実についてまったく知りません。ユーザーに代わって、オープナー ページ上で悪意のある JavaScript コードを実行します。ユーザーはすでに開かれているページを信頼するため、不審に思われることはありません。
この問題を完全に排除するために、HTML 5.1 では、ブラウザーのコンテキストを分離する rel=”noopener” 属性の使用が標準化されました。 rel=”noopener” は、 タグと タグ内で使用できます。
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
読む:デザイナーのための 24 の CSS3 および HTML5 アニメーション ツール
13.図のキャプションを柔軟に処理する
HTML5.1 ではこの制限が緩和され、
<article> <h1>The Headline of todays news </h1> <figure> <img src="petrolimage.jpeg" alt="Petrol price drops"> <figcaption>A man fueling up his car at petrol station</figcaption> </figure> <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p> </article>
12.スペルチェック
スペルチェックは、キーワードが空の文字列、true と false である列挙型属性です。 true 状態は、要素のスペルと文法がチェックされることを示します。
element.forceSpellCheck() は、ユーザーがその要素にフォーカスしたことがない場合でも、ユーザー エージェントにテキスト要素のスペルと文法エラーを強制的に報告させます。
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11.空のオプション
新しいバージョンの HTML では、空の
10.フレームの全画面表示を許可
フレーム用に開発されたブール値のallowfullscreen属性を使用すると、requestFullscreen()メソッドを使用してコンテンツを全画面表示できるかどうかを制御できます。たとえば、YouTube のプレーヤーを埋め込む iframe を考えてみましょう。プレーヤーがビデオを全画面表示できるようにするには、allowfullscreen 属性が必要です。
<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>
9.ネストされたヘッダーとフッター
HTML 5.1 では、ヘッダーとフッターを別のヘッダー内にネストできます。 ヘッダーまたはフッター自体がセクション化コンテンツ内に含まれている場合は、ヘッダー要素にヘッダーまたはフッターを追加できます。
この機能は、
以下のコードでは、
<article> <header> <h2>Lesson: How to cook chicken</h2> <aside> <header> <h2>About the author: Tom Hank</h2> <p><a href="./tomhank/">Contact him!</a></p> </header> <p>Expert in nothing but Cooking. The cookbook sideshow.</p> </aside> </header> <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it. </ins></p> </article>
8.幅ゼロの画像
新しい HTML バージョンでは、サイズがゼロの画像を追加できます。この機能は、画像がユーザーを対象としていない場合に使用されます。 img 要素が画像の表示以外の目的、たとえばページビュー数をカウントするサービスの一部として使用される場合は、width 属性と height 属性の値を 0 にして使用します。幅がゼロの画像の場合は、空の属性を使用することをお勧めします。
<img src="theimagefile.jpg" width="0" height="0" alt="">
7.フォームを検証中
新しい reportValidity() メソッドを使用すると、フォームを検証して結果を取得し、ブラウザで直接ユーザーにエラーを報告できます。要素に同時に複数の問題が発生した場合、ユーザー エージェントは複数の制約違反を報告することがあります。この場合と同様、「パスワード」入力は必須ですが空であるため、エラーのマークを付ける必要があります。
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script> 6.ブラウザのコンテキスト メニュー
HTML 5.1 では、