2010/02/06

CSS:: fontプロパティをまとめて記述したが・・・

以前開発したWebサイトのCSSを見直しました。

ん~なんでこんなにヘタレな記述をするのかな・・・と自分に怒りを感じつつ、ちゃくちゃくと直しを。

その際、fontプロパティをまとめて記述したんですが、Firefox3.6で記述する順番によってパースエラーがでるようです。

★パースエラーした記述サンプル
 font:bold 20px;

★回避サンプル
 font:20px bold;
 or

 font:bold 20px font-family;

Firefox3.6のバグなのかわかりませんが、上記内容でパースエラーを回避しました。

で、いつもならここで終わるんですが、何か仕様があるのではないかと調べてみました。

fontプロパティの指定順序に仕様があることを発見。
  1. font-style(1~3順不同)
  2. font-variant(1~3順不同)
  3. font-weight(1~3順不同)
  4. font-size(必須)
  5. line-height(font-sizeとの間を/で区切る)
  6. font-family(必須)
指定順序の仕様を見ると、回避サンプルの後者が正しい記述になりますね。

fontプロパティを多様するぜ!と粋がるぐらいなら、各fontプロパティを記述した方が安全かもしれませんね。

でも、ファイルサイズを少しでも小さくしたい!という方は上記仕様を覚えた方がいいかも。
※知ってる方はそのままスルーで!

DOCTYPE宣言でstricetを指定するならなおさら・・・ま、私はtransitionalを使い続けてます&使い続けますけどね。

2010.2.8 Update!!
回避サンプルにfont:20px bold;を書きましたが、
Firefoxでパースエラーが出なくなるが、CSSが適用されない!ことが分かりました。
結局は、指定順序の仕様どおり記述しないとダメなようです。
スポンサーリンク

スポンサーリンク