Code Beautifier - tetsuya

MdN発行のムック「スタイルシート表現デザイン帖」はよい本だと思う。

ここに、先日の「Browsershots」と並んで、「code beautifier」というオンラインウェアが紹介されていた（リンクはこちら）。

トップページ（下図）上に「CSS Formatter and Optimiser」と書かれていて、CSSの最適化や圧縮（コンプレッサー）ができるサイトである。

ここに、CSSを直打ちするか・CSSファイルのURLを入力して、最適化オプションを指定して「Process CSS」というボタンを押すだけでよい。

ここでは、以下のCSS（先のログ「W3C CSS Validation Service」で利用したサンプル）を読み込ませてみた。

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 20px 0 0 0;
	background: #EEE;
	color: #000;
	line-height: 1.5;
	text-align: center;
	font-family: Tahoma,sans-serif,monospace;
}

/*
Scroll Barを常に表示。
コンテンツのボリュームによって、スタイルが崩れないように。
*/
html {
	overflow-y: scroll;
}

h1,h2,h3,h4,h5,h6,p,ul,ol {
	margin: 0 0 0 10px;
}

ul,ol {
	padding: 0 0 0 +20px;
}

img {
	border: 0;
}

このCSSでは、

ul,ol {
	padding: 0 0 0 +20px;
}

のプラス（＋）は不要であるし、インデントも不要であって、これらは伝送速度に影響する要因でもある（細かいことを言えば、:の後のスペース、改行コードも不要である）。

以下が、デフォルトのオプションでCode Buautifierを通した結果。
（改行コードを除き）上に書いたような「無駄」がキレイに取り除かれている。

* {
margin:0;
padding:0;
}

body {
background:#EEE;
color:#000;
line-height:1.5;
text-align:center;
font-family:Tahoma,sans-serif,monospace;
margin:20px 0 0;
}

html {
overflow-y:scroll;
}

h1,h2,h3,h4,h5,h6,p,ul,ol {
margin:0 0 0 10px;
}

ul,ol {
padding:0 0 0 20px;
}

img {
border:0;
}

実行後の画面イメージは下図。
圧縮率や、「なにをどうした」ということがMessage領域に示される。
overflow-yがCSS2.1にないぞ、ということも知らせてくれている。

ここで、「Select」、「Copy to Clipboard」は、結果をコピペするための機能。前者をクリックすると、結果のCSSが選択される（CSS全体をドラッグしたのと同じ）。

最適化オプションは、「Process CSS」を押す前に画面右で選択できる。
最上部にある「Compression（圧縮）」オプションのデフォルトは、Standardとなっていて、可読性とサイズをバランスする。
上の例で改行コードが残されていたのは、「可読性」のためである。

このオプションをHighest（可読性は無視して、最小のサイズにする）と、改行コードが取り除かれた、いわゆる「圧縮されたCSS」となる。