¿Qué caracteres son ampliamente compatibles con los nombres de clases de CSS?

Question

Como se detalla here entre otros lugares, los únicos caracteres válidos en un nombre de clase html/css son a-z, A-Z, 0-9, guión y guión bajo, y el primer carácter debe ser una letra. Pero en la práctica, ¿qué personajes son, de hecho, compatibles con la mayoría de los navegadores? Más específicamente, me pregunto qué navegadores entienden correctamente una barra inclinada (/) en un nombre de clase, y qué navegadores admiten nombres de clase que comienzan con un número.

Estoy interesado principalmente en obtener una respuesta para html en lugar de xhtml, en caso de que exista una diferencia.

Gracias.

Answer 1

Nota los nombres de clase están definidos por HTML, no CSS. HTML4 says el atributo class es un cdata-list, que es tokens separados por espacios. Por lo tanto, un solo token de nombre de clase puede contener cualquier carácter, excepto los caracteres de espacios en blanco.

Me pregunto qué navegadores entienden correctamente una barra inclinada (/) en un nombre de clase, y qué navegadores admiten nombres de clase que comienzan con un número.

Para hacer referencia a dichos nombres en un selector de clase CSS, necesitaría usar un escape. ej .:

<div class="1blah/bläh"> 

se corresponde con:

.\31 blah\2F bläh { ... } 

Esto es apoyado por todos los navegadores actuales . No fue compatible con IE5, pero afortunadamente ya no es una preocupación. (Si tuviera preocupaciones acerca de los desajustes de codificación de caracteres, es posible que prefiera para codificar el ä como \E4, pero eso no es una limitación de la CSS como tal.)

Si estás preguntando qué navegadores le dejará escapar con el inválido selector

.1blah/bläh 

Entonces, ¿a quién le importa realmente? Solo usa el válido.

Answer 2

/y otros símbolos se utilizan como selectores (especialmente en CSS3) por lo que no pueden utilizarse en nombres de clase. Los personajes compatibles son los que ya dijiste.

Answer 3

http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html

Si nos fijamos en la gramática a entender que los identificadores se definen como

ident  {nmstart}{nmchar}* 
nmstart  [a-zA-Z]|{nonascii}|{escape} 
nmchar  [a-z0-9-]|{nonascii}|{escape} 
nonascii [^\0-\177] 
unicode  \\[0-9a-f]{1,6}[ \n\r\t\f]? 

es su respuesta así que aquí ..

(esto es para CSS2)

Answer 4

Unicode funciona http://snook.ca/archives/html_and_css/unicode_for_css_class_names