絶品ゆどうふのタレ

ふと気づいたことを綴るだけのメモ

勘違いのないようにtoInlineCSSDoCoMoの仕様について言っとくか


ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」 | ke-tai.org - インフィニットループ

手前味噌リンクわっしょい。ke-tai.orgさんには感謝リンク。


toInlineCSSDoCoMoの仕様なんですが、はてブとかで「外部参照をインライン化」だと思ってる人とかがいるみたいなので言っとくと、外部参照だけじゃなくて内部参照のsytleタグもよしなにパースしてくれます。
外部参照やstyleタグ指定が複数あってもそれらを全てsytle要素に突っ込んでくれるので、定義が多段になってる状態でもきちんとできます。sytle要素が個別に定義してあるタグでも、ちゃんとマージします。
無論、class指定が複数記述してあっても、*1全部適用します。


また、パースし終わった外部参照・内部参照のlinkタグ・styleタグは除去されるので、通常ブラウザベースで開発を行っていても、ざっくりとしたデザインの確認に支障が出ることはありません*2。(除去されないと、専用エミュレータか実機での確認が必要)*3

あと子孫セレクタとかその辺は、結構ちゃんとやってくれます。ただ、ブログにも書いたとおり疑似クラスはa:link,・・・の4つしか対応してません。
一応、それらの疑似クラスは全部内部参照としてCDATAつけてstyleタグに突っ込むようになっています。*4
それ以外はDoCoMoではどのみち無効ということもあって無視しています。
このあたりは、携帯のCSSだし、元々あんまり使ってる人いないようなので、ひとまずざっくり仕様で。


大体そんな感じです。
あのブログ内に説明を全部書くにはちょっと僕の頭が悪すぎるのと幅が細すぎるので、こっちで捕捉しときました。

*1:class="hogehoge hugahuga"みたいな

*2:とは言っても、最終的に実機での確認が必要なのは当然のことですが。

*3:この辺のアイデアid:maru_ccさんの助言。豊富な経験からくる助言はとても助かります。

*4:それ以外のも全部突っ込むようにしてもいいんですけど、無駄なのを残してByte数増やすのも気が引けるので。