Які символи дійсні в іменах / селекторах класів CSS?

Які символи / символи дозволені в селекторах класів CSS ?
Я знаю, що наступні символи недійсні , але які символи є дійсними ?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Ви можете перевірити безпосередньо в граматиці CSS .

В основному ¹ , ім'я повинно починатися з підкреслення ( _), дефіса ( -) або літери ( a- z), після чого будь-яка кількість дефісів, підкреслення, букв чи цифр. Є улов: якщо перший символ є дефісом, другий символ повинен бути ² буквою або підкресленням, а ім'я має бути не менше 2 символів.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Коротше кажучи, попереднє правило перекладається на наступне, витягнуте із специфікації W3C. :

У CSS ідентифікатори (включаючи назви елементів, класи та ідентифікатори у селекторах) можуть містити лише символи [a-z0-9] та ISO 10646 символів U + 00A1 і вище, плюс дефіс (-) та підкреслення (_) ; вони не можуть починатися цифрою або дефісом, за яким слідує цифра. Ідентифікатори також можуть містити пропущені символи та будь-який символ ISO 10646 як числовий код (див. Наступний пункт). Наприклад, ідентифікатор "B&W?" може бути записано як "B \ & W \?" або "B \ 26 W \ 3F".

Ідентифікатори, що починаються з дефісу або підкреслення, зазвичай зарезервовані для розширень, орієнтованих на браузер, як у -moz-opacity.

¹ Все ускладнюється включенням уникнутих символів Unicode (які ніхто не використовує).

² Зауважте, що згідно з граматикою, з якою я пов'язаний, правило, що починається з ДВАХ дефісів, наприклад --indent1, є недійсним. Однак я майже впевнений, що бачив це на практиці.

На мій подив, більшість відповідей тут неправильні. Виявляється, що:

У іменах класів CSS дозволено будь-який символ, крім NUL. (Якщо CSS містить NUL (відхилений чи ні), результат не визначений. [ CSS-символи ])

Відповіді Матіаса Байненса посилаються на пояснення та демонстрації демонстрацій, як показувати, як використовувати ці імена. Записаний у коді CSS, ім'я класу може знадобитися уникнути , але це не змінює ім'я класу. Наприклад, надмірно уникнене представлення буде виглядати відмінно від інших представлень цього імені, але воно все ще відноситься до того ж імені класу.

Більшість інших мов (програмування) не мають такої концепції уникнення імен змінних ("ідентифікатори"), тому всі представлення змінної повинні виглядати однаково. У CSS це не так.

Зауважте, що в HTML немає можливості включити символи пробілу (пробіл, вкладка, канал рядків, канал форми та повернення каретки) в атрибут імені класу , оскільки вони вже відокремлюють класи один від одного.

Отже, якщо вам потрібно перетворити випадкову рядок у назву класу CSS: подбайте про NUL та пробіл, і втечі (відповідно для CSS або HTML). Зроблено.

Я детально відповів на ваше запитання тут: http://mathiasbynens.be/notes/css-escapes

У статті також пояснюється, як уникнути будь-якого символу в CSS (і JavaScript), і я також зробив зручний інструмент для цього. З цієї сторінки:

Якби ви призначили елементу значення ідентифікатора ~!@$%^&*()_+-=,./';:"?><[]{}|`#, селектор виглядатиме так:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

Читати специфікацію W3C . (це CSS 2.1, знайдіть відповідну версію для вашого припущення для браузерів)

редагувати: відповідний параграф наступний:

У CSS ідентифікатори (включаючи назви елементів, класи та ідентифікатори у селекторах) можуть містити лише символи [a-z0-9] та ISO 10646 символів U + 00A1 і вище, плюс дефіс (-) та підкреслення (_) ; вони не можуть починатися цифрою або дефісом, за яким слідує цифра. Ідентифікатори також можуть містити пропущені символи та будь-який символ ISO 10646 як числовий код (див. Наступний пункт). Наприклад, ідентифікатор "B&W?" може бути записано як "B \ & W \?" або "B \ 26 W \ 3F".

редагуйте 2: як @mipadi вказує у відповіді Триптиха, є цей застереження , також на тій же веб-сторінці:

У CSS ідентифікатори можуть починатися з '-' (тире) або '_' (підкреслення). Ключові слова та назви властивостей, що починаються з '-' або '_', зарезервовані для розширень, що стосуються конкретного виробника. Такі розширення, що стосуються конкретного постачальника, повинні мати один із наступних форматів:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Приклад (и):

Наприклад, якщо організація XYZ додала властивість описувати колір межі на східній стороні дисплея, вони можуть назвати його кольором -xyz-border-east-color.

Інші відомі приклади:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Початковий тире або підкреслення гарантується, що ніколи не буде використовуватися у властивості чи ключовому слові жодним поточним чи майбутнім рівнем CSS. Таким чином, типові реалізації CSS можуть не розпізнавати такі властивості та можуть ігнорувати їх відповідно до правил обробки помилок розбору. Однак, оскільки початковий тире або підкреслення є частиною граматики, реалізатори CSS 2.1 повинні завжди мати можливість використовувати аналізатор, що відповідає CSS, незалежно від того, підтримують вони чи ні розширення, що стосуються конкретного постачальника.

Автори повинні уникати розширень, що стосуються конкретного постачальника

Повний регулярний вираз:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Тому всі перелічені символи, крім " -" та " _", заборонені при використанні безпосередньо. Але ви можете кодувати їх за допомогою зворотної косої риски foo\~barабо за допомогою позначення unicode foo\7E bar.

Для тих, хто шукає обхід, можна скористатися селектором атрибутів, наприклад, якщо ваш клас починається з числа. Змінити:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

до цього:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Крім того, якщо є кілька класів, вам потрібно буде вказати їх у селекторі, я думаю.

Джерела:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Чи є рішення, щоб зробити класи CSS з іменами, що починаються з чисел, дійсними?

Я розумію, що підкреслення є технічно достовірним. Перевіряти:

https://developer.mozilla.org/uk/underscores_in_class_and_id_names

"... Еррата специфікації, опублікована на початку 2001 року, вперше зробила підкреслення законними."

У наведеній вище статті йдеться про те, що вони ніколи не використовують їх, а потім надають список веб-переглядачів, які не підтримують їх, і всі вони, принаймні, за кількістю користувачів, надовго зайвими.

Для HTML5 / CSS3 класи та ідентифікатори можуть починатися з чисел.

Виходячи з відповіді @ Триптиха, ви можете використовувати наступні 2 збіги з регулярними виразками, щоб зробити рядок дійсним:

[^a-z0-9A-Z_-]

Це зворотний збіг, який вибирає все, що не є літерою, цифрою, тире чи підкресленням для легкого видалення.

^-*[0-9]+

Це відповідає 0 або 1 тире, а потім 1 або більше цифр на початку рядка, також для легкого вилучення.

Як я його використовую в PHP:

//Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
//Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
//Make sure the string is 2 or more characters long
return 2 <= strlen($class) ? $class : '';