スタイルシートつきHTMLに、他のHTMLを埋め込むにはどうすれば良いのだろう(その3)

スタイルシートつきHTMLに、他のHTMLを埋め込むにはどうすれば良いのだろう - NAT’s Programming Champloo
続きです。

  1. 上書きするスタイルシートのプロパティの候補を決める
  2. 埋め込むHTMLのスタイルシートを考慮して、上書きするスタイルシートのプロパティ値を決める
  3. 埋め込むHTMLに 2.を反映したHTMLを作る
  4. 埋め込むHTMLから 3. のHTMLを作る手順を考える
  5. 4.の手順をユーザースクリプトで実装する

今日は 2. をやった。
まず、埋め込むHTMLの一番外側のHTML要素で上書きするプロパティ値を決めた。基本的に、スタイルシートで指定される可能性のあるフォント系、テキスト系、レイアウト系のプロパティは全て上書き。ただし、継承されないプロパティは除いた。
HTMLのstyle属性で書くと、以下の通り。

<div style="font-family:arial,sans-serif;font-style:normal;font-weight:normal;font-size:medium;font-variant:normal;
word-spacing:normal;letter-spacing:normal;text-decoration:none;vertical-align:baseline;text-transform:none;
text-align:left;text-indent:0;line-height:normal;white-space:normal;border-collapse:separate">

次に埋め込むHTMLの中のHTML要素で上書きするプロパティ値を決めた。基本的に、継承されないプロパティは上書き。

<p style="text-decoration:none;vertical-align:baseline;margin:0;padding:0;padding-left:0;padding-right:0;border:0;
float:none;clear:none">

上記は<p>の場合だが、HTML要素によって少しプロパティ値を変えている。<div>の場合はテキスト系のプロパティは設定せず、<a>の場合は"text-decoration:underline"にしている。

で、実際にプロパティ値を上書きしたHTMLを作って実験してみたが、これだけではうまくいかない場合があった。
埋め込む先のHTMLのスタイルシートで直接<p>のプロパティ値を指定している場合、埋め込むHTMLの一番外側でプロパティを上書きしていても、スタイルシートのプロパティ値が優先されてしまう。
<p>に対しては、個別に上書きするプロパティ値を指定した方が良さそうだ。