最近個人の方のブログなどでも、HTML5とCSS3についての記事を見かける機会が非常に増えてきた気がする。そろそろちゃんと検証を含めて勉強せねばと思い、CSS3から少しずつ手を動かして新しい自分のブログの準備をしている昨今。
CSS3も新しいプロパティと新しいセレクタに分かれるが、順番としてはプロパティから覚えてゆくのが普通だろうか。
CSS3の主要なプロパティとブラウザの実装に関してはASCII.jp、海外ではCSS3 Click Chart by Impressive Websやcss3please.comが、非常にわかりやすくまとめられており、各々のプロパティに関するものも検索すればわらわらと出てくる。
が、しかし、CSS3に手をかけるとすぐに直面するのが、最大シェアを誇るIEが最新のバージョン8であっても全く持ってCSS3に対応していないという事実。いやはやマイクロソフトさん・・・である。次世代IE9で対応予定とは言え、企業サイトなどでは積極的に利用できないのが現状だろうか。
FirefoxやSafari・Chromeのモダンブラウザと、IEとでは見た目が違うのはしょうがないと割り切ってCSS3を使うか、IE専用のCSSや背景画像などを利用して出来るだけIEでも同じように表示させるか。
個人的には、代替手段を用意する手間もかなり大きく感じてしまう。
IE対策のできるCSS3グラデーションだが・・・
ボックスの背景色にグラデーションを指定できるCSS3の「gradient」だが、Firefoxでは「-moz-linear-gradient」、Safari・Chromeでは「-webkit-gradient」で指定する。
このプロパティのIEでの代替手段としてよく紹介されているものが、IE独自拡張の「filter」を用いる方法。
IE6・7とIE8では指定方法が変わり、Firefox・Safari用と合わせて以下のように記載。
#hoge {
/* Firefox */
background: -moz-linear-gradient(top, #333, #000);
/* Safari・Chrome */
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
/* IE6・7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#000000');
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#000000')";
}
モダンブラウザ向けは、指定位置からの色の変化や横グラデーションなど工夫によって便利に使えそうだが、IEのfilterでそれらの指定は不可。
また、IEの色コード指定は#333 では正しく認識されないようなので6桁で記載。
が、しかし。またもや、が、しかし。結論から言うと、このIE用のフィルターは非常に使いづらい。
以下のIE8での表示キャプチャを参照いただきたいのだが、IE用のfilterを使用した要素で、メイリオのアンチエイリアスが無効化されて非常に読みづらくなっている（クリックで拡大表示）。
自分の環境でしか確認していないので、必ずなるのか一定の条件下でアンチエイリアスが無効化されてしまうのかは未確認。IEで表示時のみの不具合であり、filterを指定してあってもFirefoxなどでの閲覧では問題は出ない。
メイリオ以外のMS Pゴシックなどを使っている場合やアンチエイリアスの無い英語環境のサイト、テキストの含有されない要素への指定ならいいのだろうが、私はメインフォントをメイリオに完全移行してしまっているのでこれは大問題。
これでは実用にならないので、今のところfilterでの指定はせずIE用のCSSを用意して背景画像で代用している。
IE9はHTML5とCSS3対応と言うけれど
次世代IE9のうたい文句はHTML5とCSS3への対応ではあるけれど、IE9はXP非対応とのこと。XPのシェアは現在でも非常に高く、PCが普通に動いているのに買い替える必要はないというXPユーザーも多いのではないだろうか。
爆発的にPCの普及を果たした立役者であるWindows XPが、今後のHTML5とCSS3の大きな足かせになるのではないかと心配に思う。
ふと、このブログこそ訪問者の方のモダンブラウザ比率が高いのだから、CSS3の遊び場にはちょうどいいと今更気付いた・・・。
エントリー後に気付いたことの追記 2010.5.21
上記filterの指定をしてもIE6と7で上手くグラデーションがかからない場合は、いわゆるhasLayoutの問題のようです。
グラデーションの指定をした要素に、幅を指定するなどで問題が解消します。hasLayoutについてと回避方法はコリスさんのサイトで詳しく解説されています。
また、IEで親要素にグラデーションがかかっていると、全ての子孫要素でフォントのアンチエイリアスが無効化されてしまうようです。filterを使って、bodyや最上位のwrapなどの背景にグラデーションを掛けるという使い方も問題が発生してしまいます。
現在、CSS3を使ったIEほぼ無視？のブログを作っていますので、完成した際にCSS3のエントリーができる・・・かな。