VS コードで CSS を縮小するにはどうすればよいですか?

VS コードには、内蔵の minify コマンドがないため、拡張機能 (「minify」コマンドなど) をインストールするか、保存時に ESBuild、Lightning CSS、または CSSNANO などのビルドツールを実行します。何も設定せずに簡単に 1 回限りの場合、ここに CSS を貼り付けて [ミニファイ] をクリックします。ブラウザーで実行され、正確なバイト数が表示されます。

縮小で CSS が壊れますか?

いやー。このミニファイアは、冗長であることを証明する文字のみを削除します: コメント、余分な空白、末尾のセミコロン、およびゼロの長さのユニット接尾辞。何かに触れる前に文字列リテラル、url() 値、および calc() 式を解析して、calc(100% - 20px) などの空白に敏感な構造と div :hover などの子孫セレクターが、バイトごとに同一化します。

CSS をミニフィケーションすると、実際にどれだけ節約できますか?

手書きのスタイルシートは通常 25 ～ 40% 縮小します。コメントが多いファイルは半分以上になる可能性があります。 Gzip または Brotli を提供すると、ワイヤーの節約は小さく、圧縮に加えて 5 ～ 15% の場合がありますが、縮小された入力は、より高速に圧縮し、ブラウザーでより速く解析します。貯蓄バッジには正確な数字が表示されるため、推測する必要はありません。

サーバーがすでに gzip を使用しているのに、なぜ CSS を縮小する必要があるのですか?

GZIP と縮小は補完的であり、交換はできません。 gzip はコメントを削除したり、#ffff を #ffff に短縮することはできません - よりコンパクトにエンコードすることしかできません - gzip だけよりも、gzip は常に小さいので、gzip は常に小さい。ブラウザーは、元のテキスト全体を解凍して解析する必要もあり、CSS 解析は重要なレンダリングパスにあります。

私の /*! ライセンスのコメントは削除されていますか?

いやー /*! で始まるコメントは、デフォルトで保存されます。これは、Terser、Cssnano、Clean-CSS と同じ規則に従っています。つまり、Normalize.css のようなライブラリのライセンスヘッダーは、縮小に耐え、属性要件に準拠したままになります。

#aabbcc を #abc に短縮しても安全ですか?

はい - 3 桁の 16 進色は、各桁を展開する CSS 仕様で定義されるため、#ABC と #AABBCC はまったく同じ色です。このツールは、各ペアが繰り返される 6 桁の値を短縮するだけで、文字列または url() 内のアルファチャネルまたは何かを含む 8 桁の 16 進色に触れることはありません。

ゼロ値 (0px → 0) から単位を削除すると、問題が発生しますか?

長さはありません - CSS 仕様では、長さがゼロで単位は必要ないため、マージン: 0px とマージン: 0 は同一です。このツールは、意図的に 0%、0 および 0 度をそのままにしておきます (キーフレームの 0% はセレクターで、アニメーションのタイミングにはその単位が必要です)。

ソースがない本番 CSS バンドルを縮小できますか?

はい、まさにそれがビューティファイアボタンの目的です。 1 行の CSS を 1 行につき 1 つの宣言に拡張し、適切なインデントとルール間の空白行を使用して、ベンダーバンドルの差分、読み取り、またはデバッグを実行することができます。ビルド時に削除されたので、元のコメントやソース構造ではなく、フォーマットが復元されます。

ブラウザまたはビルドパイプラインでミニファイアする必要がありますか?

プロダクションアプリの場合、ビルドパイプライン (CSSNANO、ESBUILD、Lightning CSS) で縮小を維持して、自動で繰り返し可能にします。このツールは、他のすべての機能に優れています。簡単な 1 回限りのアセット、CSS、CMS 注入スタイル、ファイルがどれだけ縮小するか、インシデント中にバンドルを美化して再構築できない場合などに最適です。

このツールは SCSS をサポートしていますか? レスト CSS またはネストされた CSS ?

これは、最新のネイティブネスト、メディアクエリ、カスタムプロパティなど、ブラウザーが解析できるすべてのものを含む、標準の CSS 用に構築されています。 SCSS 変数や少ないミックスインなどのプリプロセッサのみの構文は、コンパイルされていないソースをミニーブル化すると、プリプロセッサーの出力を変更できるため、最初に CSS にコンパイルする必要があります。

私の CSS はサーバーにアップロードされていますか?

いやー . 単純な JavaScript を使用してブラウザーで完全に縮小して美化を実行します。何も送信、ログ記録、保存されません。これは、ネットワークタブで確認できます。[ミニファイ] をクリックしてもリクエストはありません。ページがロードされると、オフラインでも動作します。

CSS ミニファイアと美容師

Q: 縮小で CSS が壊れますか?

いやー 。 このミニファイアは、冗長であることを証明する文字のみを削除します: コメント、余分な空白、末尾のセミコロン、およびゼロの長さのユニット接尾辞。 何かに触れる前に文字列リテラル、url() 値、および calc() 式を解析して、calc(100% - 20px) などの空白に敏感な構造と div :hover などの子孫セレクターが、バイトごとに同一化します。

Q: ソースがない本番 CSS バンドルを縮小できますか?

はい、まさにそれがビューティファイア ボタンの目的です。 1 行の CSS を 1 行につき 1 つの宣言に拡張し、適切なインデントとルール間の空白行を使用して、ベンダー バンドルの差分、読み取り、またはデバッグを実行することができます。 ビルド時に削除されたので、元のコメントやソース構造ではなく、フォーマットが復元されます。

Q: ブラウザまたはビルド パイプラインでミニファイアする必要がありますか?

プロダクション アプリの場合、ビルド パイプライン (CSSNANO、ESBUILD、Lightning CSS) で縮小を維持して、自動で繰り返し可能にします。 このツールは、他のすべての機能に優れています。簡単な 1 回限りのアセット、CSS、CMS 注入スタイル、ファイルがどれだけ縮小するか、インシデント中にバンドルを美化して再構築できない場合などに最適です。

ファイルサイズをカットするために CSS を縮小するか、デバッグ用の縮小されたスタイルシートを美化して美化する

Indent:

Input CSS

Output

Output will appear here...

CSS ミニファイアと美容師とは何ですか?

CSS Minifier & Beautifier は双方向のスタイルシートツールです。ブラウザーが必要としないすべてのものを削除して CSS を圧縮します。コメント、空白、冗長なセミコロン、長尺の 16 進色、単位の値をゼロの単位で - プロセスを逆にして、単一行の本番バンドルを読み込み可能な適切なインデントされたルールに戻します。レンダリングブロックスタイルシートから取り除くバイトごとに、ブラウザがダウンロードしてすぐに解析できるバイトが、最初のコンテンツフルペイントや最大のコンテンツペイントなどのコア Web Vitals メトリックを直接フィードします。

ミニファイアは意図的に保守的です。文字列リテラル、url() 値、および calc() 式を完全に認識しているため、calc(100% - 20px) が依存する空白を削除せず、コンテンツ文字列内の色のようなテキストを書き換えたり、div:hover と div:hover を区別する間隔に触れたりしないでください。一般的な手書きのスタイルシートでは、Gzip の前に 25 ～ 40% のサイズの縮小が期待できます。GZIP または Brotli をワイヤーで組み合わせても、圧縮が反復的でコメントのない入力でよりよく機能するため、縮小によって意味のあるスライスが削られます。

すべてのブラウザでは、すべて 100% クライアント側で実行されます。 CSS がアップロード、ログ、またはサーバーに保存されることはありません。つまり、独自のデザインシステムコード、未発表の製品スタイル、またはクライアントワークを安全に貼り付けることができます。また、ページがロードされるとオフラインでも機能します。完全な PostCSS または ESBuild パイプラインを配線せずに、簡単な Minify パスが必要な場合に役立ちます。

ここでの縮小は、一連の検索ルールではなく、構文に注意することです。これが、CSS が一致するものを削除するため、文字列内の空白、url() 値、属性セレクターだけをそのままにして、本番スタイルシートで安全に実行できるようにします。感嘆符で始まるコメントは、ビルドを存続させる必要があるライセンスヘッダーの規則であるままにされます。

CSS ミニファイアと美容師の使い方

CSS を貼り付けます
スタイルシートを入力領域にドロップします。単一のルール、コンポーネントファイル、または完全な本番バンドルです。フォーマット済みの CSS と既に縮小された CSS の両方が受け入れられます。
ミニファイまたはビューティファイを選択してください
[ミニファイ] をクリックして本番環境に圧縮するか、[ビューティファイ] をクリックして、ルール間の空白行を使用して、ミニファイドコードを 1 行につき 1 つの宣言に展開します。美化するには、最初に好みのインデントを選択してください。
貯蓄バッジを確認する
このツールは、サイズの前後の正確なサイズとパーセンテージの変更 (例: "12.4 KB → 8.1 KB, -34%") を報告するので、トランスフォームが何を購入したかを正確に知ることができます。
コピーまたはダウンロード
クリックするだけで結果をクリップボードにコピーするか、ビルド出力または CDN にドロップする準備ができている .css ファイルとしてダウンロードします。

主な機能

安全で構文認識の縮小
文字列リテラル、url() 値、calc() の間隔を尊重します - 有効な CSS を破損することなく積極的に圧縮します。
16 進数とゼロ値の短縮
#ffff を #ffff に書き換え、0px を 0 に書き換えて安全であることが証明され、空白の除去を超えて余分なバイトを絞り込む
ライセンスコメントの保存
バナーのコメントをそのまま維持するため、ライブラリライセンスヘッダーは最小限に抑えられ、標準のビルドツールの動作に一致します。
ワンクリック美人
ミニファイドバンドルを、本番環境の問題をデバッグするための 2、4、または 8 のスペースインデントを設定可能な、読みやすいルールに展開します。

Frequently Asked Questions

CSS の縮小は、ブラウザがスタイルシートをレンダリングする必要のないすべての文字を削除するプロセスです。コメント、空白、改行、セミコロンの末尾にあり、#ffff から #ffff などの安全な値を短縮します。その結果、機能的に同一の CSS がより少ないバイト数になり、ダウンロードと解析が高速になります。スタイルシートはレンダーブロックであるため、CSS が小さいと、最初のコンテンツに満ちたペイントなどのメトリクスが改善されます。