問題描述
例如
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 的四步解決方案:
這是我遵循的做法:
- 合并
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}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:
- 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 thebackground-attachmentset in .a.
So, no, that's not a safe optimization.
這篇關于是否有高級 CSS 縮小器/編譯器可以執行諸如去除冗余和逗號分隔相同規則之類的操作?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！