Google Closure Compilerインスパイアな感じのCSSの圧縮ツールをPythonで書いたのでご紹介。ファイルはgithubに置いてあります。
https://github.com/shunito/compCSS
compCSSの機能と特徴
- CSS中のコメント、不要なスペースやタブ、改行を削除します。
- @importでインポートしているCSSを展開して1ファイルにまとめます。
- background-image:で指定している画像をData URI schemeにデコードして埋め込みます。
複数のCSS、画像を1ファイルにまとめることでHTTPセッション数を減らすことができます。
Webアプリ等で多少のパフォーマンス向上が見込めると思います。同様の志向のテクニックにCSS スプライトがありますが、以下のような優位な特徴があります。
- メンテナンス性の高さ。
- CSSスプライトでは複数画像を1枚の画像にまとめ、background-positionを適切に設定する必要がありますが、compCSSではその必要がありません。すでにテスト済みのCSSに適応するだけで自動的に1ファイルにまとめてくれます。
- background-positionの自由化。
- 前項とも関連しますが、CSSスプライトではbackground-positionは画像のクリッピング領域の指定に利用されるためその他用途に使えなくなりますが、その制限はなくなります。また、background-repertも使えるようになります。
- 画像ごとの最適化が可能
- 一枚の画像にまとめないで良いため、個別画像ごとの最適化を行うことができます。
ただし、世の中そんなうまい話だけということもなく、以下のような制限があります。
- 画像ファイルをData URL schemeに変換（まぁ、base64です）すると3割ほどデータ量が増えます
- IE6,7はData URI schemeに対応してません！
- IE8では対応してますが、32 KBのサイズ制限があります。
使い方
- Pythonがインストールされてなければぐぐってあれしてください
- githubからソースをダウンロードします。⇒最新版Zip（master）
- インストールは特に必要ありません。パスを通したい方はご自由に設定を。
- 「python compcss.py -f [cssファイル名] -o [圧縮後ファイル名] 」で実行します。
- 「python compcss.py [cssファイル名]」とすると「元ファイル名_comp.css」な感じに生成します。
まぁ、その他サンプルとして同梱しているCSSを参考にしてください。
既知の問題というか課題
- Data URL schemeに変換するのはローカル環境の画像ファイルのみです。httpで指定したネット越しのファイルを取ってきて変換はしません。
- CSS中で画像ファイルを絶対パス指定している場合、OSのルートから探してしまうためおそらく画像を見つけられず変換できません。ドキュメントルート指定モードが必要。
- 管理用に生成ログとかバージョンとか埋めこむモードとか嬉しいのかも？
- いまいちPythonわかってない。
何かありましたら、twitter: @shunito を呼んでください。よろしくどうぞ。
