CSSの圧縮と整形ツール

使い方

1. スタイルシートをCSS欄に貼り付けます。文字列とurl()は、そのまま保たれます。
2. 小さくするにはモードを圧縮のままにし、読みやすくするには整形を選びます。
3. 変換前のバイト数と変換後のバイト数を比べて、どれだけ減ったかを確かめます。
4. 結果をコピーするか、styles.cssとしてダウンロードします。

圧縮で取り除くものと、残すもの

CSSのコメントは /* から */ までで、取り除かれます。ただし、「/*!」 で始まる通知は、そこに含まれるライセンスや著作者の表示のために残されます。CSS構文の仕様（英語）がコメントを定義し、このツールは文字列とurl()のトークンを同じ規則で読むので、その内容はそのままコピーされます。

空白は、文法が必要としない場所から取り除かれます。波かっこの前後、カンマ、宣言のコロンの周り、「!important」の前です。ブロックの最後のセミコロンは、閉じる波かっこがブロックを終えるので取り除かれます。セレクターのコロンの前の空白は残ります。.card :hoverと.card:hoverは意味が異なるからです。

a { color : red ; }  becomes  a{color:red}

色、0、行われない短縮

2桁ずつの繰り返しがある16進数の色は、3桁か4桁で書かれます。#ffffffは#fff、#aabbccddは#abcdになります。文字は小文字で書かれます。セレクターの中の色は決して変えられません。#aabbccのような書き方は、IDを指すからです。

値の先頭にある0pxの長さは0になります。calc()のような関数の中や、2つのハイフンで始まるカスタムプロパティの中では、0は長さとして読まれないことがあるので、長さはそのまま残されます。整形は、色も長さも変えません。

• サイズはUTF-8のバイト数で数えます。これはサーバーがファイルを送る方法で、アクセント付きの文字は2バイトになります。
• 圧縮した後は、ページを確かめてください。古いブラウザ向けのまれなハックが、圧縮で取り除かれた空白に頼っていることがあるからです。

よくある質問