こんにちは、OneStepです。

去る４月９日、正式にWindowsXPは１２年間の役目を終え、サポート終了となりました。
これに紐づいて、IE6・IE7のサポートも終了となっています。

またWIndowsXPの次のOSであるWindowsVistaではIE７が標準搭載されており、Windows7ではIE9が標準搭載となっています。
WindowsVistaは発売から７年以上が経過しており、サービスパックも２まで出ています。

さて現状のIEのバージョン別シェアを調査してみたところ、以下のようになっていることが分かりました。

こちらを見ていると、依然としてIE8が主導権を握っています。
しかしIE6,7は徐々に減ってきているのが分かりますね。

そこで今回はIE6.7を無視した場合にどのくらいCSS3を使用したコーディングが可能なのかを考えてみました。

——————————————-

わかりやすく一覧比較ができるのは以下のサイトです。
http://fmbip.com/litmus

■角丸（border-radius）

スマートフォンサイトなどではお馴染みで、使用される方も多いのではないでしょうか？
しかしIE８は対応していない状況ですね。

■影（box-shadow）

こちらもIE8は対応していないですね。

■グラデーション（gradient）

色や形の表現をしたい御三家その３、グラデーション。
こちらは何とIE8はおろか、IE9でもまだサポートされていない状況ですね。

ちなみにグラデーションに関しては、スマホ向けのブラウザでも少し前のバージョンではベンダープレフィックス（プレ実装のようなもの）の設定が必要でした。
Webkit系のレンダリングエンジンが最近のバージョンになり、ようやく正式対応したようですね。

——————————————-

さて上記のような状況でみなさんはどのように考えますか？
「IE8が使えないならまだまだ使えないじゃん！」
そう思う方も多いでしょう。

考え方を変えてみると、おもしろい対応をしているところが多数あります。

たとえばTwitter

IE8で見た場合とモダンブラウザで見た場合に、表示が違うことを皆さんはご存知ですか？

タイトルの部分をはじめ、さまざまな部分の角が丸いはずなのですが、IE8では綺麗な角になっています。
これはborder-radiusを利用して表示していることが分かりますね。

TwitterはIE8のサポートを既に切っており、多少正常に表示されないことを正式に公表しています。

Twitterの場合はさまざまな機能が要求されることもあり対応するブラウザを限っているのかも知れませんが、通常のコーディングの場合、上記のような「部分対応」が可能です。
IEなどはバージョンにより表示が変わることを前提としてコーディングを行うわけです。

もちろん対応するべきすべてのブラウザで等しく見えることが現場では絶対条件だという方がほとんどでしょう。
そうなると当然画像を使用する以外には方法はありえませんが…。

さいごに

部分対応の考え方を利用すればCSSを使える枠は広がります。
ここでは紹介していませんが、CSS３で提供されているアニメーションなどの機能も考えてみてもよいでしょう。