mozilla

Revision 202702 of Case Sensitivity in class and id Names

  • Revision slug: Case_Sensitivity_in_class_and_id_Names
  • Revision title: Case Sensitivity in class and id Names
  • Revision id: 202702
  • Created:
  • Creator: CitizenK
  • Is current revision? No
  • Comment /* Original Document Information */

Revision Content

In the authoring of both CSS and JavaScript/DOM (otherwise known as DHTML) routines, it is a near-certainty that class and id names will be used to identify elements. We have discovered, however, that many authors are running into trouble with class and id names because they're used to the bugs of browsers that don't fully support open standards. The most common case is where the name uses different case in the document source than is found in the CSS or JavaScript. For example, there might be this CSS:

p.Warning {color: red; background: yellow;}

...coupled with this HTML:

<p class="warning">WARNING!</p>

In Netscape 6, the paragraph in question will have neither red text nor a yellow background. As far as Netscape 6 is concerned, Warning and warning are two different identifiers, because HTML 4.01 defines class and id names to be case-sensitive. (For a detailed explanation of what HTML 4.01 says, see the following section, "Why So Case-Sensitive?")

The only way to avoid this particular problem is to make sure that your class and id names have consistent case throughout the entire document, and with respect to your CSS and JavaScript. It is also important to avoid using class or id names which are a case-insensitive match within the same document. For example, you would not want to do something like:

.Urgent {color: purple;}
.urgent {color: yellow;}

Even though these are technically two distinct class names, browsers other than Netscape 6 will treat them as though they are the same thing. Therefore, authors should not rely on case-sensitivity as a way of creating distinct identifiers, unless they are designing solely for a truly standards-compliant browser such as Netscape 6.

Why So Case-Sensitive?

ID Uniqueness

Recommendation

Original Document Information

  • Author(s): Eric A. Meyer, Netscape Communications
  • Last Updated Date: Published 05 Mar 2001
  • Copyright Information: Copyright © 2001-2003 Netscape.
  • Note: This reprinted article was originally part of the DevEdge site.

Revision Source

<p>In the authoring of both CSS and JavaScript/DOM (otherwise known as DHTML) routines, it is a near-certainty that <code>class</code> and <code>id</code> names will be used to identify elements. We have discovered, however, that many authors are running into trouble with <code>class</code> and <code>id</code> names because they're used to the bugs of browsers that don't fully support open standards. The most common case is where the name uses different case in the document source than is found in the CSS or JavaScript. For example, there might be this CSS:
</p>
<pre>p.Warning {color: red; background: yellow;}</pre>
<p>...coupled with this HTML:
</p>
<pre>&lt;p class="warning"&gt;WARNING!&lt;/p&gt;</pre>
<p>In Netscape 6, the paragraph in question will have neither red text nor a yellow background. As far as Netscape 6 is concerned, <code>Warning</code> and <code>warning</code> are two different identifiers, because HTML 4.01 defines <code>class</code> and <code>id</code> names to be case-sensitive. (For a detailed explanation of what HTML 4.01 says, see the following section, "<a href="en/Case_Sensitivity_in_class_and_id_Names#Why_So_Case-Sensitive.3F">Why So Case-Sensitive?</a>")
</p><p>The only way to avoid this particular problem is to make sure that your <code>class</code> and <code>id</code> names have consistent case throughout the entire document, and with respect to your CSS and JavaScript. It is also important to avoid using <code>class</code> or <code>id</code> names which are a case-insensitive match within the same document. For example, you would <b>not</b> want to do something like:
</p>
<pre>.Urgent {color: purple;}
.urgent {color: yellow;}</pre>
<p>Even though these are technically two distinct <code>class</code> names, browsers other than Netscape 6 will treat them as though they are the same thing. Therefore, authors should not rely on case-sensitivity as a way of creating distinct identifiers, unless they are designing solely for a truly standards-compliant browser such as Netscape 6. 
</p>
<h3 name="Why_So_Case-Sensitive.3F"> Why So Case-Sensitive? </h3>
<h4 name="ID_Uniqueness"> ID Uniqueness </h4>
<h3 name="Recommendation"> Recommendation </h3>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Eric A. Meyer, Netscape Communications
</li><li> Last Updated Date: Published 05 Mar 2001
</li><li> Copyright Information: Copyright © 2001-2003 Netscape.
</li><li> Note: This reprinted article was originally part of the DevEdge site.
</li></ul>
</div>
Revert to this revision