CSS整形・圧縮
CSSを規則ごとに改行するか、空白と改行を落とします。圧縮では本当に不要なものだけを消します — 色を短く書き換えたり、一括指定にまとめたりはしません。数バイトのために誰かの配置を壊す危険を負う値打ちはありません。
貼り付けたコードは端末から出ません。 ブラウザの中だけで処理し、どこにも送らず保存もしません。社内の設定ファイルや本番のクエリのように外へ出しにくいものも、そのために使えます。
整形が行うこと
波括弧とセミコロンを区切りに行を分けます。セレクタと開き波括弧で一行、宣言一つで一行、閉じ波括弧で一行です。字下げは波括弧の深さに従うので、@media の中の規則は一段深く入ります。元の改行はすべて捨ててから入れ直すため、一行に潰されたファイルでも、行がばらばらのファイルでも、同じ形で出てきます。引用符と括弧の外にあるコロンと読点の後ろには一つ空白を入れ、url(a,b) の中には触れません。整形ではコメントはすべて残ります。
圧縮が守るもの
引用符の中はそのまま持っていきます。content: "a b" の空白二つもそのままです。落とすのは、続いた空白、波括弧・コロン・セミコロン・読点・>・~・+ の周りの空白、ブロック末尾のセミコロンです。引用符なしで書いた url() の中は他の文字と同じに扱うので、セミコロンを含む data: URL は引用符で囲んでおいてください。
バイト数の読み方
結果の上の数字は文字数ではなく UTF-8 のバイト数です。サーバが gzip や brotli で送るなら、この割合は誇張です — 空白はいちばんよく縮む部分なので、実際に流れる量の差はせいぜい数パーセントです。
よくある質問
#ffffff を #fff に縮めますか
縮めません。その手の最適化は数バイトを稼ぐ代わりに、間違えると描画を壊します。消すのは空白・改行・ブロック末尾のセミコロン・コメントだけです。
ライセンスのコメントは残りますか
残ります。/*! で始まるコメントは保ちます。それ以外のコメントは圧縮のときに消えます。
コメントは消えますか
圧縮すると /* … */ のコメントは消えますが、/*! で始まるコメントは残します。ライセンスのように残す必要があるコメントは先頭を /*! にしてください — 圧縮した後に書き足す必要はありません。
どれくらい小さくなりますか
手で書いたCSSはおよそ三分の一が空白なので、それが目安です。ただしサーバがgzipで送るなら空白はよく縮むので、実際に流れる量の差はもっと小さくなります。
圧縮してから整形すると元に戻りますか
一字一句は戻りません。空行とコメントは圧縮した時点で消え、整形は既定の「規則ごとに一行」の形にします。意味は同じですが、見た目は違います。
@media の中の規則も整形されますか
されます。見るのは波括弧の深さだけなので、@media のブロックが一段、その中の規則が二段の字下げで出ます。@import や @charset のように波括弧を持たない文は、セミコロンで行が終わって自分の行を持ちます。
SCSS や LESS も扱えますか
波括弧とセミコロンだけを見て分けるので、入れ子の規則は見た目には整形されます。ただし // の一行コメントは CSS の文法ではなく、コメントとして認識しません — 圧縮で改行が消えると、その後ろに続くコードがコメントに飲み込まれます。プリプロセッサのファイルはそちらの道具で整えてください。
貼り付けたものはサーバへ送られますか
送られません。すべてブラウザの中で動き、送信も保存もしません。だからこそ、ふつうならウェブページに貼り付けない社内の設定ファイルや本番のクエリにも使えます。通信を切ったままでも動きます。