気になったツール

google製のcss最適化処理(Closure Stylesheets)を利用してTwitter bootstrapを最適化してみる

Posted on 2013年3月26日 by me

CSSの最適化処理をした際の備忘録。
Twitter bootstrapを利用する際に、bootstrap.cssに直接追記したり別のCSSファイルを用意したりすると、CSSファイルだけで結構なサイズになる。
そこでそのサイズを少しでも減らすために、ツールを利用してCSSの最適化処理をしてみた。

CSSの最適化ツールは巷にたくさん出回っているようだけど、今回はGoogleのClosure Stylesheetsを利用してみた。

で、以下がインストールから実際に使用までの流れ。

1. 対象サイトからファイルをダウンロード

Google Codeから、最新のもの(2013年3月26日現在だとclosure-stylesheets-20111230.jarが最新)をダウンロードする。

2. 使う

ファイルをサーバーにアップしてしまえば、すぐに利用できる。
基本的な使い方はこんな感じ

ただ、通常のやり方でbootstrap.cssを最適化すると以下のようにいくつかエラーが出るようなのでこれはなんとかしなくてはいけない。

Detected multiple identical, non-alternate declarations in the same ruleset. If this is intentional please use the /* @alternate */ annotation

ブラウザ別にプロパティを設定している場合に出力されるエラー。先頭に「/* @alternate */」を入れてあげることで回避できる。

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

↓

a:focus {
  outline: thin dotted #333;
  /* @alternate */ outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

unknown @ rule in bootstrap.css at～

CSS3のアニメーションの定義部分で出力されるエラー。
closure-stylesheets-discussで議論されていて修正もされているようなのだけど、Downloadパッケージには反映されていないらしい。
プログレスバーを利用しないのであれば簡易的にコメントアウトで回避できるけど、
必要であればmixinを使って書き直す必要がある。

ただ今でも開発はアクティブっぽいので、ここらへんを解消してくれるバージョンがきっと出るはず。
ということで次はjsの方も最適化してみる。