Yahoo! UI Library(YUI)のFonts CSSを分解してみた

• 2008年8月18日 13:01
• CSSWebサービス

Tweet

新規の仕事で、Yahoo! UI Library(YUI)のFonts CSSを利用しました。

YUI Font CSSとは、各種ブラウザで表示文字サイズの差異をなるべく少なくする目的で作られたCSSライブラリーです。

以前ある案件で、同じような構造のCSSを自分で作って使っていたのですが、興味があったので今回はこちらを利用することにしました。

• Yahoo! UI LibraryのFonts CSS
• fonts.css(2.5.2)

Yahoo! UI Library Fonts CSS(2.5.2)を分解

どんな処理をしているのかを理解せずに使うのは危険と思ったので、細かく解析してみました。Yahoo! UI Library Fonts CSS(2.5.2)は、下記の3つのパートから成り立っています。

body {
	font: 13px/1.231 arial,helvetica,clean,sans-serif; /* 基本文字設定 */
	*font-size: small; /* Win IE7およびWin IE6標準準拠モード向け */
	*font: x-small; /* Win IE 5-5.5､6(後方互換モード)向け */
}

table {
	font-size: inherit; /* モダンブラウザ向け */
	font: 100%; /* Win IE 5-5.5､6(後方互換モード)向け */
}

pre,code,kbd,samp,tt {
	font-family: monospace;
	*font-size: 108%; /* Win IE全般向け */
	line-height: 100%;
}

YUI Fonts CSS：bodyパート

bodyパートは下記の処理をしています。

font: 13px/1.231 arial,helvetica,clean,sans-serif;

モダンブラウザに適用。

Firefox、Safari、OperaやMac IE5に適応される。Mac IE5は、文字サイズがpxで指定してもあってもブラウザで変更できるため問題なし。

フォントサイズ13pxを基準にしているのは、単純に12pxだとサイズが小さいからなのか、調整するのに都合が良かったからではないかと思います。

「/1.231」はline-heightの指定です。line-heightに単位(em等)が付いていない理由は、こちらを参考にしてください。

*font-size: small;

Win IE7およびWin IE6標準準拠モードに適用。

「アスタリスクハック( * )」を使いWin IE全般に適応。Mac IE5には適応されない。次の行で上書きするので、これはWin IE7およびWin IE6標準準拠モードのみの処理になる。

セレクタのアスタリスクハックではないので、Safariには適応されない。

*font: x-small;

Win IE 5-5.5､6(後方互換モード)に適用。

「アスタリスクハック」+「値が足りないショートハンド」なので、Win IE 5-5.5､6(後方互換モード)に適用される。

「値が足りないショートハンド」だけだとMac IEにも適応さてしまうため、「アスタリスクハック」が追加されている。

YUI Fonts CSS：tableパート

tableパートは下記の処理をしています。

font-size: inherit;

モダンブラウザに適用

font: 100%;

IE 5-5.5､6(後方互換モード)、Mac IE5に適用。

「値が足りないショートハンド」なので、IE 5-5.5､6(後方互換モード)、Mac IE5に適用される。この処理は、IE 5-5.5､6(後方互換モード)の継承バグを回避するための処理。

tableパートでは、2つの方法で文字サイズの継承を行っていますが、Mac IEには継承に関するバグはありませんし、モダンブラウザも「font-size: inherit;」などとしなくても継承します。

それらを考えると、tableパートはIE 5-5.5､6(後方互換モード)の継承バグ回避だけを考え「font-size: 100%」だけあればいい気もしますが...、ここの処理はよく分かっていませんです。

YUI Fonts CSS：pre,code,kbd,samp,ttパート

*font-size: 108%;

Win IE全般に適応。

「アスタリスクハック( * )」を使いWin IE全般に適応。そのままだと「pre」や「code」の文字サイズが小さくなるので、文字サイズを一回り大きくしています。

Yahoo! UI Library Fonts CSS　まとめ

全体を詳しく見ることで、大体なにをやっているかは分かったのですが、tableパートだけはよく分かりませんでした。天下のYahoo!が作ったCSSですので、全くの無意味ということはありえないと思いますが...、うーん。

時間が空いたときにでも、また追求してみます。

08/8/19　追記

YUI Fonts CSSのバージョン3 PR1がリリースされたようですね。

• YUI 3.x Preview Release 1
• yui_3.0.0pr1.zip

Tweet