Can I safely use unicode characters (e.g. accents) in CSS class names or ids?

Question

I just encountered a situation where product names are automatically pulled in to my HTML as class names, and one of those product names has an accented letter. It looks like this:

<div class="español">Hola</div>

If I add a CSS declaration with that class, like this:

.español {background:yellow;}

Will it cause any problems? It seems to work so far, but I'm not sure if it's completely cross-browser compatible.

Also, would it be any different if that were an id instead of a class? That seems to work so far, too, but again I am not sure if it'll hold up everywhere.

Answer 1

From the CSS specification:

"In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_)"

The ISO 10646 standard and Unicode standard have synchronised their character sets (ref), so in this aspect they are the same.

The ñ character has the character code U+00F1, so that is safe to use in an identifier.

Answer 2

Apparently yes. In fact, HTML 4.01 already allowed you to use Unicode characters in the class attribute. Now HTML 5 allows them also on the id attribute. The cool thing is that it's been tested with IE 6 and works too, so it's backwards compatible.

Now what you should ask yourself is, do I really need them? In my eyes is just asking for trouble because while the W3 accepts them, some not-major browser might not support them (think browsers for the visually impaired or others).

Read this for more info on the subject: http://mathiasbynens.be/notes/html5-id-class.