14

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.

andi
  • 6,442
  • 1
  • 18
  • 43
  • 3
    possible duplicate of [What characters are valid in CSS class selectors?](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors) – Pekka Oct 01 '13 at 18:40
  • Even if you *can*, I would avoid putting non-ascii characters in any class/variable names. It seems like something that has the potential to cause grief in the future. – tom Oct 01 '13 at 18:46
  • @tom - yeah, that's what I was concerned about, but I was hoping for someone to prove me wrong so that I wouldn't have to change the whole automated class name system here. – andi Oct 01 '13 at 18:49
  • @Pekka - yeah, I did see that other question, but it was asked nearly 5 years ago, and things change. – andi Oct 01 '13 at 18:50
  • They don't really change that much. All the info here is also available in the duplicate – Pekka Oct 01 '13 at 22:33

2 Answers2

14

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.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
8

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.

federico-t
  • 12,014
  • 19
  • 67
  • 111