セレクターごとに改行した形に整形したり、ブラウザーが無視する空白とコメントを取り除いて圧縮できます。どちらもページ内での文字列の書き換えで、入力は送信されず、文字列・url() の中身・カスタムプロパティはそのまま残ります。
ブラウザ内でローカルに実行CSS を貼り付けて「整形」を押すと、セレクターごとに改行し、階層をタブでそろえた形で出力されます。「圧縮」は、ブラウザーがもともと無視する空白とコメントを取り除きます。どちらもこのページ内での文字列の書き換えで、スタイルシートは送信されず、インストールもアカウントも必要ありません。
書き換えは意図的に控えめです。値は書かれたままを引き継ぎます。文字列、data: URI のような url() の中身、属性セレクター、エスケープシーケンス、カスタムプロパティは整形の対象になりません。また、足りないセミコロンやベンダープレフィックスの補完、ルールの統合も行いません。返ってくるのは、並べ方だけが変わった元のスタイルシートです。
整形では、セレクターを 1 行ずつ書き、入れ子の階層ごとにタブで字下げし、宣言も 1 行ずつ selector { … } の中に置きます。セレクターのカンマはそのまま残り、@media や @supports などの @ ルールはブロックを保ち、空のルールは空のままです。セミコロンを書かずに打った宣言にはセミコロンが足されず、連続したセミコロンは 1 つにまとまります。
これは空白の整えであって、書き方の矯正ではありません。長い行を桁で折り返すこともしませんし、宣言やルールの順序を入れ替えることも、重複した宣言やショートハンドを統合することも、ベンダープレフィックスを追加することもありません。8 個のスペースで字下げしたファイルも、手作業で折り返したファイルも、同じタブ字下げで出力されます。
圧縮は、CSS が空白を必要とする場所では連続する空白を 1 つにまとめ、不要な場所では削除します。.a > .b は .a>.b に、red !important は red!important になりますが、calc(100% - 20px)、1px solid #000、rgba(0, 0, 0, .5) の値の並びは意味を持つ空白とカンマを保ちます。タブと改行は、文字列と url() の中身を除いてすべて消えます。
削減できるのは空白、コメント、重複したセミコロンだけです。すでに圧縮済みのファイルはほとんど変わりません。121 KB の Bootstrap 3.3.7 は、ここでは 333 バイトしか減りません。取り除くものが残っていないからです。手作業で字下げしコメントを付けたファイルなら、さらに数パーセント減ります。クラス名の変更、ルールの統合、未使用セレクターの削除はこのツールの仕事ではありません。
「コメントを削除」は初期状態ではオフです。オンにすると /* … */ が他の処理より先に消えます。/*! … */ のライセンス表示も対象で、ライセンスが保存を求めるファイルを圧縮が書き換えてしまう唯一のケースです。「プロパティ名を小文字化」は初期状態でオンで、対象はプロパティ名だけです。COLOR:RED は color:RED になります。値の大文字小文字はそのままなので url(X.PNG) は変わらず、@ ルールの名前も触りません。
カスタムプロパティは、この小文字化から意図的に外しています。--MainColor と var(--MainColor) が同じ変数を指すのは綴りが一致している間だけで、定義を --maincolor に書き換えるとすべての参照が壊れます。「横並び配置」は整形の出力を連結し、各ルールを閉じ括弧の後で改行して 1 行に収めます。圧縮ではこの設定は無視されます。
2 つのボタンの背後に CSS の構文解析器はないので、検証も修復も行いません。閉じ括弧が足りない入力は打ったまま返り、余分な括弧はそのまま残ります。CSS ではない HTML、JavaScript、文章もそのまま戻ってきます。ブラウザーが受け入れるスタイルシートはここでも通り、壊れたものは同じ場所が壊れたまま返ります。
入力は送信されません。ツール全体がページと一緒に読み込まれるスクリプトなので、作業中に通信は発生せず、ネットワークを切っていても動作します。実用的な上限はサイズです。1.2 MB のスタイルシートの書き換え自体は約 130 ミリ秒ですが、画面用の色分けに約 1.7 秒かかり、待ち時間はそちらです。