是否有高级 CSS 缩小器/编译器可以执行诸如去除冗余和逗号分隔相同规则之类的操作?

2022-01-17 00:00:00 compiler-construction css minify

例如

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 将引用较早的部分.理想情况下在决定是否应部分或全部时间跳过某些优化以及选择器和规则的顺序时应考虑这一点.

解决方案

这可以使用 CSSO 来完成.

考虑以下输入:

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

CSSO 输出:

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

(正是您要找的)

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

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

收件人:

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

但是，CSSTidy 将上述转换为相应的速记属性:

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



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

这是我遵循的做法:

  1. 合并 all.css 中的 CSS 文件.
  2. 提供给 CSSO 输入.
  3. 点击最小化
  4. 将输出粘贴到 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}

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

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

您还可以避免黑客攻击，并为旧版 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}

Conclusion no such tool See the accepted answer.

A tip to the tool writers, you may want to consider gzip. Sometimes, leaving a few bytes on a second-rate optimization will be shorter in the end because gzip is essentially byte-level deduplication. If there are two identical sections, gzip will reference the earlier one. Ideally this would be considered in deciding if certain optimizations should be skipped some or all of the time, and what the order of the selectors and rules should be.

解决方案

This can be done using CSSO.

Consider the following input:

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

CSSO output:

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

(exactly what you are looking for)

But unfortunately, CSSO optimize this:

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

To:

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

However, CSSTidy converts the above to the corresponding shorthand property:

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



Seven Four steps solution for optimizing CSS:

Here is the practice I follow:

  1. Merge CSS files in all.css.
  2. Supply to CSSO input.
  3. Hit Minimize
  4. 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}

CSSTidy will ignore asterik(* hack used for IE6), and output:

.dont-care {
    background:url("images/chart.jpg") 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:

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.

相关文章