↓↓↓↓↓↓↓↓2009.2.6 19:45 追記↓↓↓↓↓↓↓↓

IE8b2からいくつかのIEに関連するハックが使えなくなりました。

そのため、いくつかの項目を修正しました(修正した項目に※を付けました)。

ただし、IETester(IE8b2)で確認しただけなので、現在のRC版でも適応される保障はありません。あくまで暫定的なものと思ってください。IE8製品版で機能することを確認しました。

なお、Operaは古いバージョンに対応する意味はあまり無いと判断し、一つにまとめました。

Firefox用は4つありましたが、一つを残して他は削除しました。

CSSハックはあまり良いやり方であるとはいえません。無闇に使わず、必要最小限に留めましょう。使わずに済むならそれに越したことはありません。

↑↑↑↑↑↑↑↑2009.2.6 19:45 追記↑↑↑↑↑↑↑↑

• IE6に適応
• IE7に適応※
• IE8に適応※
• IE6、7に適応※
• IE7、8に適応※
• IE6、7、8に適応※
• IE6以外に適応
• IE6、7以外に適応※
• IE6、7、8以外に適応※
• Opera9.27以下に適応
• Opera9.5bに適応
• Opera(9.6以降)に適応※
• Firefoxに適応※
• Safariに適応

☆ = 該当ブラウザに適応させるスタイル

★ = 該当ブラウザ以外に適応させるスタイル

IE6に適応

SELECTOR { ★ }
* html SELECTOR { ☆ }

IE7に適応　※2009.2.6変更

SELECTOR { ★ }
*:first-child+html SELECTOR { ☆ }

IE8に適応　※2009.2.6変更

SELECTOR { ★ }
head~/* */body SELECTOR { ☆ }
html:not(:target) SELECTOR { ★ }

IE6、7に適応　※2009.2.6変更

SELECTOR { ★ }
* html SELECTOR { ☆
*:first-child+html SELECTOR { ☆ }

IE7、8に適応　※2009.2.6変更

SELECTOR { ★ }
*:first-child+html SELECTOR { ☆ }
head~/* */body SELECTOR { ☆ }
html:not(:target) SELECTOR { ★ }

IE6、7、8に適応　※2009.2.6変更

SELECTOR { ★ }
* html SELECTOR { ☆ }
*:first-child+html SELECTOR { ☆ }
head~/* */body SELECTOR { ☆ }
html:not(:target) SELECTOR { ★ }

IE6以外に適応

SELECTOR { ★ }
html>body SELECTOR { ☆ }

IE6、7以外に適応　※2009.2.6変更

SELECTOR { ★ }
head~/* */body SELECTOR { ☆ }

IE6、7、8以外に適応　※2009.2.6変更

SELECTOR { ★ }
html:not(:target) SELECTOR { ☆ }

SELECTOR { ★ }
html:first-child SELECTOR { ☆ }

SELECTOR { ★ }
body:last-child SELECTOR { ☆ }
html:not([lang*=""]) SELECTOR { ★ }
html:not(:only-child:only-child) SELECTOR { ★ }

Opera(9.6以降)に適応　※2009.2.6変更

SELECTOR { ★ }
body:last-child SELECTOR { ☆ }
html:not([lang*=""]) SELECTOR { ★
html:not(:only-child:only-child) SELECTOR { ★ }

Firefoxに適応　※2009.2.6変更

SELECTOR { ★ }
html:not([lang*=""]) SELECTOR { ☆ }

Safariに適応

SELECTOR { ★ }
html:not(:only-child:only-child) SELECTOR { ☆ }

or

SELECTOR { ★ }
body:last-child:not(:root:root) SELECTOR { ☆ }

テストしたブラウザ

• Windows
  • Firefox3
  • Opera9.6
  • IE6、7、8(RC1)
  • Safari3.2
• Mac
  • Safari3.1

組み立てられる名刺。ミニカーのペーパークラフトになっています。

袋状になっていて、開けると中から植物の種が出てきます。素敵ですね。

風船名刺。そのままだと分からないけど、膨らますと読めます。

食べられる名刺。食べちゃったら名刺の意味が…ｗ

ポップアップカード風。こんな名刺を頂いたら、気持ちがほんわかしそうです。

絵葉書風。

栓抜きになっている実用的名刺。デザインとしてもかわいいです。

歯医者さんの名刺ということで、歯形がついています。

結婚相談所の名刺。「二人の関係修復します」といったところでしょうか。

USBメモリになっている名刺。効果はバツグンでしょうけど、ものすごくコストがかかりますねｗ

• 42 Awesome Business Card Designs (With Links to 100s More)

あんまり変わったものは煙たがられそうですが、こういう遊び心は持っていたいものです。

私自身はこれまで「760pxこそが正義！(それかリキッド)」なんて思っていたのですが、調べてみて、そろそろ950pxくらいを視野に入れても良いのかなと思うようにもなりました。

とはいえ、実際ユーザーがどのくらいのサイズで閲覧しているのかを知り、検証しなければならないでしょう。

しかし、Google Analyticsなどでは、ユーザーの画面解像度までしか分かりません。

そこで役に立つのがこのサービス。

BROWSIZE.ORG

登録してJavascriptコードを解析したいページに貼り付ければ、こんな感じでそのページにアクセスした人のブラウザサイズ(サイドバー等を除いた実際にページがレンダリングされるエリアのサイズ)の統計が取れます。

さらに、解析するサイトの現在の横幅を入力しておけば、

こんな風に

• 何％の人が快適に閲覧しているのか。
• 何％の人が横スクロールバーが表示されているのか。
• 何％の人に対しては横幅を50px広げても大丈夫か。
• 何％の人に対しては横幅を100px広げても大丈夫か。
• 50px横幅を縮めるとさらに何％の人が快適に閲覧できるようになるのか。
• 100px横幅を縮めるとさらに何％の人が快適に閲覧できるようになるのか。

といったことが表示されるので、リニューアル時の参考になります。

早速自分のブログを表示確認してみましたが、特に問題はないようです。

ただ、Mac版とのレンダリングの違いがあるのか気になるところです。(FireFoxはWinとMacで違うようですし)

これで、WinとMacでレンダリングに違いないことが確定すれば、もうMacは買わなくてすむんですがね。(MacIEはもういいです；)

※この記事のデータは古くなっています。最新版はこちらを参照して下さい。→逆引きCSSハック(IE8b、Opera9.5bも含めたブラウザ別CSSハック)

方々でまとめられているので今更感がありますが、どうも「*+html」のハックがOpera9に適応されないようなので、個人的にまとめなおすことにしました。

ちなみにNetscapeは無視しています。

IE6のみに適用

* html div { }

IE7のみに適用

*+html div { }

IE6以外のモダンブラウザに適用

html>body div { }

IE6、7以外のモダンブラウザに適用

html>/**/body div { }

OperaとSafariに適用

html:first-child div {  }

Safariのみに適用

div { Safari以外のスタイル }
html*div { Safariのスタイル }
* html div { Safari以外のスタイル } 

Operaのみに適用

div { Opera以外のスタイル }
html:first-child div { Operaのスタイル }
html*div { Opera以外のスタイル }

Firefoxのみに適用

div { Firefox以外のスタイル }
html>/**/body div { Firefoxのスタイル }
html:first-child div { Firefox以外のスタイル }

問題はないはず。どこか間違っていたら教えて下さい。

参考サイト

モダンブラウザ向けCSSハック：ウェブネタブログ

IE7のCSSバグとOpera CSS Hack | F+R (FplusR)

CodeWeb: ブラウザ別CSSハック一覧表

CSSハック | BLOG × WORLD ENDING