CSSで文字指定:あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか?
文字サイズをCSSで指定する方法についての質問です。
同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。
そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。
macintosh.css
windows.css
windowsIE.css
...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。
CSSファイルの中身は、
macintosh.css
.small { font-size: 10px; } /* 小さめ */
.middle { font-size: 12px; } /* 中くらい */
.large { font-size: 14px; } /* 大きめ */
windowsIE.css
.small { font-size: 0.8em; } /* 小さめ */
.middle { font-size: 0.9em; } /* 中くらい */
.large { font-size: 1em; } /* 大きめ */
...といった具合です。
このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、
全てのh2タグに <h2 class="middle"> と記述することになってしまいます。
これは煩雑なので一括指定したいと考えます。
すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。
macintosh.css
h2 { font-size: 12px; }
windowsIE.css
h2 { font-size: 0.9em; }
...のようなことです。
そうではなく、h2に .middle(=中くらい)で指定した文字サイズをそのまま受け継がせる方法はないでしょうか?
h2 { class="middle" }
変な書き方ですが、意図を汲み取っていただけるでしょうか。
このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。