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

в CSS 2.1 определяет коды as

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

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

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

на селекторы атрибутов,

значения атрибутов должны быть идентификаторами или строками.

но -- кажется, работает как идентификатор для значений атрибутов, по крайней мере, в Firefox:

body { color: black }
[id=--] { color: red }
<p id="--">I am red on Firefox.</p>

кроме того, CSS.escape был изменен, чтобы позволить --:

незначительные изменения были внесены в Firefox 32, чтобы соответствовать спецификации и эволюция синтаксиса CSS. Идентификатор теперь может начинаться с -- и второго рывка не избежать.

по словам Машина Wayback, изменение произошло между 19 и 30 Apr 2014:

Итак, какой-то новый модуль CSS3 изменил определение идентификаторов, так что иногда они могут начинаться с --, или что именно здесь происходит?

8
css css-selectors css3 firefox identifier

2 ответов

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

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

см.CanIUse.com для текущего состояния поддержки браузера этой функции:переменные CSS (Пользовательские Свойства).

пока css-синтаксис-3определение идентификаторов, по-видимому, согласуется с определением CSS2.1, он делает ряд ссылок на сами CSS-переменные. Ни одна из этих ссылок, похоже, не касается -- префикс, используемый именами пользовательских свойств.

css-переменные сами по себе говорит:

A свойства - любое свойство, имя которого начинается с двух тире (U + 002D дефис-минус), как --foo. The <custom-property-name> производство соответствует этому: он определяется как любой допустимый идентификатор, который начинается с двух дефисов.

последнее утверждение особенно интересно, потому что единственный способ интерпретировать его, который не противоречит определениям, приведенным в CSS2.1 и css-синтаксис-3 является одним из неопределенностей: "идентификатор, который начинается с двух тире" может либо означать, что два тире не являются частью идентификатора, т. е.:

<custom-property-name> = '-' '-' <ident>

или are, что означает, что пользовательские свойства освобождаются от общего определения идентификатора. Это не помогает, что грамматика для <custom-property-name> производство нигде не найдено, ни в CSS-синтаксисе, ни в css-переменных, ни в CSSOM; это прозаическое утверждение является единственным доступным определением.

конечно, ничто из этого не объясняет, почему #-- признается действительным Chrome, тем более, что Chrome не имеет рабочая реализация пользовательских свойств.

9

стандартный

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

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

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

  • U + 002D ДЕФИС-МИНУС

    если вторая кодовая точка является именем-start code point или U + 002D дефис-минус, или второй и третий кодовые действительный побег, вернуть true. В противном случае возвращает false.

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

это также описано в разделе изменения:

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

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

причина

на www-style, the ...Давайте изменим синтаксис thread предложил изменить синтаксис переменные CSS:

  1. Таб Аткинс Младший предложил изменение синтаксиса пользовательских свойств на " любой идент, начинающийся с / содержащий подчеркивание".
  2. Крис Эпштайна Расположе не согласен, потому что _property является общим IE6 hack.
  3. Брайан Карделл предложил --.

  4. Зак Вайнберг предупредил:

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

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

  6. Таб Аткинс Младший сообщил они решили использовать -- префикс для указания пользовательских свойств и других пользовательских вещей.

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

реализации

в Firefox

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

ошибка 985838-изменить var- префикс переменных CSS в --

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

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

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

однако, #-- до сих пор не работает даже на последние ночные 41. Я подал ошибка 1175192 in чтобы исправить это.

хром

хрома причине новый парсер CSS:

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

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

С тех пор Chromium позволяет оба [id=--] и #--.

6