CSS フォーマッタ & 圧縮器

CSS フォーマッターとは？#

CSS フォーマッターは、対極に見えるが同じ問題を解決する 2 つのことを行います: 窮屈で機械生成された CSS を人が読めるものに展開し、広がったスタイルシートを本当に重要なバイトだけに圧縮します。手にする理由はほぼ常に、CSS が今の作業に合わない形で届いたからです——ビルドツールが 1 行の minified を吐き出し、特定のルールを調べる必要がある、あるいは、手書きのファイルが膨らみ、公開前に削りたい。

このページは両方向を本物のエンジンで扱います。整形は js-beautify の css_beautify を使い、セレクターと宣言を予測可能に再インデントします。圧縮は CSSO を使い、空白削除器ではなく本物の構造的最適化器です: 同じ宣言を持つ隣接ルールを併合し、ロングハンドプロパティをショートハンドに折りたたみ、上書きされた宣言を削除し、それから残りの空白を折りたたみます。結果は通常、素朴な圧縮器が生成するものより小さく、入力と意味的に等価です。通信上のすべてのバイトを気にするとき、この違いは重要です。

使い方#

1. 左のCSSペインにスタイルシートを貼り付けます。動作を先に試したいならサンプルが短いスタイルシートを読み込みます。
2. ツールバーでインデントを選びます: 2、4、タブ。2 スペースは現代の一般的な慣習で、4 は密集したファイルを読むのに優しいです。
3. アクションをクリックします:
   • 整形 — js-beautify による再インデントと改行。セレクターは独自の行に、宣言は波括弧内に整います。
   • 圧縮 — CSSO の構造的最適化を走らせ、コンパクトな出力を生成します。コメントは落とされ、重複ルールは併合され、ロングハンドは安全な場所でショートハンドに折りたたまれます。
4. 出力ペインで結果を読み、コピーで取り出します。クリアは両ペインをリセットします。

入力に未終端のルールや壊れた宣言があれば、ステータスバーは推測するのではなくエラーを報告します。

主な特徴#

• 整形と圧縮は異なるエンジン。 整形は js-beautify、圧縮は CSSO です。どちらも両方をやろうとする妥協したルーチンではなく、自分の得意な一つの仕事をします。
• 圧縮で本物の最適化。 CSSO はスタイルシートを再構築します——.a { color: red } .b { color: red } を共有ルールに併合し、margin: 0 0 0 0 を margin: 0 に折りたたみ、後のルールが既に上書きしている宣言を削除します。空白除去は唯一のステップではなく最後のステップです。
• 3 つのインデントスタイル。 2 スペース、4 スペース、タブを 1 つのメニューで切り替えられます。
• 並列、コピーレディ。 入力は編集可能、出力は読み取り専用で 1 クリックコピーボタン付きです。
• 厳格にクライアントサイド。 CSSO と js-beautify はページに同梱され、このツールを開いたときだけ読み込まれます。スタイルシートはブラウザ内で処理され、アップロードされることはありません。

実例#

2 つのルールが作業を繰り返し、ロングハンドが短くできる小さなスタイルシート:

入力:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

2 スペースで整形をクリック:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

繰り返しが今や明らかです——まさにフォーマッターの存在理由です。同じ入力で圧縮をクリックすると、CSSO は構造的に書き直します:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

3 つのことが一度に起きました。4 つの値の padding は、4 辺すべてが等しいため 1 つの値に折りたたまれました。4 つの margin-* ロングハンドは margin ショートハンドに折りたたまれました。そして 2 つの color: #ff0000 ルールは、グループ化されたセレクターを持つ単一のルールに併合され（hex はより短い red に）。素朴な空白削除器は冗長性のすべてのバイトを保持していたでしょう——これらの削減を見つけるのは、再構築する最適化器だけです。

よくある質問#

圧縮でページの見た目は変わりますか？#

いいえ、入力が有効な CSS なら。CSSO はカスケードを保つ変換だけを適用します: 同じ宣言を持つルールの併合、値がすべて同じロングハンドの折りたたみ、より具体的な、あるいは後のルールが上書きする宣言の削除です。変換が曖昧になればスキップされます。整形は純粋に装飾的で、意味を変えることはありません。

圧縮はコメントを保持しますか？#

いいえ。/* !important */ 系のバナーを含め、圧縮中にコメントは削除されます。ライセンスヘッダーやビルドマーカーを生き延びさせる必要があるなら、コメント付きのソースを保持し、圧縮後にビルドパイプラインでバナーを再挿入してください。

圧縮された出力が入力より大きくなることがあるのはなぜですか？#

ほぼ常に、入力がすでに圧縮済みだからです。CSSO はそれでも解析して再出力しなければならず、すでにコンパクトで最適化された入力には得るものが残っていないため、出力は実質的に同じサイズになります。手書きや展開された CSS を与えれば、削減は本物です。

CSS はサーバーに送信されますか？#

いいえ。両エンジンともブラウザ内で走ります。ライブラリはページ自身のバンドルからオンデマンドで読み込まれるため、スタイルシートをどこかに運ぶネットワークリクエストはありません。