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: 202704
  • Created:
  • Creator: CitizenK
  • Is current revision? No
  • Comment /* ID Uniqueness */

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?

Netscape 6's unusual sensitivity to case is based on a close reading of the HTML 4.01 specification. In section 7.5.2, which defines class and IDs, we find the following text:

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

The marker "{{mediawiki.external('CS')}}" means "case sensitive," as defined in section 6.1 of the specification. Thus, the Mozilla team, committed to following open standards as closely as possible, implemented both class and id names as case-sensitive values. As of this writing, Netscape 6 is the only browser to honor this defined behavior; other browsers treat both class and id names as case-insensitive.

ID Uniqueness

There is a further restriction, however, on the use of id names. Section 12.2.1 makes it illegal for the name and id attributes to use values which are a case-insensitive match. An "illegal" example is given in the specification, preceded by the text: "The following example is illegal with respect to uniqueness since the two names are the same except for case."

<P><A name="xxx">...</A>
<P><A name="XXX">...</A>

We could freely substitute id for name and the point would be the same, since name and id share the same name space (see section 12.2.3). Thus, even though class and id values are defined to be case-sensitive, there is an aspect of case-insensitivity to the use of id values.

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>
<p>Netscape 6's unusual sensitivity to case is based on a close reading of the HTML 4.01 specification. In <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.2">section 7.5.2</a>, which defines <code>class</code> and <code>ID</code>s, we find the following text:
</p>
<blockquote>
<dl><dt>id = <a class="external" href="http://www.w3.org/TR/html401/types.html#type-name">name</a> <a class="external" href="http://www.w3.org/TR/html401/types.html#case-sensitive">[CS</a>]
</dt><dd>This attribute assigns a name to an element. This name must be unique in a document.
</dd><dt>class = <a class="external" href="http://www.w3.org/TR/html401/types.html#type-cdata">cdata-list</a> <a class="external" href="http://www.w3.org/TR/html401/types.html#case-sensitive">[CS</a>]
</dt><dd>This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
</dd></dl>
</blockquote>
<p>The marker "{{mediawiki.external('CS')}}" means "case sensitive," as defined in <a class="external" href="http://www.w3.org/TR/html401/types.html#h-6.1">section 6.1</a> of the specification. Thus, the Mozilla team, committed to following open standards as closely as possible, implemented both <code>class</code> and <code>id</code> names as case-sensitive values. As of this writing, Netscape 6 is the only browser to honor this defined behavior; other browsers treat both <code>class</code> and <code>id</code> names as case-insensitive. 
</p>
<h4 name="ID_Uniqueness"> ID Uniqueness </h4>
<p>There is a further restriction, however, on the use of <code>id</code> names. <a class="external" href="http://www.w3.org/TR/html401/struct/links.html#h-12.2.1">Section 12.2.1</a> makes it illegal for the <code>name</code> and <code>id</code> attributes to use values which are a case-insensitive match. An "illegal" example is given in the specification, preceded by the text: "The following example is illegal with respect to uniqueness since the two names are the same except for case."
</p>
<pre>&lt;P&gt;&lt;A name="xxx"&gt;...&lt;/A&gt;
&lt;P&gt;&lt;A name="XXX"&gt;...&lt;/A&gt;</pre>
<p>We could freely substitute <code>id</code> for <code>name</code> and the point would be the same, since <code>name</code> and <code>id</code> share the same name space (see <a class="external" href="http://www.w3.org/TR/html401/struct/links.html#anchors-with-id">section 12.2.3</a>). Thus, even though <code>class</code> and <code>id</code> values are defined to be case-sensitive, there is an aspect of case-insensitivity to the use of <code>id</code> values.
</p>
<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