サイトデザイン刷新にあたって、このサイトをHTML5化し、更に一部にはCSS3も使用しました。
ただ、相変わらずブラウザ毎の仕様に起因する問題で苦労したので、ブラウザ間の差異を吸収するために使ったTipsをメモしておきます。
- html5.js
- 純粋にHTML5で記述されたこのサイトをIE7で表示してみると、HTML4時代にはなかった要素（nav等）を正しく認識してくれず、すごく残念なレイアウトになっていました。
このhtml5.jsは、それらの要素をHTML4の要素に変換することで、レイアウトの崩れを修正してくれるライブラリです。
しかも、やることはhead要素内に以下の記述を追加するのみ。<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> - CSSのfilterプロパティ
- このサイトの背景にかかっている影のエフェクトは、画像ではなくCSS3の「box-shadow」プロパティを使用しています。
ただ、このプロパティはsafariやfirefoxでしか使えず、IEでは使用できないのです。本当はjQueryか何かを使ってクロスブラウザの影を付けたかったのですが、やってみると影の位置がずれたりして結局うまく行きませんでした。
そこで、あまり綺麗ではないものの、一応影を付けることの出来るIEの独自拡張「filter」プロパティを使って影をつけました。具体的なCSSのソースコードはこんな感じ。
/* CSS3 */ -webkit-box-shadow: 0 0 20px #444; -moz-box-shadow: 0 0 20px #444; box-shadow: 0 0 20px #444; /* IE */ filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=10);
filterはbox-shadowに比べると圧倒的に汚いので、かなり色を薄めて、影の大きさも小さくして誤魔化してます（笑）。
このあと、IE6が透過PNGに対応していない問題に対してiepngfixを使って対応しようとしたんですが、なぜかうまく効いてくれなかったので、IE6対応はひとまず保留。
もうIE6は無視して良いのかなぁ？
