CSSを安全に縮小する方法

仕組み

ミニファイアは /* コメント */ を取り除き、連続する空白を 1 つの空白にまとめ、{ } : ; などの構造上の句読点の周囲の空白を削除します。 , > は、閉じ中括弧の前の最後のセミコロンを削除します。セレクターの名前変更、ルールのマージ、カスケードの順序変更は行われません。

レンダリングをブロックする CSS が 1 キロバイトごとにあると、最初のペイントが遅れます。縮小化は、未使用のルールを削除した後に得られる最も安価な方法であり、明らかに冗長な文字のみを扱うツールは、スタイルシートを再定義することなくビルドステップで信頼できます。

.card { color: red; として記述されたルール。パディング: 10px 20px; } は .card{color:red;padding:10px 20px} になり、ルールごとに数十バイトが節約され、実際のスタイルシート全体ではさらに多くのバイトが節約されます。

縮小されていないソースをバージョン管理に保持し、ビルド出力として縮小します。フォールバックでカスタムプロパティを使用する場合は、DevTools で計算されたスタイルを前後で比較してください。カスケードは保持されますが、1 つのスペースが失われると、値の解析方法が変わる可能性があります。

未使用の CSS ルールは削除されますか?

いいえ。コメントと余分な空白は削除されます。未使用ルールの検出にはページ全体の監査が必要です。

縮小後に calc() が動作しなくなったのはなぜですか?

CSS 仕様では、calc() 内の + と - の周囲にスペースが必要です。縮小後にスタイルシートを再テストします。

SCSS または LESS を縮小できますか?

いいえ。プレーンな CSS が必要です。プリプロセッサには独自のビルドステップがあります。

このツールは本当に無料ですか?

はい。アカウント、ペイウォール、使用制限はありません。 Tools App は、その背後にあるスタジオである aumenso によって資金提供されています。

入力した内容はアップロードされますか?

いいえ。ツールはブラウザのタブで実行されます。入力した内容は当社に送信されたり保存されたりすることはありません。