HTML 5:知っておくべきdata属性

原文:All You Need to Know About the HTML5 Data Attribute
原文:HTML 5のデータ属性を知っておく必要があります
訳者:dwqs
HTML 5のDataプロパティでは、要素にデータをカスタマイズできます.この記事では、Dataプロパティの使い方を考えてみましょう.
紹介する
HTML 5の前に、classとrelのプロパティに依存して、Webサイトで使用する必要があるデータクリップを格納する必要があります.この方法は、Webサイトの外観と実用性の間で競合することがあります.HTML 5 Data属性の存在は、ニーズを満たすことができます.
Webサイト自体のデータが増えるにつれて、特定の要素もデータを保存し始めました.たとえば、audioアプリケーションを作成するには、次のコードを使用します.

<audio controls="controls">

  <source src="track1.mp3" type="audio/mpeg" />

</audio>

上記のコードは完全に受け入れられますが、オーディオソースではなく、時間、速度、著者など、オーディオ自体に関する情報をより多く保存する必要がある場合があります.これには、次のようなデータ属性が必要です.

<audio controls="controls">

  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />

</audio>

これらのカスタムデータ属性により,audioに対して検索,フィルタリング,パケット化などの動作を実行できる.
Dataプロパティの使用方法
カスタムデータ属性の名前はdataで始まる必要があり、ハイフンの後ろには少なくともHTML仕様に合致する文字が必要です.( HTML naming convention .)
W 3 CドキュメントのData属性の説明は以下の通りです.
                    Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
これは、アプリケーション内でdataデータを使用するだけで、ユーザーに提示すべきではないことを意味します.さらに重要なのは、要素に任意の数のData属性をカスタマイズし、意味のある値を与えることです.
データ属性を使用する必要があるのはいつですか?
以上より,Data属性の使い方が分かった.しかし、この属性をよりよく理解するために、いくつかの例を見てみましょう.
Tuts+のWebdesignプレートでは、data属性の使用例がよく示されています.One of the tuts,Dataプロパティをスタイルに適用し、メニューに「バブル」通知効果を与えます.この例では、dataプロパティは、気泡通知のみを望む値に使用されます.

<a href="#" class="pink" data-bubble="2">Profile</a>

もう1つの例:quick tip、Data属性がプロンプト情報としてどのようにプロンプトボックスに使用されるか

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

データ属性を使用しないのはいつですか?
要素がすでに確立されているか、またはより適切な属性がある場合は、Data属性を使用するべきではありません.次の例ではdataを使用するのは適切ではありません.

<span data-time="20:00">8pm<span>

時間を表す要素には、すでにdatetimeプロパティがあるからです.

<time datetime="20:00">8pm</time>

同時に、Dataプロパティは代替メタデータまたはマイクロフォーマットとして使用されるべきではありません.マイクロフォーマットは主に人間のために設計され、コンテキスト情報を紹介するために使用される.例えば、個人や組織の連絡情報に関するVcardがある場合は、vcardというclass属性を与えて、機械に連絡情報が含まれていることを理解させる必要があります.
マイクロフォーマットを利用したコードは以下の通りです.

<div class="vcard">

    <span class="fn " >Aaron Lumsden</span>

</div>

逆に、Data属性を利用するコードは以下の通りです.

<div class="vcard">

    <span data-name="Aaron Lumsden " >Aaron Lumsden</span>

</div>

マイクロフォーマットの詳細については、Mircorformats.org.
CSSでのData属性の使用
HTMLタグにData属性が実装されている以上、CSSでもこの属性を使用できます.注意:データ・プロパティを直接使用する場合に適している場合もありますが、スタイル・ルールを直接使用する必要はありません.以下のように簡単に使用します.

[data-role="page"] {

  /* Styles */

}

JQueryでのDataプロパティの使用
JQueryではDataプロパティをどのように使用しますか?JQueryは、要素からデータを取得する方法を多く提供しています.たとえば、次のようになります.

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

上記と同様のアンカーテキストタグがある場合、data-infoというdata属性があります.次の方法で、data-infoを含む任意の属性を取得できます.

$('.button').click(function(e) {

   e.preventDefault();

   thisdata = $(this).attr('data-info');

   console.log(thisdata);

 });

 
原文先発:http://www.ido321.com/1304.html
上一篇:大規模なWebサイトのシステムアーキテクチャの進化の道