2011年2月8日火曜日

YUI2と YUI3の CSSの比較

ついにGoogle Libraries APIがYUI3系の配信を開始した。
YUI 2 CSS ToolsからYUI 3 CSS Resourcesへ乗り換えるための準備として、変更されている点を洗いだしてみた。
(追記:比較したのは、YUI 2.8.2r1と YUI 3.3.0。)


fonts.css

変更なし


grids.css

根本的に変わったので、小手先の変更による対応は無理。
ただしclass名のプリフィクスも変わった(2はyui、3はyui3)ので、2と3は共存できる。


reset.css

buttonのmargin、paddingのリセットがなくなった。

button {
    margin: 0;
    padding: 0;
}



削除

delとinsのtext-decorationのリセットがなくなった。
del, ins {
    text-decoration: none;
}


削除

supとsubのvertical-alignが変わった。
sup {
    vertical-align: baseline;
    ↓
    vertical-align:text-top;
}
sub {
    vertical-align: baseline;
    ↓
    vertical-align:text-bottom;
}

button、optgroup、optionのfontのinheritがなくなった。
また、input、textare、selectのfont-styleのinheritがなくなった。
input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
button {
    *font-size: 100%; /* IEでリサイズ可能にするためだったらしい */
}



input, textarea, select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}

base.css

bodyのmarginが削除された。(余計なお世話だったので朗報だ。)
body {
    margin:10px;
}



削除

optgroup、del、sup、subのリセットされていたstyleの上書きが削除された。
reset.cssの方から削除されたので、baseで上書きする必要がなくなったらからだろう。
optgroup {
    font-weight:normal;
}
del {
    text-decoration: line-through;
}
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}



削除

クリック系のform要素の1pxのpadding(Opera対策らしい)が削除された。
button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"] {
    padding:1px;
}



削除

テキストボックス系のwidthが追加された。
これでテキストボックスのフォントをメイリオにしたときビヨーンと広がる問題が解消される。
input[type=text], input[type=password], textarea{
    width: 12.25em;
    *width: 11.9em;
}


こうして見ると、grids.css以外は大きな変更は少ないようだ。
del, ins, sup, subなんかはあまり使っていないだろうし。buttonが好きな人には影響あるのかな?
base.cssでbodyのmarginがなくなったのは影響があるかもしれないが、これもそのまま使っているサイトは少ないと思う。


(2011/2/9 追記)
base.cssのinput[type=text]とinput[type=password]の追加は影響する場合あり。属性セレクタより弱いセレクタで横幅を指定しているページでは、このbase.cssのスタイルに負けちゃうように変わっちゃうから。

0 件のコメント:

ブログ アーカイブ

tags