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

CSS

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

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

昨日は1.をやった。次の2.を考える前に、先に3.について考えた。


上書きするプロパティを決めたとして、そのプロパティは、埋め込むHTMLの全てのHTML要素のstyle属性に指定しないといけないのだろうか。昨日調べたように、上書きするプロパティは結構な数になりそうなので、全てのHTML要素のstyle属性に指定すると、埋め込むHTMLの長さがかなり長くなってしまう。

ちょっと調べてみたら、プロパティの継承を使えば良さそうなことが分かった。

Assigning property values, Cascading, and Inheritance(CSS2仕様書 日本語訳)

継承によって、あるHTML要素に指定されたプロパティ値は、その内側のHTML要素にも反映されます。したがってプロパティ値は、埋め込むHTMLの一番外側のHTML要素のstyle属性にのみ指定すれば良い。
ただし一部のプロパティ値は継承されないので、そういうプロパティは注意が必要。marginとかwidthとか、レイアウト系プロパティに継承しないものが多いみたい。まぁ、普通は内側のHTML要素に継承する必要はなさそうだしね。でも、埋め込むHTMLに<p>や<h1>があるときには、スタイルシートでレイアウト系のプロパティ値が指定されている可能性があるので、HTML要素ごとにプロパティ値を上書きしといた方が安全かも。

上書きするスタイルシートのプロパティ値を決めるときには、継承されるかどうかも意識して決めることにしよう。