CSS圧縮ツール・整形ツール
プライバシー優先設計 — すべてブラウザ内で処理します
CSSをブラウザ内で最小化または整形できます。Toovaは空白とコメントを取り除き、本番用にスタイルシートを縮小します。最小化されたCSSを読みやすい形に展開して、デバッグ時に実際に読めるようにすることもできます。
2つのモード、1つのワークフロー
Minifyモードはすべてのコメント、不要な空白、不要な改行を取り除きます。出力は機能的に同一のCSSですが、通常20〜40%小さくなり、初回描画が速くなり、転送サイズも減ります。Beautifyモードはその逆で、CDN、フレームワークバンドル、サードパーティウィジェットの最小化されたCSSを読みやすい形に展開し、セレクターやプロパティを確認できるようにします。
設定可能なフォーマット
Beautify出力のインデントを、2スペース、4スペース、タブから選べます。コメントを保持するか（ヘッダーバナーやライセンス文字列に便利）、完全に取り除くかも選択できます。MinifierはCSS変数とセレクターをそのまま保持するため、カスタムプロパティ名やアニメーションのキーフレームはラウンドトリップを通過します。ベンダープレフィックスもそのまま残されます。
ローカルのみ
最小化と整形のすべての処理はブラウザ内で実行されます。貼り付けたCSSが、それがデザインシステムの独自スタイルシートでも、調査中のサードパーティコードでも、ページから外に出ることはありません。処理中Networkタブは空のままで、最初の読み込み後はオフラインでも動作します。
よくある質問
- 最小化したCSSはどれくらい小さくなりますか？
- 通常、gzip後で元の20〜40%小さくなります。コメント、空白、不要なゼロ値の除去で容量が削減されます。最新のビルドパイプラインは自動でこれを行いますが、単発のスニペットには手動ツールが便利です。
- 最小化でCSSが壊れることはありますか？
- いいえ。Minifierはすべてのルール、プロパティ、値をそのまま保持します。除去するのは空白とコメントだけです。CSS変数、アニメーション、ベンダープレフィックスはそのまま残ります。
- CDNのCSSを整形できますか？
- はい。最小化されたCSSを貼り付けると、Toovaが一貫したインデント付きの読みやすい形に展開します。サードパーティウィジェットが実際に何をしているかを調査したり、フレームワークのコンパイル出力をデバッグしたりするときに便利です。
- コメントは保持されますか？
- トグルで切り替えられます。既定では容量削減を優先してコメントを取り除きます。preserve-commentsオプションを有効にすると、ライセンスヘッダーや重要なコメントを残せます。
- CSSはどこかへ送信されますか？
- いいえ。処理はすべてブラウザ内で行われます。アップロードもログ記録もありません。