妥協してCSSをインライン展開する

先日PhantomJSを使ってCSSをインライン展開する - 下林明正のブログというエントリーを書いたけど誰からも相手にされないという感じで、引き続きなんとかしたいという気持ちだった。

CSSの擬似セレクターとかにまできちんと対応しようと思うと先日のエントリーのようにWebKitのような完全な実装に乗っからなければならないというような感じになって辛いので、妥協してその辺は適当に済ませようという感じになった。

そんなところでCSS::Inlinerでもそんな変なことにはならないという噂を聞いたので再確認してみたところ、以下の様なコードでCSSの擬似セレクターをそんなに使っていないHTMLに対して実行してみたところ、うまくいった。

#!/usr/bin/env perl

use Encode;
use CSS::Inliner;

my $inliner = new CSS::Inliner();
$inliner->read_file({ filename => $ARGV[0], charset => 'utf8'});
print encode_utf8($inliner->inlinify());

先日のエントリーでは不具合があったということを書いていたが、

文字化けする
- CSS::Inliner#read_fileでcharsetオプションを指定していなかった
- 自分がutf8脳みたいな感じになっていて怖いですね
滅茶苦茶なCSSが出力される
- 擬似セレクタとの兼ね合いがうまくいってなかったっぽい。擬似セレクタをそんなに使っていないHTMLなら許容出来る範囲内でなんとかなりそう

という感じだった。

そんなわけで、現実の問題を解決するには各担当者と調整してこうした妥協案を採用していくのが良いだろう、という感じに自分の中でなった。