2

我正在使用凹槽 ( https://github.com/twitter/recess ) 来压缩 CSS 文件

div {
    color: red
    border: 1px solid red
}

p {
    color: blue
}

# recess test.css --compress (No output)

如您所见，CSS 文件中缺少冒号，因此凹槽无法输出任何内容，但在真正的浏览器中，如果只有部分 CSS 包含错误，则完全可以

例如 http://jsfiddle.net/VDQLU/（参见 p 中的蓝色，不受上述错误影响）

Q. 有什么办法可以用凹槽压缩文件吗？还是使用其他工具？

4

3 回答 3

5

休会失败的原因是因为那是无效的CSS。（你可能知道）。它在您使用的浏览器上运行的原因，是因为浏览器假设一些 Web 开发人员只是不会使用正确的语法，并且他们希望与旧网站兼容，而不是因为分号在 css 上是可选的，或者因为 css 解析器应该有一个怪癖模式！.

我会使用 sed 行来清理 css 文件，从现在开始，使用正确的 css 代码。这是一个示例 sed 行：（首先备份您的 css 文件！）

sed -i '/{/,/}/ { /[}{]/ !{ /\/\*.*[^(\*\/\t )][\t ]*$/,/\*\// !{ s/\([^(\*\/);\t ]\)[\t ]*$/\1;/ }}}' yourcssfile.css

此 sed 行将：

  • 仅在没有分号的行中添加;; 也就是说，如果你确实有一些以分号结尾的行，你不会一个接一个地以两个分号结尾（比如）;;
  • 还要检查注释行，在一行上，例如：/* some comment */，或多行。

这并不意味着更改会自动完美地完成；您可能需要进行一些手动修复（并且可能需要手动修改 sed 行），但如果您的 css 文件看起来像您的示例，它应该几乎可以完美运行。

于 2013-07-23T21:40:01.247 回答
2

任何类型的 CSS 压缩都会从您的 CSS 中删除换行符。

尽管浏览器现在可以理解您的代码，但没有换行符来帮助它处理不正确的代码，它只会有一个字符串。

任何压缩该代码的压缩器都不会对您有任何帮助，因为一旦删除换行符，几乎可以肯定任何浏览器都不会理解它。

于 2013-07-23T22:30:32.617 回答
-1

请像这样使用 div 样式。div {颜色：红色；边框：纯红色；}

它是您结果的一个很好的解决方案。

于 2013-07-30T04:21:53.717 回答