有没有一个高级的CSS minifier /编译器,可以像Strip冗余和逗号分开相同的规则?

前端之家收集整理的这篇文章主要介绍了有没有一个高级的CSS minifier /编译器,可以像Strip冗余和逗号分开相同的规则?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
例如
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 {
    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七个四步解决方案:
这是我遵循的做法:

>在all.css中合并CSS文件
>供应CSSO输入。
>最小化
>将输出粘贴到all.min.css中

除了付款@Grillz手动完成之外,我还没有找到更好的CSS优化协议。

但是呢,老的IE黑客呢?
如果您使用CSS黑客IE6和7,CSSO将保留黑客。

例如:

.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将忽略asterik(*黑客用于IE6),并输出

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

您还可以避免黑客攻击,并为旧版本的IE版本使用单独的CSS文件(例如all.oldIE.css)。在分别优化(使用前述7个步骤)两个文件之后,这可以在< head>最终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.

猜你在找的CSS相关文章