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 ID
s, 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
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.