3

CSS ファイルを最適化する「 CSS ポストプロセッサ」を探しています。

たとえば、それが .css ファイルを最小化するツールであることは知っていますが、この最適化をさらに進めたいと考えています。考えられる基準の例を次に示します。

1) グループメディアクエリ:

同じメディアクエリの複数のインスタンスがある場合、このツールはすべてのセレクターを 1 つのインスタンスのみにグループ化する必要があります

2) グループの等しいルール:

これらのルールがある場合:

.foo1
{
  color:red;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo2
{
  color:blue;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

これらは、次の最終的な CSS にグループ化する必要があります。

.foo1,
.foo2
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo2
{
  color:blue;
}

3) 未使用のプロパティを削除します。

これらのプロパティがある場合:

.foo1
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo1
{
  color:blue;
}

この宣言では順序.foo1がcolor:red適用されないことは明らかなので、次のように「要約」する必要があります。

.foo1
{
  color:blue;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}
4

1 に答える 1

2

http://cssminifier.com/を試してください。

メディア クエリをグループ化します。

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}
@media screen and (max-width: 300px) {
    html {
        background-color: lightblue;
    }
}

なります:

@media screen and (max-width:300px){body,html{background-color:#add8e6}}

等しい CSS スタンザをグループ化します。

.foo1
{
  color:red;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo2
{
  color:blue;
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

なります:

.foo1,.foo2{border:1px solid green;font-size:13px;text-align:center}.foo1{color:red}.foo2{color:#00f}

オーバーライドされた CSS ルールを削除します。

.foo1
{
  color:red;      
  border:solid 1px green;
  font-size:13px;
  text-align:center;
}

.foo1
{
  color:blue;
}

なります:

.foo1{border:1px solid green;font-size:13px;text-align:center;color:#00f}

もちろん、最小化した後に CSS コードを美しくしたい場合もあります。その場合は、 http://www.cleancss.com/css-beautify/などの CSS フォーマッターで実行します。

質問の著者による更新：

実際、CSSMinifier には縮小が完全ではない特定のケースがあります。次のコードを見てください。

.a { color:red;}
.b { color:red;}

.c { color:green;}
.c { color:green;}
.b { color:red;}

次のように最小化されます。

.a{color:red}
.c{color:green}
.b{color:red}

CSSMinifier、.cクラスの 2 つの宣言が等しいことを正しく理解したので、2 番目の宣言はスキップできますが、 .c { color:green;} の2 番目の.b { color:red;} 後にデフォルトの動作が壊れます。

.a { color:red;}
.b { color:red;}

次の場所で縮小されます。

.a,.b{color:red}

重大な問題ではありませんが、存在します。

于 2015-09-15T16:44:29.093 に答える