CSS ビューティファイアーおよび CSS ビューティファイアーミニファイアー
乱雑な CSS や縮小された CSS をクリーンで読みやすいスタイルシートにフォーマットしたり、フォーマットされた CSS を圧縮してファイル サイズを縮小したりできます。インデント、セレクターの書式設定、コメントの処理を調整します。すべてはブラウザ内で実行されます。コードがアップロードされることはありません。
美しくする方法と方法オンラインで CSS を縮小する
2 つのモードを理解する
CSS スタイルシートは、多くの場合、次の 2 つの状態になります。 縮小された (空白なし、1 行、読みにくい) または 一貫性のないフォーマット (インデントが混在しており、改行がおかしい)。このツールは両方向を処理します。
- 美しくする 圧縮された CSS を、成熟した 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() すべては美化モードと縮小モードの両方で正しく通過します。