Clever Geek Handbook

HTML5仕様では、ほぼすべてのid属性値を使用できます-賢明に使用してください

しばらく前に記事「 正しいidを作成する 」で述べたように、HTML 4.01は有効なid属性値に関してかなり制限されています。
IDおよびNAME属性は、文字（[A-Za-z]）で始まり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ "-"）、アンダースコア（ "_"）、コロンが続く必要があります（ "："）およびピリオド（ "。"）。


HTML5では、 ほぼすべての id属性値を使用できます。

id属性に関するHTML5仕様3.2.3.1 ：
値は、これを含む要素ツリー内の他のすべてのID値に対して一意であり、少なくとも1つの文字を含む必要があります。 値にスペースを含めることはできません。
少なくとも1文字、スペースなし。



これにより、id属性の値として特殊文字を使用できます。 また、注意を怠ると、CSSとJavaScriptの両方で問題を引き起こす値を使用できるため、これにより、ばかげた立場に立つ機会が多くなります。



次のHTMLコードを検討してください。 

<div id="#id"></div> <div id="div>p+p:first-child"></div>




CSSセレクターの競合



CSSを使用して上記の要素にアクセスするには、通常の構文を使用すると失敗します。 

 ##id {} #div>p+p:first-child {}




idにはCSSに事前定義された値がある文字が含まれているため、CSSセレクターを少し工夫して、必要に応じて機能させる必要があります。 1つの方法は、＃の代わりに属性値によるセレクターを使用することです。 

 [id="#id"] {} [id="div>p+p:first-child"] {}




別の方法は、競合を引き起こす文字をエスケープすることです： 

 #\#id {} #div\>p\+p\:first-child {}




JavaScriptの問題



jQueryなどのJavaScriptライブラリを使用して要素を操作する場合、これにより問題が発生します。 

 $("#div>p+p:first-child").css("fontSize", "2em");




CSSと同様に、特殊文字をエスケープする必要があります。 

 $("#div\\>p\\+p\\:first-child").css("fontSize", "2em");




要素の意味のある命名



HTML5では、要素のid属性値を自由に選択できます。 時々役に立つかもしれません。 しかし、私の意見では、CSSおよびJavaScriptと競合する文字を使用することは、単にトラブルを求めることを意味します。 通常の読みやすいテキストの代わりに、かっこいい文字を使用した同じこと。 リスクよりも利点が優先される場合に使用します。 ただし、できるという理由だけで新しい命名機能を使用しないでください。


More articles:


All Articles