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

Question

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>

在属性选择器中,

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

但--似乎作为属性值的标识符,至少在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日之间:

• 2014年2月6日编辑的草稿,存储于2014年4月19日.

  如果角色是第二个字符并且是" - "(U + 002D)并且第一个字符也是" - ",那么转义字符.

• 2014年4月30日编辑的草稿,存储于2014年5月4日.

  如果字符[...]是" - "(U + 002D)[...],那么字符本身.

那么,有一些新的CSS3模块改变了标识符的定义,以便它们有时可以开始--,或者到底发生了什么？

Answer 1

我不确定是否有明确的答案,但是对于它的价值,双连字符在CSS变量模块中出现,它定义了自定义属性.这是一个例子(目前仅适用于Firefox,这可能是它在那里工作的原因CSS.escape()):

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

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

有关此功能的浏览器支持的当前状态,请参阅CanIUse.com:CSS 变量(自定义属性).

虽然css-syntax-3对标识符的定义似乎与CSS2.1的定义一致,但它确实对css变量本身进行了大量引用.但是,这些引用似乎都没有解决--自定义属性名称使用的前缀.

css变量本身说:

一个自定义属性是任何属性的名字以两个破折号(U + 002D连字符-减号)开始,喜欢--foo.该<custom-property-name> 生产对应于此:它定义为以两个破折号开始任何有效的标识符.

最后一个语句特别有趣,因为解释它与CSS2.1和css-syntax-3中给出的定义不冲突的唯一方法是模糊性:"以两个破折号开头的标识符"可以表示两个短划线不是标识符的一部分,即:

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

或者它们是,这意味着自定义属性不受标识符的一般定义的约束.它没有帮助,对于语法<custom-property-name>的生产是无处可寻,而不是在CSS语法,也不是CSS-变量,也没有在CSSOM; 这个平淡无奇的陈述是唯一可用的定义.

当然,这也没有解释为什么#--Chrome被认为有效,特别是因为Chrome没有自定义属性的工作实现.

Answer 2

标准

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

4.3.9.检查三个代码点是否会启动标识符

看看第一个代码点:

• U + 002D HYPHEN-MINUS

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

此更改出现在2014年3月21日的编辑草案(更改日志)中,并且仍然没有出现在当前的候选人推荐中,即2014年2月20日的CR.

它也在变化中描述:

11.1.2014年2月20日候选人建议书的变更

• 更改ident-like标记的定义以允许" - "开始标识.

原因

在www-style中,...让我们改变建议的语法线程来改变CSS变量的语法:

1. Tab Atkins Jr. 建议将自定义属性的语法更改为"以/包含下划线开头的任何标识".
2. Chris Eppstein 不同意,因为这_property是一个常见的IE6黑客攻击.
3. Brian Kardell 提议 --.

4. 扎克温伯格警告说:

   不幸的是," - "需要更改语法.IDENT不允许以连续两个破折号开头.

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

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

于是第二天,他COMMITED CSS语法来github上(他是规范的编辑)的变化.

实现

火狐

Firefox允许标识符--从Nightly 31 2014-04-03(pushlog)开始.bug 985838中的行为已更改:

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

最近决定更改CSS变量规范:

• 自定义属性的前缀从更改var-为--
• 在var()你里面使用完整的自定义属性名称(即带有--前缀)
• --允许使用仅包含前缀的自定义属性
• CSS解析器中的标识符现在允许使用--和--0

这一变化落在Firefox 31.0上.从那时起,[id=--]作品.

但是,#--即使是最新的Nightly 41仍然无法正常工作.我提交了错误1175192以解决这个问题.

铬

Chromium构建了一个新的CSS解析器:

我们现在允许idents开始 --

它被运在此承诺,这是一部分这一commitlist,这是在推出这一承诺.所以它最终在build 44.0.2370.0 325166(pushlog 325152)中实现.

从那以后,Chromium允许[id=--]和#--.