本文介绍了是否有高级 CSS 缩小器/编译器可以执行诸如去除冗余和逗号分隔相同规则之类的操作?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

例如

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}

查看接受的答案.

优化 CSS 的四步解决方案:

这是我遵循的做法:

合并 all.css 中的 CSS 文件.
提供给 CSSO 输入.
点击
将输出粘贴到 all.min.css

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

但是旧的 IE hack 呢?

如果您对 IE6 和 7 使用 CSS hack，CSSO 将保留这些 hack.

例如:

.dont-care {背景图像:url(图像/chart.png")；*背景图像:url(图像/chart.jpg")；背景重复:不重复；}

CSSO 输出:

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

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

<!--[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 进行安全优化.根据他们的开发者的说法，速记优化并不安全:

考虑这个例子:

.a{背景附件:固定；}.b {背景图像:url(图像/chart.png")；背景重复:不重复；}

如果你有 <div class="a b"></div> - 一个同时拥有的元素类，你不能在你写的时候优化 .b，因为它会覆盖 .a 中设置的 background-attachment.
所以，不，这不是一个安全的优化.

For example

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

would be shorter written like this

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

or this

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

would be shorter written like this

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

See the accepted answer.

Four steps solution for optimizing CSS:

Here is the practice I follow:

Merge CSS files in all.css.
Supply to CSSO input.
Hit
Paste the output in all.min.css

Except paying @Grillz to get it done manually, I haven't found a better deal for CSS optimization thus far..

But what about old IE hacks?

If you are using CSS hacks for IE6 and 7, CSSO will preserve the hacks.

For example:

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

CSSO output:

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

You can also avoid hacks and use separate CSS file for older IE versions (say all.oldIE.css). After optimizing (using 7 steps described earlier) both files separately, this is what you may use in the <head> tag of your HTML/masterpage/template/layout file eventually:

<!--[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]-->

where all.min.css would work for all browsers except IE versions less than and equal to 7. But using CSSO alone is a safe bet.

Update

Skip the CSSTidy part. CSSO does safe optimization. According to their developer, shorthand optimization is not safe:

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

这篇关于是否有高级 CSS 缩小器/编译器可以执行诸如去除冗余和逗号分隔相同规则之类的操作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！