去る2007年3月10日に開催された CSS Nite in Nagoya 2007 にて「極力ハックしない CSS」というテーマのプレゼンをさせていただきました。 その時の動画をプレゼン資料と連動してお届けします。
免責事項:本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
IEが子セレクタに対応していないというのを利用したテクニックです。 一番最初に覚えるべきハックとも言えるほど、便利なハック。 やり方 div#g_navi ul { margin-left:-5px; width:600px; } /*IE以外に...*/ div#g_navi > ul { margin-left:0; } ↑こんな感じで、IE用の値を書いた後に、IE以外用の値を子セレクタを使って書きます。 上記のサンプルでは、「floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。」バグ対策として使ってます。 アンダースコアハックと逆ですが、アンダースコアハックはCSSの書式的にはダメなので、W3C CSS ValidatorでErrorになります。 子セレクタは、IE6が対応してないってい
beta2くらいから出てたIE7用のハックですが、正式版でも修正が入っていなかったようです。 あまり頼りたくはありませんが、IE7のバグはこれからどんどん出てきそうなんで覚えておいた方が良さそうですね。 *:first-child+html *+html body 調べが甘かったので、追記。(12/6) 上記のハックはOpera 8.0 以降にも適用されてしまうので、注意が必要です。 対応する為には、前述の *+html body でIE7用のハックを指定した後に、 *+html>/**/body でOpera8.0以降用のハックで上書きしてあげる必要があります。 コレでも面倒ですねぇ~ 極力使う場面は抑えたいものです。 さらに追記(07/07/17) 大丈夫っぽいハックに変更した
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ(Safari、Opera、Firefox) ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く