Case Sensitivity in class and id Names

Summary: Although CSS is itself case-insensitive, class and ID names are defined to be case-sensitive in HTML 4.01. Find out how this wrinkle can affect your site design and best practices to avoid any problems. 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 "[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

Because of the flaws which are present in some existing implementations and the restrictions defined in HTML 4.01, it is doubly important to ensure that your class and id names are of a consistent case throughout a document, and that you do not attempt to define names which are case-insensitive matches.

Related Links

• HTML 4.01, section 7.5.2
• HTML 4.01, section 12.2.3