CSS 标识符可以以两个连字符开头吗? [英] Can CSS identifiers begin with two hyphens?
问题描述
CSS 2.1 将标识符定义为
<块引用>在 CSS 中，标识符只能包含字符 [a-zA-Z0-9] 和ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或连字符后跟一个数字.标识符也可以包含转义字符和任何 ISO 10646 字符作为数字代码.
因此，-- 应该是一个无效的标识符，因此 #-- 不应该选择带有 id="--" 的元素代码>:
body { color: black }#-- { 颜色:红色}<p id="--">我应该是黑色的.</p>在属性选择器中，
<块引用>属性值必须是标识符或字符串.
但是 -- 似乎可以作为属性值的标识符，至少在 Firefox 上是这样:
body { color: black }[id=--] { 颜色:红色}<p id="--">我在 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 模块更改了标识符的定义，以便它们有时可以以 -- 开头，或者这里到底发生了什么?
标准
实际上，CSS 语法模块中的更改现在允许标识符以两个连字符开头:
<块引用>看第一个代码点:
U+002D 连字符减号
如果第二个代码点是名称-起始代码点或 U+002D HYPHEN-MINUS，或者第二个和第三个代码点是有效的转义，返回真.否则，返回 false.
此更改出现在 2014 年 3 月 21 日编辑草稿(changelog)，并且仍然没有出现在当前的候选推荐中，即 2014 年 2 月 20 日 CR.
它也在更改中描述:
<块引用>- 更改 ident-like 标记的定义，以允许--"开始一个 ident.
原因
在 www-style 中，...让我们改变语法线程提议改变CSS 变量:
- Tab Atkins Jr. 提议更改语法自定义属性的任何以/包含下划线开头的标识".
- Chris Eppstein 不同意，因为
_property是一个常见的 IE6 hack. - Brian Kardell 建议
--. 扎克温伯格 警告:
<块引用>不幸的是，--"需要更改语法.IDENT 不是允许以连续的两个破折号开头.
对应该做什么进行了长时间的讨论.
- Tab Atkins Jr. 告知他们决定使用
--前缀来表示自定义属性和其他自定义内容.
所以第二天他承诺将CSS语法更改为github(他是规范的编辑).
实施
火狐
Firefox 允许标识符以 -- 开头，因为 Nightly 312014-04-03(pushlog).bug 985838 中的行为已更改:
Bug 985838 - 将 CSS 变量的 var- 前缀更改为 --
最近决定更改 CSS 变量规范:
- 自定义属性的前缀由
var-改为-- - 在
var()中，您使用完整的自定义属性名称(即带有--前缀) - 允许使用仅包含前缀
--的自定义属性 - CSS 解析器中的标识符现在允许诸如
--和--0 之类的东西
此更改适用于 Firefox 31.0.从那时起， [id=--] 起作用了.
然而，#-- 即使在 上仍然不起作用最新的每晚 41.我提交了错误 1175192 以解决该问题.
Chrome
Chromium 构建了一个新的 CSS 解析器:
<块引用>我们现在允许标识以 --
它在本次提交中发布，它是此提交列表，已在此提交.所以它最终在构建44.0.2370.0 325166identifiers as
In CSS, identifiers can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.
Therefore, -- should be an invalid identifier, and thus #-- shouldn't select the element with id="--":
body { color: black }
#-- { color: red }
<p id="--">I should be black.</p>
Attribute values must be identifiers or strings.
But -- seems to work as an identifier for attribute values, at least on Firefox:
body { color: black }
[id=--] { color: red }
<p id="--">I am red on Firefox.</p>
Moreover, CSS.escape has been modified to allow --:
Minor changes has been made in Firefox 32, to match the spec and the evolution of the CSS syntax. The identifier now can begin with
--and the second dash must not be escaped.
According to the Wayback Machine, the change happened between 19 and 30 Apr 2014:
6 Feb 2014 editor's draft, stored on 19 Apr 2014.
If the character is the second character and is "-" (U+002D) and the first character is "-" as well, then the escaped character.
30 Apr 2014 editor's draft, stored on 4 May 2014.
If the character [...] is "-" (U+002D) [...], then the character itself.
So, has some new CSS3 module changed the definition of identifiers, so that they can sometimes begin with --, or what exactly is happening here?
Standard
Effectively, a change in CSS Syntax Module now allows identifiers to start with two hyphens:
4.3.9. Check if three code points would start an identifier
Look at the first code point:
U+002D HYPHEN-MINUS
If the second code point is a name-start code point or a U+002D HYPHEN-MINUS, or the second and third code points are a valid escape, return true. Otherwise, return false.
This change appeared in the 21 Mar 2014 Editor's Draft (changelog), and is still not present in the current Candidate Recomendation, which is the 20 Feb 2014 CR.
It's also described in Changes:
11.1. Changes from the 20 February 2014 Candidate Recommendation
- Change the definition of ident-like tokens to allow "--" to start an ident.
Reason
In www-style, the ...let's change the syntax thread proposed to change the syntax of CSS Variables:
- Tab Atkins Jr. proposed changing the syntax of Custom Properties to "any ident starting with/containing an underscore".
- Chris Eppstein disagreed because
_propertyis a common IE6 hack. - Brian Kardell proposed
--. Zack Weinberg warned:
Unfortunately, "--" would require a change to Syntax. IDENT isn't allowed to start with two dashes in a row.
There was a long discussion of what should be done.
- Tab Atkins Jr. informed they resolved to use a
--prefix to indicate custom properties and other custom things.
So the following day he commited the change of CSS Syntax to github (he is an editor of the spec).
Implementations
Firefox
Firefox allows identifiers to start with -- since Nightly 31 2014-04-03 (pushlog). The behavior was changed in bug 985838:
Bug 985838 - change
var-prefix of CSS Variables to--Recently decided changes to the CSS Variables spec:
- the prefix of the custom property change from
var-to--- inside the
var()you use the full custom property name (i.e. with the--prefix)- a custom property consisting only of the prefix,
--, is allowed- idents in the CSS parser now allow things like
--and--0
The change landed on Firefox 31.0. Since then, [id=--] works.
However, #-- still does not work even on latest Nightly 41.
I filed bug 1175192 in order to fix that.
Chrome
Chromium built a new CSS parser:
We now allow idents to start with
--
It was shipped in this commit, which was part of this commitlist, which was rolled in this commit. So it was finally implemented in build 44.0.2370.0 325166 (pushlog since 325152).
Since then, Chromium allows both [id=--] and #--.
这篇关于CSS 标识符可以以两个连字符开头吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
