WindowsXP終了によりコーディングはどう変わる?

こんにちは、OneStepです。

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

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

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

データソース:NetMarketShare、画像出典元:GIGAZINE

データソース:NetMarketShare、画像出典元:GIGAZINE

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

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

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

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

■角丸(border-radius)

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

■影(box-shadow)

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

■グラデーション(gradient)

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

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

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

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

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

たとえばTwitter

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

モダンブラウザ

モダンブラウザ

IE8
IE8

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

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

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

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

さいごに

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)