CSS整形
スタイルシートをインデントして読みやすくします。すべてブラウザ内で処理され、名前の変更、短縮、正規化は一切行いません。
すべてブラウザ内で動作します。アップロード、記録、保存は一切行いません。
圧縮された、またはインデントの崩れたスタイルシートを貼り付けて、きちんと読める形にしましょう。整形はブラウザ内で行われ、空白以外は何も変更しません。
仕組み
スタイルシートをコメント、文字列、URL、名前、数値、括弧、波括弧といった部品に分けてから書き直します。各ルールには専用のブロックが、セレクタリストの各セレクタには専用の行が、各宣言にはルール内の専用の行が割り当てられます。ネストされたルール、メディアクエリ、キーフレームもそれに合わせてネストされます。
空白は、意味がないと証明できる場合を除いて保持されます。これはほとんどの整形ツールとは逆のやり方で、意図的なものです。CSSでは2つのセレクタの間のスペースは子孫結合子なので、「.a .b」と「.a.b」は別の要素を選択します。空白を取り除くのは、カンマ、セミコロン、閉じ括弧の前と、開き括弧の後だけです。そこではCSSが空白を何とも解釈しないからです。
追加する空白は、宣言のコロンの後のスペースだけです。このコロンを疑似クラスのコロンと区別するために、整形ツールは何を読んでいるか判断する前に、次の閉じ括弧かセミコロンまで先読みします。
例
| ケース | 入力 | 結果 |
|---|---|---|
| 1行で書かれたルール | a{color:red;margin:0} | a { color: red; margin: 0; } |
よくある質問
スタイルシートはどこかに送信されますか？
いいえ。整形ツールはこのページ上で動くJavaScriptです。アップロードも記録も保存もされません。ネットワークを切断してもツールは動き続けます。
圧縮（minify）もできますか？
いいえ。これは見落としではなく判断です。CSSを圧縮するということは、どの空白に意味があり、どれにないかを決めることです。それを間違えるとルールが適用される要素が変わってしまい、しかも気づかないうちに、本番環境で初めてわかる形で起こります。それは別の仕事であり、きちんとやるか、やらないかのどちらかであるべきです。
値を修正したり並べ替えたりしますか？
いいえ。16進数の色を小文字にしたり、#ffffffを短縮したり、先頭のゼロを削ったり、宣言を並べ替えたり、ベンダープレフィックスを追加したりはしません。どれもレイアウトの問題ではなくコードに対する意見であり、中には動作を変えるものもあります。動かすのは空白だけです。
SassやLessに対応していますか？
部分的に、そして正直に対応しています。これらの言語がモダンなCSSと共有するネストされたルールはレイアウトします。ミックスイン、変数、制御ディレクティブの意味はまったくわからないので、それらはトークンとして扱います。何も失われませんが、@ifが分岐を開くことまでは理解していないと考えてください。
data URIはどうなりますか？
そのまま残ります。引用符のないurl()は閉じ括弧までを1つの部品として読みます。data URIにはセミコロンが含まれることが多く、それを宣言の終わりとして読むと値が2つに分かれてしまうからです。
知っておきたいこと
- 出力には、入力に含まれていた部品がそのまま含まれます。唯一追加されるのはブロックの最後の宣言のセミコロンで、これはどこでも安全であり、あとでルールに1行追加したときにも結果が安定します。
- 閉じられていない文字列、コメント、url()があると、整形せずに受け付けません。その先ではコードとテキストを区別できなくなるからです。
- レイアウトは決定的です。同じスタイルシートに同じオプションを指定すれば常に同じ出力になり、整形済みのスタイルシートを整形しても何も変わりません。