CSS ビューティファイアー & ミニファイアー
乱雑な CSS や縮小された CSS をクリーンで読みやすいスタイルシートにフォーマットしたり、フォーマットされた CSS を圧縮してファイル サイズを縮小したりできます。インデント、セレクターの書式設定、コメントの処理を調整します。すべてはブラウザ内で実行されます。コードがアップロードされることはありません。
CSS をオンラインで整形・縮小する方法
2 つのモードを理解する
CSS スタイルシートは、多くの場合、次の 2 つの状態になります。縮小済み（空白なし、1 行、読みにくい）または書式が不統一（インデントが混在し、改行がおかしい）。このツールはどちらの方向にも対応します。
- 整形する：圧縮された CSS を、成熟した
js-beautifyライブラリを使って読みやすいレイアウトに展開します。インデント、セレクターの書式、ルール間の間隔はすべて設定可能です。 - 縮小する：コメントと不要な空白を削除して、ユーザーへ配信するバイト数を削減します。ビルドステップがない場合に本番 CSS を配布する際に役立ちます。
このツールの使い方
- CSS を左側の入力ペインに貼り付けます。
- ツールバーからインデントと書式設定のオプションを選択します。
- 整形する をクリックしてフォーマット、または 縮小する をクリックして圧縮します。
- 結果をコピーするか、
.cssファイルとしてダウンロードするか、入力として使用する をクリックして操作を連鎖させます。
このツールは、標準の CSS だけでなく、SCSS のようなネストされた構文、メディア クエリ、キーフレーム、CSS 変数も処理します。すべての処理はブラウザ内でローカルに行われます。
よくある質問
私のCSSはどこかにアップロードされていますか?
いいえ。ビューティファイアーとミニファイアーは両方とも、クライアント側の JavaScript を使用して完全にブラウザー内で実行されます。コードがデバイスの外に出ることはなく、何も記録されません。
縮小すると実際にどれくらい節約できるのでしょうか?
一般的な手書きスタイルシートまたは縮小されていないスタイルシートの場合、主にコメント、インデント、改行の削除により、縮小後に 20 ～ 40% のサイズ縮小が期待されます。すでにコンパクトな CSS では、節約できる効果はさらに小さくなります。出力ペインには正確なバイト デルタが表示されます。
ミニファイアーは CSS を破壊しますか?
ミニファイアは、各ルール ブロックの末尾にある空白、コメント、および末尾のセミコロンのみを削除します。セレクターの書き換え、ルールのマージ、プロパティの並べ替えは行わないため、出力の動作は入力と同じです。
SCSS または LESS をサポートしていますか?
SCSS スタイルのネストされたルールや行コメント (//) を、カジュアルな用途には十分な程度に整形できますが、SCSS コンパイラではありません。実際の SCSS/LESS ワークフローの場合は、まず CSS にコンパイルしてから、必要に応じてここでフォーマットします。
CSS変数をサポートしていますか? @supports、そして現代の構文は？
完全にサポートされています。カスタム プロパティ (--var）、 @supports、 @container、ネスティング、 :is()/:where()、 そして color-mix() はすべて、整形モードと縮小モードの両方で正しく通過します。