CSS 圧縮
小さなサンプルは、コメントと空白を削るだけで98バイトから66バイトへ(32.7%減)小さくなります: .card{display:flex;margin:0 auto}.card>.title:hover{color:#123456}
使い方
- 入力欄にCSSを貼り付けます。
- 残す必要のあるライセンス表記がある場合は「/*! コメントを残す」をオンのままにします。オフにするとすべてのコメントを削除します。
- 圧縮前後のサイズを確認し、圧縮したCSSをコピーします。
計算方法
CSSの解釈を変えようがないものだけを削除します。コメント、改行、インデント、{ } ; , > の前後の空白、コロンの後の空白です。閉じ括弧の直前にある最後のセミコロンも省きます。
色・数値・単位の短縮、ルールの統合、並べ替えや名前の変更はしません。たとえば 0px や #ffffff はそのまま残ります。出力を予測しやすく安全に保つための意図的な制限で、そのぶん本格的な最適化ツールより削減量はやや少なくなります。
意味のある空白は残します。:hover の前の子孫結合子、margin: 0 auto のような値の間の空白、"and (min-width: 600px)" の中の空白、calc() 内の + と - の前後の空白です。引用符付きの文字列、data URI などの引用符なしの url() の値、エスケープはそのままコピーします。
閉じていないコメント・文字列・url()、対応しない波括弧があると警告します。出力は作られるので、警告が出たら元のCSSを確認してください。
よくある質問
圧縮するとページの見た目が変わりますか?
変わらないはずです。削るのは空白とコメントだけで、意味のある空白は残します。もし違いが出たら元のCSSを使い、警告として表示される閉じ忘れの括弧や引用符がないか入力を確認してください。
ほかの圧縮ツールより削減量が少ないのはなぜですか?
本格的な最適化ツールはルールの統合や値の短縮、未使用コードの削除まで行います。こうした処理はまれに結果を変えることがあるため、このツールでは行いません。手書きのCSSでは、削減分の大半はふつう空白とコメントです。
/*! で始まるコメントはどうなりますか?
初期設定では残します。ライセンス表記を示す一般的な書き方だからです。オプションをオフにすると、これも削除します。
本番環境で使えますか?
ネストしたルールやカスタムプロパティを含む通常のCSSなら使えます。どのツールでも同じですが、公開前に実際のページで確認し、読みやすい元のファイルは手元に残しておいてください。
CSSはアップロードされますか?
いいえ。すべてブラウザ内で処理します。