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" }

変な書き方ですが、意図を汲み取っていただけるでしょうか。
このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。

回答No.2

koutarou504 · ベストアンサー

たぶん望んでいる機能は CSS には存在しませんので
次善の策を探しましょう・・・。

で、#1 の方の提示されている様にグループ化で対処が一番ましな省力化ではないかと・・・。
ただ、テキストエディタで文字列一括変換すれば
個々の h2 に属性 class="middle" を追記するのも
全てのCSSファイルの「.middle {」を「.middle, h2 {」と更新するのも
手間は同じですが・・・・・。
（複数のファイルを一括処理できるテキストエディタが必要ですがぁ。）

尚、CSS を用いる姿勢からくる意味的な事を考えるなら、
macintosh.css
h2 { font-size: 12px; }

windowsIE.css
h2 { font-size: 0.9em; }
の追記が望ましいです。

後は　継承という一番の希望が無理という事から、
どれだけ妥協するかの問題です・・・。
どうせ手間がかかるなら、意味的により適切な方を望むか、やはり少しでも手間を省きたいか・・・・・。

お礼

結論から言って無理なのですね。それが分かっただけでもスッキリしました。ありがとうございました。
振り分けCSSが長大になりそうですが、そちらで指定しようと思います。

回答No.3

NTJ

たぶん、一番確実な解決策は、CSSの出力をCGI化してしまう手法ではないでしょうか？
業務用システムであればDB程度は多分、使っていると思いますので、そこらで管理すれば結構簡単なのではないかと思います。

ちなみにCSSでもJavaScriptでも、拡張子には全く影響されません。
windows.css でも windows.cgi でも windows.php でも、全く問題なくスタイルシートとして読み込んでくれます。

既存の macintosh.css windows.css windowsIE.css 等を読み込んで、専用のCSSを出力するPGを作るのが簡単かもしれません。

他のやり方としてXMLHttpRequestで各cssファイルを読み込んで、JavaScriptでStyle定義してしまうという手法も有りそうです。
サーバーに負荷を掛けない分、こちらの方が有用かもしれませんね。

お礼

回答ありがとうございます。
プログラミングのような『一歩すすんだ』やり方であればOKということですね。残念ながら私のスキルでは手に負えない状態ですので、簡便な方法で考えることにいたします。

回答No.1

BLUEPIXY

.middle, h2 { font-size: 12px; }

のようにカンマで区切るとか

お礼

回答ありがとうございました。
h2固有の属性（太字・色など）を指定し、かつ、文字サイズを一元管理出来れば…という発想だったのですが、どうやら無理なようですね。