3キャリア対応のCSS変換モジュールHTML::MobileJpCSS
DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。
http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/
3キャリア間での変換の必要性
DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。
DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。
例えば小さいフォントを表示したい時は、
DoCoMo --- font-size:xx-small EZweb --- font-size:10px Softbank --- font-size:small
と属性の値が異なります。
hrタグに色をしていしたいときなどは、
DoCoMo --- <hr style="border-color:#FF0000;" /> EZweb --- <hr style="color:#FF0000;" /> Softbank --- <hr style="border-color:#FF0000;" />
とタグにより属性名が異なります。
このような差異を吸収して1つのテンプレート、共通のCSSファイルでケータイサイトが作成ができればなといった感じです。
使い方
メソッド
基本的にHTML::DoCoMoCSSを参照させていただきました。
(中身はパフォーマンスの都合上正規表現でごりっと置換しています)
CSS
EZwebのCSSを基本ファイルとしHTTP::MobileAgentにてキャリア判別を行い、DoCoMo,Softbankならインライン化&変換、EZwebならデフォルトでは何もしないという仕様になっています。
istyle
DoCoMoならistyleの変換も行います
istyle="1" => style="-wap-input-format:"*<ja:h>&;" istyle="2" => style="-wap-input-format:"*<ja:hk>"" istyle="3" => style="-wap-input-format:"*<ja:en>"" istyle="4" => style="-wap-input-format:"*<ja:n>""
変換ルール
デフォルトで適用される変換については、共通のCSSファイルにEZwebの記法で記述したものを以下のルールで変換します。
- プロパティの変換
| タグ | プロパティ | DoCoMo | Softbank |
|---|---|---|---|
| hr | text-align | float | float |
| hr | color | border-color | border-color |
- プロパティと値の変換
| タグ | プロパティ:値 | DoCoMo | Softbank |
|---|---|---|---|
| div | font-size:10px | font-size:xx-small | font-size:small |
| div | font-size:16px | font-size:xx-large | font-size:xx-large |
| span | font-size:10px | font-size:xx-small | font-size:small |
| span | font-size:16px | font-size:xx-large | font-size:xx-large |
| img | text-align:left | float:left | float:left |
| img | text-align:right | float:right | float:right |
| img | text-align:center | float:none | float:none |
