CSS圧縮ツール
コメントと空白を取り除いてスタイルシートを小さくします。ルールは1つも壊しません。
入力
出力
CSSをオンラインで圧縮
ブラウザーはページを表示する前に、CSSのすべてのバイトをダウンロードして解析しなければなりません。だからこそ、スタイルシートは小さく保つ価値があります。圧縮では、コメント、インデント、省略できる空白など、ブラウザーに不要なものをすべて取り除きます。このページは、CSSに設定し、サンプルを圧縮した状態のコード整形ツールです。
残るものと消えるもの
| 圧縮前 | 圧縮後 |
|---|---|
.card { margin : 0 auto ; } | .card{margin:0 auto} |
width: calc(100% - 32px); | width:calc(100% - 32px) |
a > b | a>b |
/* comment */ | 削除 |
calc()の中のスペースは残さなければなりません。100%-32pxは無効なCSSだからです。2つの値を区切る0 autoのスペースも同様です。
ミニファイ、サーバー側の圧縮、それとも両方？
ミニファイとサーバー側の圧縮は重ねて効きます。サーバーでgzipやBrotliを使うと、CSSファイルは一般に70〜80%小さくなり、先にミニファイしておけばさらに少し削減できます。ビルドツールがすでにミニファイしているなら、本番用にこのページは必要ありません。このページが役立つのは、ビルドを通らないコード片です。メールのインラインスタイル、headに貼り付けるクリティカルCSS、ビルド工程のないサイトのスタイルシートなどです。
関連ツール
ページで使われていないルールを取り除けば、ミニファイよりはるかに大きく削減できます。それには未使用CSS削除ツールを使ってください。スタイルシートと一緒に使うスクリプトには、JavaScript圧縮ツールが便利です。