IE9でCSS3はどこまで表現できるか?

こんにちわ。アラサーティー百田です。

先日、会社のPCでIE9のインストールに失敗したしましたので
自宅のWindows7に渋々インストールしてみました。

気になるのはCSS3をどれくらいサポートしているかということ。

CSS3で何ができるかかが一目で分かるサイト
CSS3 Click Chart by Impressive Webs
で実験してみました。

CSS3対応が優秀なブラウザGoogle Chrome との比較

左:InternetExplorer9  右:GoogleChrome

スタイル 補足 InternetExplorer9 GoogleChrome
Box Sizing 要素の幅、高さに余白やボーダーの値を含めるか
Border Radius 角丸にする
Text Shadow テキストに影をつける ×
Box Shadow ボックスに影をつける
Multiple Columns マルチカラム ×
RGBA Color RGBAによる指定
HSLA Colors HSLAによる指定
Multiple BG 一つのボックス要素に複数の背景画像を指定
Text Stroke 袋文字 ×
Linear Gradients 直線グラデーション
Radial Gradients 円形グラデーション ×
Reflections 鏡面効果 ×
Rotation 回転 ×
Scale 拡大縮小 ×
Transitions 移動 ×
Border Images ボーダーに画像 ×
Text Select Color テキスト選択時のカラー
Outline Offset アウトラインのオフセットを指定 ×
Resizing ボックスのリサイズ ×
Word Wrap 単語の途中で改行
Background Size ボックスに合わせて画像を拡大

うーん…Chromeと比べれば半分程度でしょうか。
「Linear Gradients」なんかはグラデーションの方向が逆になってます。

CSS3はまだ策定段階なのでIE用のベンダープリフィックス「-ms-」をつければ対応しているスタイルもあるかもしれませんが、「Text Shadow」ぐらいは対応して欲しいところです。

マイクロソフトの嫌がらせはまだまだ続く。

コメントを残す

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

twelve − 10 =