ツール
入力
結果
結果はここに表示されます。多くの CSS ミニファイアは空白とコメントを取り除くだけです。CSSO はそれに加えて構造を組み替えます。まったく同じ宣言を持つルールをまとめ、margin-top、margin-right、margin-bottom、margin-left を 1 つの margin ショートハンドに集約し、padding: 8px 16px 8px 16px を 8px 16px に短くし、#ffffff を #fff に、0px を 0 に書き換えます。postcss-csso や gulp-csso のエンジンでもあります。スタイルシートを貼り付ければ、ブラウザが実際に必要とする量を、生のサイズと gzip 後のサイズで確認できます。
動作のしくみ
- 圧縮の前にスタイルシートを一度パースし、構文エラーがあれば行番号付きで報告します。そうしないと CSSO が壊れたルールを黙って捨ててしまうからです。
- 構造最適化をオフにすると、CSSO は空白、コメント、色、数値といった安全な局所的変更だけを行います。
- /*! コメントはライセンスのために既定で保持されます。オフにするとすべてのコメントを削除します。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
このツールは無料で登録不要です。結果は開いているページの中にだけあり、どこにも保存されません。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- 構造最適化は安全ですか？
- 挙動を保つように設計されています。ルールがまとめられたり移動されたりするのは、カスケードの結果が同じになることを CSSO が示せる場合だけです。まれな例外は、ブラウザハックや、無効な宣言が特定の形で無視されることに依存しているスタイルシートです。圧縮後の CSS で表示が変わった場合は、構造最適化をオフにして比較してください。
- CSS が拒否されたのはなぜですか？
- コロンのない color red のような宣言や、セレクター内で開いたままのかっこは構文エラーです。ブラウザはそのようなルールを読み飛ばし、CSSO も黙って同じことをします。行番号付きで止まるので、あると思っていたルールが欠けたスタイルシートを出荷する代わりに、間違いを直せます。
- ネスト、@layer、@container のようなモダンな CSS に対応していますか？
- カスタムプロパティ、@layer、@container は問題ありません。ネイティブの CSS ネストは対応していません。CSSO のパーサーはそれより前に作られたもので、ネストされたルールを捨ててしまうため、このツールは代わりにパースエラーで止まります。先にネストされたルールを平坦にするか、Lightning CSS のようなビルドツールにすべて任せてください。
- CSSO、cssnano、Lightning CSS のどれを使うべきですか？
- 一般的なスタイルシートなら、どれも似たようなサイズになります。cssnano は PostCSS プラグインの集まり、Lightning CSS は Rust で書かれていてベンダープレフィックスの処理や新しい構文の変換も行い、CSSO の強みは構造的なマージです。CSSO のパーサーはネイティブのネストのような新しい構文に追いついていないため、スタイルシートでそれを使っている場合は重要な違いになります。
背後にあるオープンソース
このツールは css/csso（MIT）の上で動作しています。同じ処理を自分のプログラムに組み込みたい場合は、そのライブラリを使ってください。
css/csso別の呼び方
- css 圧縮
- css minify オンライン
- css 圧縮 ツール
- csso オンライン
- css ミニファイ
- css 軽量化