CSSを読みやすく整形、配信用に軽量化
0 行 / 0 B
0 行 / 0 B
圧縮では、コメントと余分な空白を取り除き、末尾のセミコロンを削ります。calc() の中の + や - の前後は、意味が変わらないよう空白を残します。
CSS整形・圧縮ツールは、CSSを読みやすいインデント付きに整えるツールです。配信用にコメントと余分な空白を削って軽くすることもできます。
他人から受け取ったCSSや、ツールが生成したCSSは1行に詰まっていて読めないことがあります。整形するとセレクタとプロパティの対応が見え、どこを直せばよいかが分かるようになります。
圧縮では、calc() の中の + や - の前後の空白を残します。CSSの仕様上ここの空白は必須で、削ると計算式として解釈されなくなるためです。文字列リテラルの中身も変更しません。
コメントの量によりますが、整形済みのCSSなら20〜30%程度は小さくなります。プロパティ値の短縮（#ffffff を #fff にするなど）や重複ルールの統合までは行わないため、専用のビルドツールほどは縮みません。そのぶん、意図しない書き換えが起きない安全な処理になっています。
calc(100% - 10px) の空白は残りますか？残ります。CSSの仕様で + と - の前後には空白が必須で、削除すると符号付きの数値として解釈されて式が壊れます。このツールはその位置の空白を保持します。
--color: red のようなカスタムプロパティは問題なく扱えます。CSSネスト記法も文法上は入れ子の波括弧なので、整形・圧縮ともに動作します。SassやLessの独自構文は対象外です。
されます。@media ブロックの中身も1段深くインデントされて表示されます。
サーバー側でgzipやBrotliが有効なら、空白を削ったぶんの差は転送量ではほとんど見えなくなります。それでもファイル自体を小さくしておくと、ブラウザが解析する量が減り、キャッシュの効率も上がります。実運用ではビルドツールに任せ、このツールは受け取ったCSSを読む・単発で軽くする用途で使うのが現実的です。