CSS Beautifier およびフォーマッター オンライン
乱雑または圧縮された CSS スタイルシートをリアルタイムで即座にフォーマット、縮小解除、整理します。当社のステートマシン CSS フォーマッタは、ネストされた ZZQ1QXZ@media クエリ、@keyframes、CSS 変数 (--var)、https:// URL、およびinline SVG データ URI - 運用環境に出荷する準備ができた場合、ワンクリックで実行できる CSS Minifier が含まれます。
オンラインでCSSを美しくして縮小する方法
- CSS: 圧縮した
.min.cssまたは乱雑なスタイルシートを左側の Input CSS エディターに貼り付けるか、Load Sample をクリックしてネストされた@mediaクエリをテストします。変数と URL。 - プリセットの選択または設定のカスタマイズ: 2 スペースを選択、4 スペース、クリーン＆ソート A ～ ZXXQ7QXZ、または クイック プリセット バーから (.min.css) を縮小するか、調整します右側はインデント、中括弧の配置、セレクターの分割、色の圧縮です。
- Inspect Live Statistics: Input、Output、Rules、および Lines カウンターが入力またはオプションの切り替えと同時に更新されるのを確認してください。
- コピーまたはダウンロード: clipboardにコピー または ダウンロード .css をクリックして、書式設定されたスタイルシートを
styles.beautified.css(または縮小モードのstyles.min.css) として保存します。
CSS フォーマットと最適化オプションの説明
| オプション | 何をするのか | 前に | 後 |
|---|---|---|---|
| 縮小とインデント | 単一行のルールと、2、4、または 8 個のスペースまたはタブを含むネストされた @media / @keyframes ブロックを展開します。 |
@media(最大幅:768px){.box{幅:100%}} |
@media (最大幅: 768px) { |
| 1 行につき 1 つのセレクター | :is() または :not() 内のカンマを無視して、カンマで区切られたセレクター リストを個々の行に分割します。 |
.btn、.card、.modal { ... } |
.btn, |
| カラー値を圧縮 | 周囲のトークンを保持しながら、宣言値内の rgb() および 6 桁の 16 進コードを 3 桁の 16 進コードに変換します。 |
border: 1px ソリッド rgb(255, 0, 0); |
border: 1px ソリッド #f00; |
| プロパティの並べ替え (A ～ Z) | 各ブロック内の宣言をアルファベット順に並べてコードレビューを標準化し、重複するプロパティを明らかにします。 | Z-インデックス: 5;ディスプレイ: フレックス; align-items: 中央; |
align-items: センター; |
ステートマシン CSS Beautifier を使用する理由
多くの単純なオンライン CSS フォーマッタは、コロン (:)、セミコロン (;)、または中括弧 (}) ごとにコードを分割します。このアプローチは、スタイルシートに次のような最新の CSS 機能が含まれるとすぐに破綻します。
- Nested At-Rules & Native CSS Nesting:
@mediaクエリ、@supports機能クエリ、@keyframesアニメーション、@layerブロック、およびネストされた子セレクターには複数レベルのインデント追跡が必要です。 - 外部 URL とインライン SVG データ URI:
background のようなプロパティ: url("https://...")またはurl("data:image/svg+xml;utf8,には、CSS プロパティとして分割してはいけないコロンとセミコロンが含まれています区切り文字。") - 擬似要素コンテンツ文字列:
content: "Item: 1; Status: OK"のような宣言は、正確な内部文字と空白をそのまま保持します。 - W3C-正確なカラー短縮: 名前付きカラーは、CSS 仕様で同等の 16 進数が厳密に短く同一である場合にのみ短縮されます (たとえば、
white→#fffおよびblack→#000、ただし、#008000の方が長く、実際には#0f0であるため、greenはgreenのままになります。ライム）。
よくある質問
.min.css ファイルをオンラインで縮小解除するにはどうすればよいですか?
圧縮された .min.css コードを左側の Input CSS ボックスに貼り付けます。このツールは、セレクター、宣言、@media クエリ、および @keyframes を、リアルタイムできれいにインデントされた複数行の CSS に自動的に解析します。
この CSS beautifier は、@media クエリ、@keyframes、および data: URI をサポートしていますか?
はい。単純な分割ベースのフォーマッタとは異なり、このツールは、ネストされたブロック (@media、@supports、@keyframes、@layer、およびネイティブ CSS ネスト) およびコロンを保存するステートマシン CSS パーサーを使用します。および url("https://...")、data:image/svg+xml URI 内のセミコロン、および引用符で囲まれた content 文字列。
CSS プロパティをアルファベット順に並べ替えても安全ですか?
アルファベット順に並べ替えると、大きなルールをスキャンしやすくなり、重複した宣言を見つけやすくなります。ただし、ルールが簡略プロパティの後により具体的なオーバーライドが続く場合 (またはその逆、background-color と background など)、宣言の順序を変更すると、どのプロパティが優先されるかが変わる可能性があります。ルールが短縮表現のオーバーライド順序に依存しない場合は、並べ替えを有効にします。
このツールで CSS も縮小できますか?
はい。 [Minify CSS] ボタンをクリックして (または設定パネルで Minify (Single-Line .min.css) を選択して)、コメント、空白、末尾のセミコロンを取り除き、カラー値をコンパクトな制作スタイルシートに圧縮します。
私の CSS コードはどこかのサーバーにアップロードされていますか?
いいえ。すべての CSS の書式設定と縮小化は、JavaScript を使用してブラウザーで 100% ローカルに実行されます。スタイルシートがコンピュータから離れることはありません。