僕はあんまり携帯HTMLをいじらないけど、タイトルのような問題があるという話はよく聞く。

また、CSSにはスコープの概念がないので、TinyMCEなどのWYSIWYGエディタを使っていると、Wordなどから<style>タグを含む断片が貼付けられて、ページ全体のスタイルに影響を与えてしまう、などといったことが起こる。

こういった問題への対応策として、CSSのインライン化が有効に働きそうなので、調べてみた。 参考に挙げているが、Perl/PHP では、こういったライブラリが存在しているらしい。

我らが(?)Rubyはというと、(最近遊びでCSSParserを書いたので、なければ作ろうと思ってたけど)やっぱり存在していて、これが結構便利そう。

TamTam: Inline CSS

しかし、こんな名前で公開されても…。見ても気付かないよ…

インストール

$ sudo gem install tamtam

コードがドキュメント、とばかりに、主要な部分を読んでみた。 使い方を見てみよう。

使い方

TamTam.inline
  :css => '.a { background-color:red }',
  :body => "<div class='a'></div>"
#=> "<div class="a" style="background-color: red;"></div>"

素晴らしい。

また、:documentを使うことによって、HTML内の<style>タグの内容をそのまま使うこともできる。

TamTam.inline
  :document => "<style>.a { background-color:red }</style><div class='a'></div>"
#=> "<style>.a { background-color:red }</style><div class="a" style="background-color: red;"></div>"

スタイルを適用した後の余計なclass属性は、元から存在するclass名と衝突するかもしれない。 そんなあなたには、:prune_classes => trueというそれらしいオプションがあるのだが、 バグなのか何なのか、スタイルを適用する前にclassを全部取りさってしまうので(僕の)望む動きとは違うようだ。

TamTam.inline
  :document => "<style>.a { background-color:red }</style><div class='a'></div>",
  :prune_classes => true
#=> "<style>.a { background-color:red }</style><div></div>"
# 適用されてない!

携帯電話…

携帯電話用に使う場合、<link>タグを認識する部分を自分で書かないといけない。

それと、聞いた話では、携帯電話の場合は通信量を減らすために、style='background-color: …'よりも、bgcolor='…'が好まれるそうだ。

CSSだけでは属性を指定するという使い方は出来ないので、その場合も独自に拡張する必要がありそうではある。

参考:


<div class="entry">
  <h2><a href="" /></h2>
</div>

このような文書で、aのリンク先を訪れると、div.entryの色が変わるようにしたい。

XPathみたいに、こういう子要素を持つノード、という指定は、CSSではできないっぽいので、JavaScriptでやるのが穏便かと思いきや、

div.entry {
  position: relative;
}
 
div.entry > h2 > a:visited:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  background-color:gray;
}

でうまくいった。

iPhone向けなので、Safari限定で考えられるのがうれしいところ。

実際には背景色ではなくて、新たに生成されたノードをdiv.entryにぴったり張り付くようにしている。

で、この情報をJavaScriptから取れるとどのサイトにアクセスしたか、という情報が取れてしまうので色々対策されているらしいんですが… どうやって防ぐんだろう。