Могут ли идентификаторы CSS начинаться с двух дефисов?

CSS 2.1 определяет идентификаторы как

В CSS идентификаторы могут содержать только символы [a-zA-Z0-9] и ISO 10646 символов U + 00A0 и выше, плюс дефис (-) и нижнее подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефис, затем цифра. Идентификаторы также могут содержать экранированные символов и любого символа ISO 10646 в виде числового кода.

Следовательно, -- должен быть недопустимым идентификатором, и поэтому #-- не должен выбирать элемент с id="--":

body { color: black }
#-- { color: red }
<p id="--">I should be black.</p>

ОТВЕТЫ

Ответ 1

Стандарт

Эффективно, изменение в модуле синтаксиса CSS теперь позволяет идентификаторам начинаться с двух дефис:

4.3.9. Проверьте, будут ли три кодовых пункта запускать идентификатор

Посмотрите на первую кодовую точку:

  • U + 002D HYPHEN-MINUS

    Если вторая кодовая точка является стартовой кодовой точкой или U + 002D HYPHEN-MINUS, или вторая и третья кодовые точки являются действительным выходом, return true. В противном случае верните false.

Это изменение появилось в 21 марта 2014 г. Редактор проекта (changelog) и по-прежнему не присутствует в текущей Рекомендации кандидата, которая является 20 февраля 2014 года CR.

Он также описывается в "Изменениях:

11.1. Изменения от Рекомендации кандидата от 20 февраля 2014 года

  • Измените определение тождественных маркеров, чтобы "-" запустил идентификатор.

Причина

В www-style ... позволяет изменить синтаксис предложили изменить синтаксис Переменные CSS:

  • Tab Atkins Jr. предложил изменить синтаксис пользовательских свойств на "любой идентификатор, начинающийся с/с подчеркиванием".
  • Chris Eppstein не согласен, потому что _property является распространенным взломом IE6.
  • Брайан Карделл предложил --.

  • Зак Вайнберг предупрежден:

    К сожалению, для "-" потребуется изменить синтаксис. IDENT не разрешено начинать с двух штрихов в строке.

  • Было долгое обсуждение того, что должно быть сделано.

  • Tab Atkins Jr. сообщил, они решили использовать префикс --, чтобы указать пользовательские свойства и другие пользовательские вещи.

Итак, на следующий день он совершил изменение синтаксиса CSS в github (он является редактором спецификации).

Реализация

Firefox

Firefox позволяет начинать идентификаторы с --, так как Nightly 31 2014-04-03 (pushlog). Поведение было изменено в ошибка 985838:

Ошибка 985838 - смените var- префикс CSS-переменных на --

Недавно принятые изменения спецификации CSS Variables:

  • префикс изменения настраиваемого свойства от var- до --
  • внутри var() используется полное пользовательское имя свойства (то есть с префиксом --)
  • разрешено настраиваемое свойство, состоящее только из префикса --,
  • idents в парсере CSS теперь позволяют такие вещи, как -- и --0

Изменение приземлилось на Firefox 31.0. С тех пор работает [id=--].

Однако #-- по-прежнему не работает даже на последней ночной 41. Я зарегистрировал ошибку 1175192, чтобы исправить это.

Chrome

Chromium построил новый синтаксический анализатор CSS:

Теперь мы разрешим idents начинать с --

Он был отправлен в этот коммит, который был частью этот коммандит, который был перенесен в этот коммит. Итак, он был наконец реализован в сборке 44.0.2370.0 325166 (pushlog с 325152).

С тех пор Chromium допускает как [id=--], так и #--.

Ответ 2

Я не уверен, есть ли окончательный ответ на этот вопрос, но по его достоинству двойные дефисы появляются в CSS Variables module, который определяет пользовательские свойства. Вот пример (в настоящее время работает только в Firefox, что может быть причиной его работы в CSS.escape()):

:root { --color: red; }
p { color: var(--color); }
<p>I am red on Firefox.</p>