有没有一个高级的CSS缩小器/编译器，做条纹冗余和逗号分隔相同的规则？ [英] Is there an advanced CSS minifier/compiler that does things like strip redundancy and comma separate identical rules?

问题描述

例如

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

会写得更短。

  input，body {margin：0} body {background：white} 
  

/ p>

 输入，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输出：
 输入，body {margin：0} body {background：#fff} 
  
   
 
 
 
  CSSO优化此：
  .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} 
  / pre> 
 
 
但是， CSSTidy 会将上述内容转换为相应的缩写属性：
  .dont-care {
 background：url（images / chart.png）no-重复; 
} 
  
  
 
 
   Seven 用于优化CSS的四步解决方案： 
 
 
以下是我遵循的做法：
 
 
将 all.css 中的CSS文件合并。
 
 
提供到 CSSO 输入。
 
 
按最小化 
 
 
将输出粘贴到 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），并输出：
  .dont-care {
 background：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 =stylesheettype =text / css/><！[endif]  - > 
<！ -  [if gt IE 7]><！ - >< link href =css / all.min.css =stylesheettype =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; 
} 
  
 
 
 
 
 
 $ c>< div class =ab>< / div>   - 两个
类的元素，你不能优化。它将
覆盖在.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:

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


                        
这篇关于有没有一个高级的CSS缩小器/编译器，做条纹冗余和逗号分隔相同的规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！