Какие символы широко поддерживаются в именах классов CSS?

Как подробно описано здесь среди прочего, единственные допустимые символы в имя класса html/css — это a-z, A-Z, 0-9, дефис и подчеркивание, а первым символом должна быть буква. Но на практике, какие символы на самом деле поддерживаются большинством браузеров? В частности, мне интересно, какие браузеры правильно понимают косую черту (/) в имени класса и какие браузеры поддерживают имена классов, начинающиеся с цифры.

Меня в первую очередь интересует получение ответа для html, а не для xhtml, если есть разница.

Спасибо.


html css character cross-browser classname
person last-child    schedule 11.04.2010    source источник
comment
Разве ты не сказал только что, az, A=Z, 0-9, =, _?   -  person John Saunders    schedule 11.04.2010
comment
Это допустимые символы, но на практике другие символы также поддерживаются, по крайней мере, некоторыми браузерами. Интересно, какие символы можно надежно использовать, кроме допустимых (если они есть).   -  person last-child    schedule 11.04.2010
comment
Почему бы просто не открыть Блокнот и не протестировать его...   -  person bigstylee    schedule 11.04.2010
comment
Зачем вам вообще рассматривать возможность использования недопустимых имен классов?   -  person Jørn Schou-Rode    schedule 11.04.2010
comment
Иногда использование числа в начале или косой черты или другого символа является просто наиболее естественным способом назвать класс, поэтому, например, добавление букв в начале просто ради этого может сильно повредить читабельности разметки.   -  person last-child    schedule 11.04.2010

Ответы (4)


arrow_upward
10
arrow_downward

Обратите внимание, что имена классов определяются HTML, а не CSS. HTML4 говорит, что атрибут class является атрибутом cdata-list, т.е. токены, разделенные пробелами. Таким образом, один токен имени класса может содержать любой символ, кроме пробельных символов.

Интересно, какие браузеры правильно понимают косую черту (/) в имени класса и какие браузеры поддерживают имена классов, начинающиеся с цифры.

Чтобы обратиться к таким именам в селекторе классов CSS, вам нужно будет использовать escape. например.:

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

соответствует:

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

Это поддерживается всеми текущими браузерами. Он не поддерживался IE5, но, к счастью, это больше не беспокоит. (Если вас беспокоит несоответствие кодировки символов, вы можете предпочесть кодировать ä как \E4, но это не ограничение CSS как такового.)

Если вы спрашиваете, какие браузеры позволят вам обойтись без недопустимого селектора

.1blah/bläh

Тогда, ну, кого это действительно волнует? Просто используйте действительный.

person bobince    schedule 11.04.2010
comment
+1, и я хотел бы дать вам еще одну только за последнюю строчку! - person Jørn Schou-Rode; 11.04.2010
comment
Допустимые имена классов определяются с помощью CSS. Но те, которые также допустимы в HTML, являются лишь их подмножеством. Обратите внимание, что CSS — это язык таблиц стилей, который можно использовать для любого структурированного языка, а не только для HTML. - person Gumbo; 11.04.2010
comment
Спасибо, bobince, это решает проблему для меня! Первоначально я назвал этот вопрос. Какие символы широко поддерживаются в именах классов HTML? но кто-то изменил HTML на CSS. В этом случае для меня важно сделать HTML читабельным, не рискуя проблемами, так что это очень помогает. Взлом IE5 может не быть проблемой в этом случае. Спасибо! - person last-child; 11.04.2010
comment
Ах я вижу. [И да, между XHTML и FWIW практически нет разницы.] - person bobince; 11.04.2010
comment
так что class="a1<2" действителен? - person Royi Namir; 01.04.2013
comment
@Royi: нет, но class="a1&lt;2" есть. - person bobince; 03.04.2013
comment
@bobince Итак, я не понимаю, что такое cdata-list, там написано что-то кроме пробелов. Поэтому я не могу понять, почему мой пример недействителен... - person Royi Namir; 03.04.2013
comment
a1<2 — допустимое имя класса CSS и допустимое значение атрибута HTML class. Однако в HTML, если вы хотите включить буквальный символ < в разметку, вы должны написать его как &lt;. Если вы затем прочитаете className элемента с этим атрибутом, вы увидите, что это a1<2. - person bobince; 04.04.2013

arrow_upward
1
arrow_downward

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

Если вы посмотрите на грамматику, вы поймете, что идентификаторы определяются как

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]?

так вот вам ответ..

(это для CSS2)

person Jack    schedule 11.04.2010
comment
Это не объясняет, какие символы или последовательности на самом деле поддерживаются. Поддерживается ли .foo\ bar, .\/ или .\1234? - person Gumbo; 11.04.2010

arrow_upward
1
arrow_downward

Юникод работает http://snook.ca/archives/html_and_css/unicode_for_css_class_names

person Azeem.Butt    schedule 11.04.2010

arrow_upward
-1
arrow_downward

/ и другие символы используются в качестве селекторов (особенно в CSS3), поэтому их нельзя использовать в именах классов. Поддерживаемые символы - это те, которые вы уже сказали.

person Amy B    schedule 11.04.2010