CSS Minifiers是否结合了具有破坏性的元素？

Question

我找到了这个CSS缩小器（http://www.lotterypost.com/css-compress.aspx）。该页面底部有一个标题为“CSS Compressor故意不做什么？”的部分。有四件事，其中两件我无法理解为什么它们可能具有破坏性：

将单个边距，填充或边框样式组合到单个属性中。

  margin-top: 10px; 
  margin-right: 0; 
  margin-bottom: 8px;
  margin-left: 30px;

成为

  margin: 10px 0 8px 30px;

组合不同样式块中指定的相同元素的样式。

#element {
   margin: 0;
}

#element {
   color: #000000;
}

变为

#element {
   margin: 0;
   color: #000000;
}

我认为CSSTidy可以做到这两点。上面的网页是否正确？是否存在这些类型的缩小可能成为问题的情况？

Answer 1

Answer 2

该页面有section on 'reason not used' that describes why it doesn't do these two things。

最重要的是，我认为它不会尝试做这些事情，因为它不是一个完整的CSS解析器/解释器，并且会开始像CSS条件块那样笨拙。

Answer 3

通过'破坏性'，我认为你的意思是'CSS不能按预期工作'。

结合诸如你的第一个例子之类的长手规则，可以完全没有任何不良影响。

在没有媒体块或其他花哨内容的普通旧样式表中，第二个示例也不会引起任何问题。

＃2的风险是因为改变规则的顺序，或者将规则折叠在一起而不考虑Cascade会导致破坏。

某些CSS压缩器可以按字母顺序或按选择器类型重新排序规则。这些都是非常危险的，因为移动规则可能会破坏作者创建的级联行为。

像YUI压缩器这样的缩放器不执行任何这些操作，选择更安全的策略，如删除空格，冗余分号和零等。

随着更多CSS包含媒体块和其他CSS3代码，很可能许多当前的CSS压缩器根本无法正常工作。大多数人没有适当的词法分析器来解析代码 - 他们使用上下文感知逐字节（Tidy）或正则表达式（其余大部分）来处理代码。

在选择压缩器时，我建议找一些可以在本地进行操作的东西，并提供良好的测试套件，以便您可以看到正确处理（和不处理）的情况。