Utilore

CSS 圧縮

スタイルシートを貼り付ければ、圧縮された形で返ってきます。入力欄の下に前後のサイズが出るので、割に合ったかどうかがその場で分かります。

コードはこのページから出ません。整形はブラウザ内で行われます。

使い方

  1. 最初の欄に CSS を貼り付けます。入力に合わせて圧縮されます。
  2. 入力欄の下に出る前後のサイズを見比べます。
  3. 結果をコピーします。「整形」を押せばまた読める形に戻せます。

知っておくと便利

取り除かれるもの

コメント、改行、字下げ、コロンや結合子の前後の空白、そして閉じ波かっこ直前のセミコロン（規格が要求したことは一度もありません）です。セレクタでは子孫と先祖を隔てる 1 個の空白を残します。これを消すと、規則が当たる対象そのものが変わってしまうからです。

文字列に手を付けない理由

content: "a;b" の中のセミコロンも、インライン SVG のデータ URI に含まれる波かっこも、正規表現から見れば構造にしか見えません。パターン照合で動く圧縮ツールはこうしたファイルを黙って壊し、その被害は本番でアイコンが消える形で現れます。このツールは 1 文字ずつ読み、引用符の中の文字列をひとまとまりのまま運びます。

よくある質問

スタイルシートの動作は変わりませんか。

変わりません。名前の変更も並べ替えも削除も行わず、消えるのは空白とコメントだけです。どちらも規則の適用には関係しません。

どれくらい小さくなりますか。

手書きのスタイルシートなら 2〜3 割ほど減るのが普通です。gzip をかけたあとでは差はずっと小さくなります。圧縮が繰り返しの空白を処理してくれるからです。

コードはサーバーに送られますか。

送られません。処理はすべてページ内で完結します。未公開のスタイルシートを扱うときには重要な点です。

あとでまた読める形に戻せますか。

「整形」を押せば、1 行 1 宣言の形に展開されます。元のコメントは失われますが、規則はすべて残っています。

関連ツール