CSS の圧縮と整形

機能

• 3 つのモード：圧縮・整形・統計のみ
• 整形モードのインデントは 2 スペース・4 スペース・タブから選択
• 規則・宣言・セレクターの数を集計
• 圧縮前後のバイト数と削減率を表示
• 最後の宣言の後のセミコロンを残すか削除するか選択
• コメントを削除可能。`/*!` のライセンス表記は常に保持
• 文字列・コメント・url()・角括弧の中の `{};:,` は変更しない
• `a :hover` と `a:hover` の違いを正しく保持
• 全体をコピーすることも、統計を 1 行ずつコピーすることもできます

使い方

1. CSS を入力欄に貼り付けるかドロップします
2. モードを選び、必要に応じてインデント・セミコロン・コメントを調整します
3. 処理結果と統計が入力に合わせて更新されます
4. 処理後の CSS をコピーするか、数値を 1 行ずつ取り出します

よくある質問

正規表現で圧縮しないのはなぜですか？

CSS では `{};:,` が構造ではなくデータであることが多いためです。`content: "}"` の波括弧は文字列の中身、`url(a;b.png)` のセミコロンは URL の一部、`[data-x="a,b"]` のカンマはセレクターの中にあります。正規表現ではこれらを切り分けてしまい、見た目は正常なのに意味が変わったスタイルシートが出来上がります。しかも多くの場合は解析自体は通るため、誤りは描画の乱れとしてしか現れません。そこで文字単位のスキャナーを使っています。

「統計のみ」では圧縮後の CSS を計算していないのですか？

計算しています。バイト数と削減率はどちらも圧縮後の結果から算出し、その CSS を表示しないだけです。どれだけ削減できるかだけを確かめたいときに、びっしりした出力を見ずに済みます。

コメントを削除するとライセンス表記も消えますか？

いいえ。`/*!` で始まるコメントはライセンス表記として残すのが業界の慣例で、「コメントを削除」の有無にかかわらず保持します。

CSS はアップロードされますか？

いいえ。分割・圧縮・集計はすべてブラウザー内で実行し、ページは一切要求を送りません。