CSS 中的双斜线注​​释有多可靠

Question

正如标题所说，CSS 中单行注释的双斜杠有多可靠。您使用这样的单条评论的经验是什么？

Answer 1

使用双斜杠的注释//在 CSS 中无效。在CSS规范状态只有以下有关评论：

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;
}

火狐

在火狐ESR 52.9.0，你会得到一个黄色小三角警示牌旁边，color并且background-color因为//color是invald CSS属性和因为//red是一个无效的background-color值。

铬合金

有趣的是，在Chrome 68.0.3440.106 中，我什至看不到//color: blue元素面板中的显示，这可能意味着 Chrome 试图将该行视为注释，但由于//注释不在规范中，您不应该依赖它. 但是，background-color也有警告，因为它//red是一个无效值。

苹果浏览器

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

浏览器 11

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

还应注意的是，对于以下情况：

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

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