CSS ミニファイアー

Q: #ff0000 が red になったのはなぜですか？

`red` のほうが短く、まったく同じ色を意味するためです。

CSSO で CSS を圧縮：空白とコメントを削除し、色や値を短くし、ルールを安全にマージします。削減されたバイト数を表示。無料でブラウザ内で動作します。

CSS の入力

出力

すべてブラウザ内で実行されます。データがアップロードされることはありません。

CSS ミニファイアーとは？

CSS ミニファイアーは、構造的なオプティマイザーである CSSO でスタイルシートを圧縮します。空白とコメントの削除に加え、値を短くし（#ff0000 → red、0px → 0）、重複したルールをマージし、結果が変わらない場合は冗長な宣言を削除します。

CSS ミニファイアーの使い方

CSS を入力欄に貼り付けます。
圧縮をクリックします（入力中も出力は更新されます）。
サイズの行で削減量を確認します。
圧縮された CSS をコピーまたはダウンロードします。

例

入力

a { color: #ff0000; margin: 0px 0px; } /* c */

出力

a{color:red;margin:0}

CSS ミニファイアーを使うべき場面

小規模なサイトの本番ビルド、インラインの <style> ブロック、CMS に保存された CSS に使います。ビルドですでに cssnano/lightningcss を使うバンドラーがあれば、それを使い続けてください。ライセンスで必要な場合は、ライセンスコメントを手動で残してください。

CSS ミニファイアーの仕組み

まず簡易スキャンで波括弧、文字列、コメントをチェックし、釣り合っていないブロックを位置付きで報告します。その後、CSS は再構成を有効にした csso.minify に渡されます。CSSO は CSS を AST（css-tree）に解析し、安全な値の圧縮とルールのマージを適用し、空白なしで結果を出力します。/*! … */ のライセンスコメントを含め、コメントは削除されます。