时间戳

首页 > 解决方案 > CSS中的双斜线注​​释有多可靠

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

问题描述

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

标签： css

解决方案

使用双斜杠的注释//在 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;
}

火狐

Firefox 元素面板

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

铬合金

铬元素面板

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

苹果浏览器

Safari 元素面板

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

互联网浏览器 11

IE11 元素面板

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

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

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

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

推荐阅读