compress CSS圧縮・整形ツール star

仕組み

圧縮(Minify)は、機械のパーサーには不要だが人間の読み手には役立つ要素——コメント、改行、インデント、そして閉じ括弧の前の最後のセミコロン——をすべて取り除くことで、ファイルサイズを小さくします。これらはブラウザがスタイルを適用する仕組みにとって何の意味も持ちません。すべてのルールを1行に、空白を一切入れずに書いたスタイルシートも、きれいに整形されたものとまったく同じように動作します。違うのはサイズが小さく、ダウンロードが速いという点だけです。これは本番環境では重要な意味を持ちます。CSSはダウンロードして解析されるまでページの描画をブロックするため、ファイルから数キロバイトを削ることが、特に低速な回線でページの読み込み速度を直接改善するからです。

整形(Beautify)はその逆の処理であり、実際にはこちらのほうが難しい作業です。圧縮された、あるいは乱雑なCSSを受け取り、1行につき1つの宣言、1ブロックにつき1つのルール、コロンや波括弧の周囲に一貫した空白を入れて、再びインデントし直します。これは一種のリバースエンジニアリングです。なぜなら、ファイルが圧縮された瞬間に、元の書式——とりわけコメント——は失われてしまうからです。復元できるのは構造的な書式(どのセレクタがどの宣言と結びついているか)だけであり、著者が元々つけていた改行位置やメモそのものではありません。たとえば.btn{color:red;padding:8px}は、.btn { }の中にcolor: red;とpadding: 8px;がそれぞれ独立した行として並ぶ、きちんとインデントされたブロックになります。

知っておくべきこと

• どちらの方向の変換も動作をそのまま保ちます。 セレクタ、プロパティ、値、カスケードの順序は一切変更されません。変わるのは空白とコメントだけなので、詳細度(スペシフィシティ)や継承は変換前後でまったく同じように機能します。
• これは軽量な正規表現ベースのツールであり、PostCSSのような完全なCSSパーサーではありません。標準的なCSSは正しく処理しますが、引用符の中に文字どおりの{、}、;を含む値(実際には稀で、多くは生成されたcontent:値で見られます)は、完璧には整形されないことがあります。
• Sass/Lessの構文は処理されません。 ネスト、変数、mixinはそれ単体では有効なCSSではないため、コンパイルされることなく、ほぼそのままの形で通過します。これらをプレーンなCSSに変換するには、依然としてSassやLess自体が必要です。
• 圧縮によって永久に失われるのはコメントだけです。 コメントがブラウザ固有のハックや「これは削除しないで」という警告を記録している場合は、圧縮されていないソースのコピーをどこかに保管しておいてください。圧縮後の出力からそれを取り戻す方法はありません。

具体的な比較をしてみましょう。.card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }のように整形されたルールは、圧縮すると.card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)}になります——見た目にも明らかに短くなり、数十のルール、コメント、ネストされたメディアクエリを含む完全なスタイルシート全体で見ると、この削減量は通常、元のファイルサイズの20%から40%程度に及びます。