css - 是否有一个高级的 CSS 缩小器/编译器可以执行剥离冗余和逗号分隔相同规则之类的事情？

Question

例如

input{margin:0}body{margin:0;background:white}

这样写会更短

input,body{margin:0}body{background:white}

或者这个

input,body{margin:0}body{margin:0;padding:0}

这样写会更短

input,body{margin:0}body{padding:0}

结论没有这样的工具查看接受的答案。

给工具编写者的提示，您可能要考虑 gzip。有时，在二流优化上留下几个字节最终会更短，因为 gzip 本质上是字节级重复数据删除。如果有两个相同的部分，gzip 将引用较早的部分。 理想情况下，在决定是否应该部分或全部跳过某些优化，以及选择器和规则的顺序应该是什么时，应考虑这一点。

Answer 1

这可以使用 CSSO 来完成。

考虑以下输入:

input{margin:0}body{margin:0;background:white}

CSSO 输出:

input,body{margin:0}body{background:#fff}

(正是您要找的)

但不幸的是，CSSO 对此进行了优化:

.dont-care {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

收件人:

.dont-care{background-image:url("images/chart.png");background-repeat:no-repeat}

然而，CSSTidy 将上面的转换为相应的简写属性:

.dont-care {
    background:url("images/chart.png") no-repeat;
}

七优化CSS的四步解决方案:

这是我遵循的做法:

1. 合并 all.css 中的 CSS 文件。
2. 提供给 CSSO 输入。
3. 点击最小化
4. 将输出粘贴到 all.min.css

除了支付给@Grillz 以手动完成它，到目前为止我还没有找到更好的 CSS 优化..

但是旧的 IE 黑客呢？

如果您正在为 IE6 和 7 使用 CSS hack，CSSO 将保留这些 hack。

例如:

.dont-care {
    background-image: url("images/chart.png");
    *background-image: url("images/chart.jpg");
    background-repeat: no-repeat;
}

CSSO 输出:

.dont-care{background-image:url("images/chart.png");*background-image:url("images/chart.jpg");background-repeat:no-repeat}

CSSTidy 将忽略星号(* hack used for IE6)，并输出:

.dont-care {
    background:url("images/chart.jpg") no-repeat;
}

您还可以避免黑客攻击并为旧版 IE 使用单独的 CSS 文件(比如 all.oldIE.css)。在分别优化(使用前面描述的 7 个步骤)两个文件之后，这就是您最终可以在 HTML/masterpage/template/layout 文件的 标记中使用的内容:

<!--[if lt IE 8]><link href="css/all.oldIE.min.css" rel="stylesheet" type="text/css"/><![endif]--> 
<!--[if gt IE 7]><!--><link href="css/all.min.css" rel="stylesheet" type="text/css"/><!--<![endif]-->

其中 all.min.css 适用于所有浏览器，IE 版本低于和等于 7 除外。但单独使用 CSSO 是一个安全的选择。

更新

跳过 CSSTidy 部分。 CSSO 进行安全优化。 According to their developer ，简写优化不安全:

Consider that example:

.a{
    background-attachment: fixed;
}
.b {
    background-image: url("images/chart.png");
    background-repeat: no-repeat;
}

and if you'd have <div class="a b"></div> — an element with both classes, you can't optimize the .b as you write, 'cause it would override the background-attachment set in .a.
So, no, that's not a safe optimization.