以 '--' 为前缀的 CSS 类在 Safari 中被忽略答案

【问题标题】：CSS classes prefixed with '--' are ignored in Safari以 '--' 为前缀的 CSS 类在 Safari 中被忽略
【发布时间】：2016-12-12 04:08:21
【问题描述】：

以我自己的个人风格，我喜欢使用类似命令行参数的语法添加小的帮助 CSS 类，例如

<div class="button --small --red"></div>

但我今天意识到任何以-- 为前缀的类在 Safari 和 iOS 中都会被忽略，但在 Firefox 和 Chrome 中似乎可以正常工作。这有什么原因吗？

【问题讨论】：

相关：Can CSS identifiers begin with two hyphens? - 简而言之，Firefox 允许它是因为 css-variables 允许它，而 Chrome 允许它是因为 Chrome 曾经有一个 css-variables 实现，但后来被废弃了，或者因为 Chrome .

标签： css safari

【解决方案1】：

每个标识符的CSS 2.1 it is invalid grammar 和最新的 CSS3 (see the "railroad tracks") 建议中的规则相同。以下是 CSS 2.1 的相关规则：

ident       -?{nmstart}{nmchar}*
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

标识符可以以可选的- (0x2d) 开头；第二个字符来自受限的nmstart，不能是- 或ASCII 数字。

接受--foo 作为标识符的浏览器正在使用“更宽松”的规则（根据需要进行分类）。

如果真的想获得技术/花哨/混淆，任何 CP 高于 0x240 的 Unicode 字符都可以用作第二个字符，因为它符合 {nonascii} - 这包括广泛的 hyphen/minus-like characters。 YMMV 关于浏览器互操作性和可持续性：

<div class="button ––small —red"></div>

请不要这样做：第一个是两个 EN DASH (0x2013) 字符，后者是一个单个 EM DASH (0x2014) 字符。祝你好运调试选择器/代码。

【讨论】：