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（１～３順不同）
2. font-variant（１～３順不同）
3. font-weight（１～３順不同）
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が適用されない！ことが分かりました。
結局は、指定順序の仕様どおり記述しないとダメなようです。