2

CSSファイルを圧縮するためにリセス（https://github.com/twitter/recess ）を使用しています

div {
    color: red
    border: 1px solid red
}

p {
    color: blue
}

# recess test.css --compress (No output)

ご覧のとおり、CSS ファイルにコロンが欠落しているため、recess は何も出力できませんでしたが、実際のブラウザーでは、CSS の一部だけにエラーが含まれていてもまったく問題ありません。

例 http://jsfiddle.net/VDQLU/ (上記のエラーによる影響を受けていない、p の bule の色を参照してください)

Q. とにかくリセスでファイルを圧縮する方法はありますか? それとも他のツールを使用していますか？

4

3 に答える 3

5

リセスが失敗する理由は、それが無効な css であるためです。（あなたはおそらくそれを知っています）。とにかく、あなたが使用しているブラウザでそれが機能する理由は、ブラウザは一部の Web 開発者が正しい構文を使用しないと想定しており、レガシー Web サイトとの互換性を望んでいるためです。css でセミコロンがオプションであるからでも、css パーサーが想定されているからでもありません。癖モードを持っている！.

sed 行を使用して css ファイルを消去し、今後は正しい css コードを使用します。以下は sed 行の例です: (最初に css ファイルをバックアップしてください!)

sed -i '/{/,/}/ { /[}{]/ !{ /\/\*.*[^(\*\/\t )][\t ]*$/,/\*\// !{ s/\([^(\*\/);\t ]\)[\t ]*$/\1;/ }}}' yourcssfile.css

この sed 行は次のことを行います。

  • セミコロンなしで終わる行;にのみ , を追加します。つまり、セミコロンで終わる行がいくつかある場合、セミコロンが 2 つ続けて終わることはありません (のように) 。;;
  • コメント行も確認してください。次のように 1 行である/* some comment */か、複数行であるかを確認してください。

これは、変更が自動的に問題なく行われるという意味ではありません。おそらく手動で修正する必要がありますが（おそらくsed行を手動でハッキングする必要があります）、cssファイルが例のように見える場合、ほぼ完璧に機能するはずです.

于 2013-07-23T21:40:01.247 に答える
2

どのような種類の CSS 圧縮でも、CSS から改行が削除されます。

ブラウザはあなたのコードを理解するかもしれませんが、間違ったコードを処理するための改行がなければ、ただ 1 つの文字列しかありません。

そのコードを圧縮したコンプレッサーは、改行が削除されると、ほぼ確実にどのブラウザーでも理解されなくなるため、何の恩恵も受けません。

于 2013-07-23T22:30:32.617 に答える