例えば
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}
結論
そのようなツールはありません
。承認された回答を参照してください。
ツール作成者へのヒント、 あなた5月gzip を検討したい。gzip は基本的にバイトレベルの重複排除なので、2 級の最適化で数バイト残しておくと、最終的には短くなる場合があります。同一のセクションが 2 つある場合、gzip は前のセクションを参照します。理想的にはこれは、特定の最適化を一部または全部スキップする必要があるかどうか、およびセレクターとルールの順序をどうするかを決定する際に考慮されます。
ベストアンサー1
これは、最高経営責任者。
次の入力を検討してください。
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 を最適化するための7 つの
4 ステップ ソリューション:
私が実践している方法は次のとおりです。
- CSS ファイルを結合します
all.css
。 - 供給先最高経営責任者入力。
- 打つMinimize
- 出力を貼り付ける
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 はアスタリスク (* IE6 で使用されるハック) を無視し、次のように出力します。
.dont-care {
background:url("images/chart.jpg") no-repeat;
}
ハッキングを避けて、古い 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{
background-attachment: fixed;
}
.b {
background-image: url("images/chart.png");
background-repeat: no-repeat;
}
そして、両方のクラスを持つ要素がある場合
<div class="a b"></div>
、.b を記述時に最適化することはできません。.b はbackground-attachment
.a 内のセットを上書きしてしまうからです。
したがって、これは安全な最適化ではありません。