冗長性を削除したり、同一のルールをコンマで区切ったりする高度な CSS 縮小ツール/コンパイラはありますか? 質問する

冗長性を削除したり、同一のルールをコンマで区切ったりする高度な CSS 縮小ツール/コンパイラはありますか? 質問する

例えば

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 ステップ ソリューション:

私が実践している方法は次のとおりです。

  1. CSS ファイルを結合しますall.css
  2. 供給先最高経営責任者入力。
  3. 打つMinimize
  4. 出力を貼り付ける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.cssIE バージョン 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 内のセットを上書きしてしまうからです。
したがって、これは安全な最適化ではありません。

おすすめ記事