CSS 标识符可以以两个连字符开头吗？

Question

CSS 2.1 将identifiers 定义为

在 CSS 中，标识符 只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高版本，加上连字符 (-) 和 下划线（_）；它们不能以数字、两个连字符或 连字符后跟一个数字。标识符也可以包含转义 字符和任何 ISO 10646 字符作为数字代码。

因此，-- 应该是一个无效的标识符，因此#-- 不应该选择带有id="--" 的元素：

body { color: black }
#-- { color: red }

<p id="--">I should be black.</p>

在attribute selectors，

属性值必须是标识符或字符串。

但-- 似乎可以作为属性值的标识符，至少在 Firefox 上是这样：

body { color: black }
[id=--] { color: red }

<p id="--">I am red on Firefox.</p>

此外，CSS.escape 已被修改为允许--：

在 Firefox 32 中进行了细微更改，以匹配规范和 CSS语法的演变。标识符现在可以以-- 开头 第二个破折号不能转义。

根据Wayback Machine，更改发生在 2014 年 4 月 19 日至 30 日：

• 6 Feb 2014 editor's draft，存储于 2014 年 4 月 19 日。

  如果字符是第二个字符并且是“-”（U+002D）并且 第一个字符也是“-”，然后是转义字符。

• 30 Apr 2014 editor's draft，存储于 2014 年 5 月 4 日。

  如果字符 [...] 是 "-" (U+002D) [...]，那么字符 自己。

那么，有没有一些新的 CSS3 模块改变了标识符的定义，所以它们有时可以以 -- 开头，或者这里到底发生了什么？

Answer 1

我不确定是否有明确的答案，但值得一提的是，双连字符出现在定义自定义属性的CSS Variables module 中。这是一个示例（目前仅适用于 Firefox，这可能是它在 CSS.escape() 中有效的原因）：

:root { --color: red; }
p { color: var(--color); }

<p>I am red on Firefox.</p>

请参阅CanIUse.com 了解浏览器支持此功能的当前状态：CSS Variables (Custom Properties)。

虽然css-syntax-3 对标识符的定义似乎与CSS2.1 一致，但它确实对css-variables 本身做了一些引用。然而，这些引用似乎都没有解决自定义属性名称使用的 -- 前缀。

css-variables 本身 says:

自定义属性 是名称以两个短划线 (U+002D HYPHEN-MINUS) 开头的任何属性，例如 --foo。 <custom-property-name> 生产对应于此：它被定义为任何以两个破折号开头的有效标识符。

最后一个语句特别有趣，因为解释它的唯一方法与 CSS2.1 和 css-syntax-3 中给出的定义不冲突是一种模糊性：“以两个破折号开头的标识符”可以要么意味着两个破折号不是标识符的一部分，即：

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

或者它们是，这意味着自定义属性不受标识符的一般定义的约束。在 css-syntax、css-variables 和 CSSOM 中找不到 <custom-property-name> 产生式的语法，这无济于事；这种平淡无奇的陈述是唯一可用的定义。

当然，这些都不能解释为什么 #-- 被 Chrome 识别为有效，尤其是因为 Chrome 没有自定义属性的有效实现。

Answer 2

标准

实际上，CSS 语法模块的更改现在允许标识符以两个连字符开头：

4.3.9. Check if three code points would start an identifier

看第一个代码点：

• U+002D 连字符-减号

  如果第二个代码点是名称起始代码点或 U+002D HYPHEN-MINUS，或者第二个和第三个代码点是有效的转义， 返回真。否则，返回 false。

此更改出现在21 Mar 2014 Editor's Draft (changelog) 中，但仍不存在于当前的候选人推荐中，即20 Feb 2014 CR。

变化中也有描述：

11.1. Changes from the 20 February 2014 Candidate Recommendation

• 更改 ident-like 标记的定义以允许“--”开始一个 ident。

原因

在www-style中，...let's change the syntax线程提议更改CSS Variables的语法：

1. Tab Atkins Jr. proposed 将自定义属性的语法更改为“任何以下划线开头/包含下划线的标识”。
2. Chris Eppstein disagreed 因为_property 是常见的 IE6 黑客。
3. 布赖恩·卡德尔proposed--。

4. 扎克·温伯格warned:

   很遗憾，“--”需要更改语法。 IDENT 不是 允许以连续两个破折号开头。

5. 关于应该做什么进行了长时间的讨论。

6. Tab Atkins Jr. informed 他们决定使用 -- 前缀来表示自定义属性和其他自定义内容。

所以第二天他commited把CSS Syntax更改为github（他是规范的编辑）。

实现

火狐

Firefox 允许标识符以 -- 开头，因为 Nightly 31 2014-04-03 (pushlog)。 bug 985838 中的行为已更改：

错误 985838 - 将 CSS 变量的 var- 前缀更改为 --

最近决定对 CSS 变量规范进行更改：

• 自定义属性的前缀从var-更改为--
• 在 var() 中，您使用完整的自定义属性名称（即带有 -- 前缀）
• 允许使用仅包含前缀 -- 的自定义属性
• CSS 解析器中的标识现在允许-- 和--0 之类的东西

更改发生在Firefox 31.0。从那时起，[id=--] 工作。

但是，#-- 即使在 latest Nightly 41 上也不起作用。 为了解决这个问题，我提交了bug 1175192。

铬

Chromium 内置 a new CSS parser:

我们现在允许身份以-- 开头

它是在this commit 中发货的，它是this commitlist 的一部分，它是在this commit 中滚动的。所以最终在 build 44.0.2370.0 325166 (pushlog since 325152) 中实现了。

从那时起，Chromium 允许[id=--] 和#--。