fixture.jp

いつの間にかYahoo UIが 2.3.0にバージョンアップしていて、CSSシリーズも今までで一番たくさんのアップデートが行われた模様。 その中で特に嬉しかったのがFonts CSSの以下のアップデート。

* Updated %-to-px conversion charted for increased accuracy
across browsers
* Move body line-height away from * wildcard selector. Now it is
part of the initial BODY rule set.
* Changed core lineheight from 1.22em to 1.231 (no units)
* Changed code,pre to not use font-property shorthand syntax
* Tweaked the sizing fix for monospace font size (pre,code…)
* Added “kbd,samp,tt” as new selectors for monospaced font stuff
* Added line-height:99% to keep monospaced font the right height

Yahoo! UI Library: Fonts CSS

色をオレンジにした2点が特に熱い！わけなんですが、内容としては「bodyのline-heigtにつけていた全称セレクタを取ったよ」、「基本line-heightを1.22emから1.231にして、単位（em）を取ったよ」ということ。以前「YUI Library CSS toolsがバージョンアップ」って記事で書いた不満点2点をやっと解消してくれました。Yahoo UI万歳！

なんか今までのReset、Fonts、Gridに加えてBaseっていうシリーズも追加されたようです。良く見ていないけど、これも便利そう。一回リセットを適用したあとに、マージンとフォント関係を統一させる感じかな？

ここ2年ぐらいで、Appleのサイトは積極的にCSSとかAJAXとか新しい技術を採り入れ始めていて、最近はCSS関連のイベントで「AppleサイトのCSSを解析する」みたいなスピーチをされた方もいるらしく、サイトの存在自体がおもしろくなってきたと思う。特に個人的にスゴイと思うのは、全体一発リニューアル！とかやらずに「少しづつ、かつ抜け目なく」新しい技術をサイトに注入して、まるで生物が進化するかのようなアップデートをしているところ。一発リニューアル！が難しい大企業系サイトとして、ここまで柔軟かつデザインドリブンな運営方法は学ぶべきところが大きいと思う。

とはいってもAppleではiPhone登場時、アップルジャパンでは新iMac登場時に、10年近く使い続けたタブデザインを新しくし、珍しく全ページに渡る更新を敢行。早速Firebugなんかで構造をチェックしていると、グローバルメニューの画像置換に、あまり見ないCSS指定を使っているのを発見。

基本的には、li要素の中にa要素、liをdisplay:inline; にして横並びにする方法なんだけど、内部のa要素に

#globalheader #globalnav li a {
    float: left;
    width: 117px;
    height: 0;
    padding-top: 38px;
    overflow: hidden;
}

みたいな指定をしてる。

まあ見てしまえば簡単だけど、なぜ今まで思いつかなかったんだろうと自戒。この手法は結構一般的なのかな？「height:0;」を思いつくかどうかが肝なんだな、きっと。。。

text-indentに大きなマイナス値を入れる方法だと、firefoxなどでクリック時にその大きさの点線が出現する（本当はa要素にoutline属性を使うか、onfocus=”this.blur();” と書けば消えるんだけど、横に2000pxとかずれてるのを想像するとなんか気持ち悪い）し、span要素などを入れ子にしてdisplay:none;する方法だとHTMLに視覚要素を一つ増やしてしまう。ということで、Apple様大変勉強になりました。

雑誌にも登場していたし、最近ブーム？のclearfixというCSSハック。clearfixっていうのは最初の人が考えた単なるクラス名なので変えてもいいんですが、肝心なのは中身。どういうものかというと、

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-table;}    /* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}  /* End hide from IE-mac */

みたいなハックだらけの長いCSSを書いて、フロートさせている要素のみを内包した要素に適用して、HTMLに一切変更を加えずclearと同様の効果を得るというもの。詳細はclearfixでGoogle検索すればいろいろわかります。

で、これと同じ効果は

overflow:hidden;

で再現できるので、僕はいつもこちらを使ってwrapperとか名前付けたdivの高さを確保しています。（Mac IEは検証すらせず無視しています）

clearfixはハックだらけな上に、要素にクラス名をひとつ増やさなきゃいけないので。。。一方、overflow:hidden;を使う場合、完全にMac IEとNetscape7の表示はあきらめなきゃいけないんですが、いまどきそんなものは無視！というスタンスの場合、おすすめです。というより、そういうスタンス自体がおすすめです。

さらに、overflow:hidden;は、モダンブラウザで要素A内にある要素Bのmargin-topが要素Aのmargin-topになってしまう表示（仕様？）や、IE6でdivがある一定以下の高さになってくれないときなどにも使えます。正しい使い方なのか不明ですが。。。　このへんの詳細についてはまたいつか書きたいと思ってます。