Bry*_*eld 22 css compiler-construction 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将引用前一个部分.理想情况下,在决定是否应该在某些时间或所有时间跳过某些优化时,以及选择器和规则的顺序应该是这样考虑的.
vul*_*ven 18
这可以使用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.all.min.css除了支付@Grillz手动完成它之外,到目前为止我还没有找到更好的CSS优化协议.
但旧的IE黑客呢？
如果你正在使用IE6和7的CSS黑客攻击,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的*hack),并输出:
.dont-care {
background:url("images/chart.jpg") no-repeat;
}
你也可以避免黑客攻击并为旧的IE版本使用单独的CSS文件(比如all.oldIE.css).在分别对两个文件进行优化(使用前面描述的7个步骤)之后,最终可以在HTML /母版页/模板/布局文件的<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{
background-attachment: fixed;
}
.b {
background-image: url("images/chart.png");
background-repeat: no-repeat;
}
如果你有
<div class="a b"></div>- 一个包含两个类的元素,你就不能在编写时优化.b,因为它会覆盖background-attachment.a中的集合.
所以,不,这不是一个安全的优化.