CSS圧縮ツール（Minifier）

圧縮したCSSはより速く読み込まれます。コメント、インデント、改行はブラウザには何の意味もありませんが、スタイルシートの3分の1を占めることもあります。この圧縮ツールはCSSを正しくトークンに分解するため、安全なものだけを削除します。文字列、url()のパス、.sm\:p-4のようなエスケープされたクラス名、calc()に必要な空白には手を加えません。圧縮前後のサイズも表示します。

使い方

1. スタイルシートをボックスに貼り付けます。
2. CSSにフレームワークのライセンスが含まれている場合は、/*! ライセンスコメントを残すにチェックを入れたままにします。
3. #abcの色指定、単位なしの0、0.5の代わりの.5を使う場合は、値の短縮をオンのままにします。
4. 圧縮したCSSをコピーし、削減したバイト数を確認します。

計算式

削減率 % = (元のバイト数 − 圧縮後のバイト数) ÷ 元のバイト数 × 100

サイズはUTF-8のバイト数で数えます。空白は { } ; : , のまわりと、セレクター内の結合子 > + ~ のまわりで削除しますが、意味を持つ場所では残します。div :first-childの子孫を表す空白、メディアクエリのandと(の間の空白、calc()内の+と−のまわりの空白がその例です。

計算例

サンプルのスタイルシートには、ライセンスコメント、通常のコメント、空の.unused { }ルール、メディアクエリがあります。圧縮ツールはライセンスを残してそれ以外を削除し、#FFFFFFを#fff、0px 0.75remを0 .75rem、calc( 100% - 2px )をcalc(100% - 2px)に書き換えます。時間の値には単位が必要なので0sはそのままです。362バイトのサンプルは279バイトになり、約23%小さくなります。