このツールの動作
圧縮された CSS や絡まった CSS が、読める CSS になります。
a{margin:0 auto;--x:1px}@media print{a{color:#000}}
a {
margin: 0 auto;
--x: 1px
}
@media print {
a {
color: #000
}
}
宣言は一行にひとつ、入れ子ひとつにつき字下げひとつ、最上位の規則のあいだには空行。字下げは選べます。既定は空白二つ、四つにもできます。
そのまま残すもの
- あなたの値。
#FFFFFFはwhiteになりませんし、0pxは0になりません。margin: 10px 10px 10px 10pxもまとめません。こうした書き換えは最適化ツールの仕事で、ひとつひとつがあなたのスタイルシートへの判断です。 - 並び。 宣言も規則も、書いた順に出てきます。CSS では並びが意味です。詳細度が同じなら、後に来た規則が勝ちます。
- コメント。 規則の上でも行末でも、書かれた場所に残ります。そのために書かれたものだからです。
検証ツールではない
a { color: red
a {
color: red
欠けた括弧は欠けたまま返ります。整形ツールは渡されたものを読んで並べるだけで、ブラウザーが受け取るかどうかは告げません。これは両側に切れる話です。構文に誤りのあるスタイルシートでも整えて返すので誤りを見つけやすくなりますし、整った結果は正しさの証明にはなりません。それにはブラウザーの開発者ツールか、Stylelint のような linter を。
反対向き
この場所の CSS 圧縮ツールは、その逆の旅です。ここで足した空白を取り除き、文字列や url() の中身、ライセンスのコメントはそのまま残し、値には同じように手を触れません。読むために整え、配るために縮める。同じスタイルシートの、二つの姿です。
プライバシー
すべての処理はブラウザ内のJavaScriptだけで完結します。データがアップロードされることはないため、機密情報でも安心して利用でき、オフラインでも動作します。