CSS中双斜杠注释的可靠性如何

Question

正如标题所说，对于CSS中的单行注释，双斜杠的可靠性如何。您如何使用像这样的单行注释？

Answer 1

使用双斜杠//的注释在CSS中无效。 CSS spec仅说明注释的以下内容：

  

4.3.2。消费评论

     

本节介绍如何从以下流中 使用评论   代码点。它什么也不返回。

     

如果接下来的两个输入代码点是U + 002F SOLIDUS（/），后跟一个   U + 002A ASTERISK（），将其消耗，并将以下所有代码点最多   并包括第一个U + 002A ASTERISK（），然后是U + 002F   SOLIDUS（/），或最多EOF代码点。返回到此开始   步骤。

     

如果上一段以消耗EOF代码点结尾，则此   是一个解析错误。

     

什么也不退。

换句话说，只有/* */是有效的注释，它没有提及//

但是，// 在某些CSS处理器（例如Less和SASS）中有效。

---

根据您的评论：

  

...您能否依靠浏览器来理解这是一条评论

否，浏览器无论如何都会尝试解释该语法，并且有可能因为该规则是语法错误而不是注释而使该规则失败。根据浏览器，结果可能会失败，但是使用它会使您陷入不确定的行为。

带有双斜杠注释的浏览器行为

以下是在不同浏览器中应用以下规则的结果。一种样式在属性的开头使用双斜杠，另一种在值的前面使用//。

#some {
    width: 500px;
    /*height: 400px;*/
    //color: blue;
    background-color: //red;
}

Firefox

在 Firefox ESR 52.9.0 中，您在color和background-color旁边看到一个黄色的警告三角形，因为//color是一个无效的CSS属性，并且//red是无效的background-color值。

Chrome

有趣的是，在 Chrome 68.0.3440.106 中，我什至没有看到//color: blue出现在elements面板中，这可能意味着Chrome尝试将其视为注释，但是由于//作为注释不在规范中，因此您不应该依赖它。但是，background-color也有警告，因为//red是无效值。

Safari

Safari 11.1.2 具有与Chrome相同的行为，其中甚至没有列出// led属性，而// led值是语法错误。

Internet Explorer 11

Internet Explorer 11.0.9600.19080 将整个//color: blue视为规则属性，并认为它没有任何价值，就像您编写了//color: blue: ;一样。它还列出了background-color: //red，但认为它是错误并且不适用。

---

还应注意以下几点：

#some {
    // width: 400px;
    /* height: 400px; */
}

大多数浏览器至少会认可/* */属性，并允许您在开发工具中进行切换。对于Chrome和Safari，甚至没有列出//主导规则，这意味着您无法像使用/* */一样进行切换。