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

Question

CSS 2.1将identifiers定义为

  

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

因此，--应该是无效的标识符，因此#--不应该使用id="--"选择元素：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在attribute selectors，

  

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

  

在Firefox 32中进行了一些小的更改，以匹配规范和   CSS语法的演变。标识符现在可以以--开头   并且不得转义第二个短划线。

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

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

    

  如果角色是第二个角色并且是＆＃34; - ＆＃34; （U + 002D）和   第一个字符是＆＃34; - ＆＃34;同样，那个逃脱的角色。

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

    

  如果角色[...]是＆＃34; - ＆＃34; （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变量本身进行了大量引用。但是，这些引用似乎都没有解决自定义属性名称使用的--前缀。

css-variables本身says：

  

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

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

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

或者他们是，这意味着自定义属性不受标识符的一般定义的约束。 <custom-property-name>生成的语法无处可寻，无论是在css语法中，css变量中，还是在CSSOM中都没有用;这个平淡无奇的陈述是唯一可用的定义。

当然，这一切都没有解释为什么Chrome #--被认为有效，特别是因为Chrome没有自定义属性的有效实现。

Answer 2

标准

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

  

4.3.9. Check if three code points would start an identifier

     

查看第一个代码点：

     

  

• U + 002D HYPHEN-MINUS

       

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

  

此更改显示在21 Mar 2014 Editor's Draft（changelog）中，并且仍然没有出现在当前的候选人推荐中，即20 Feb 2014 CR。

它也在变化中描述：

  

11.1. Changes from the 20 February 2014 Candidate Recommendation

     

  
• 更改ident-like标记的定义以允许＆＃34; - ＆＃34;开始认同。
  

的原因

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

1. Tab Atkins Jr. proposed将自定义属性的语法更改为＆＃34;以/包含下划线开头的任何标识＆＃34;。
2. Chris Eppstein disagreed因为_property是一个常见的IE6黑客。
3. Brian Kardell proposed --。

4. Zack Weinberg warned：

     

   不幸的是，＆＃34; - ＆＃34;需要更改语法。 IDENT不是   允许从连续两个破折号开始。

5. 长期讨论应该做些什么。

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

所以第二天他将commited CSS语法更改为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：

  

我们现在允许idents以--

开头

它是this commit中提供的，是this commitlist的一部分，已在this commit中滚动。所以它最终在构建44.0.2370.0 325166（pushlog since 325152）中实现。

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