話題のWindows 8で搭載されてるIE10はプレフィックスのないCSS3グラデーションが使えるってさ

  • あとで読みたい人は…

こんにちは、@cappeeです。

話題のWindows 8がでてウルトラモバイルPCを買おうか迷ってます。

とりあえず電気屋さんに行って触ってこよう。

そんなWindows 8に搭載されているIE10ですが、やっとこIEもCSS3に対応してきて嬉しいなぁなんて思ってたらやっぱり一癖あるのですね。

CSS3グラデーションの記述方法で変更があったのは2点。

プレフィックスなしでの記述

今までは -ms- というプレフィックスを記述してIEでもCSS3のグラデーションが表示されるようにしてきたわけですが、IE10からプレフィックスのない形式でサポートされるそう。

でも、2011 年2 月の W3C 草案にあるプレフィックスありの記述もサポートしているみたいなので一応従来通り記述していれば問題無さそう。

top/bottom/left/right といったキーワードの変更

これが厄介になりそうですね。

2011年7月まではキーワードだと(top, #FFF, #CCC) 、角度だと(-90deg,#FFF, #CCC) と書いてました。

ただし、それ以降では to キーワード が追加されて、top→to bottom、left →to rightに変更になります。

そこで問題なのが話題のWindows 8で搭載されてるIE10はtoキーワードありのみに対応していること。

かつ、 -ms- のプレフィックスも無視します。

なにっ

また、Operaの新バージョン12.50でもIE10同様プレフィックスなしのtoキーワードのみ対応するそうな。

新しいCSS3グラデーションの書き方

こういうことで合ってますかね?

background: #CCC; /* CSS3グラデーション未対応ブラウザ用 */
background: -webkit-linear-gradient(top, #FFF, #CCC); /* webkit用 */
background: -moz-linear-gradient(top, #FFF, #CCC); /* mozila(Firefox)用 */
background: -o-linear-gradient(top, #FFF, #CCC);  /* 旧opera用 */
background: -ms-linear-gradient(top, #FFF, #CCC);  /* IE9用 */
background: linear-gradient(to bottom, #FFF, #CCC);  /* IE10とOpera12.50用 */

ご指摘お待ちしております。

さらにIE10からコンディショナルコメントを廃止

コンディショナルコメントとは、

<!-[if lt IE 6.0]> IE6用のCSS <![endif]->

のように記述するとIEの特定のバージョンに限定してCSSを読みこませるというもの。

上記の -ms- プレフィックスを削除してIE9用のコンディショナルコメントを用意してもいいということですね。

でもIE10からは使えないということで、標準規約に準拠してまっせという意気込みを感じます。

逆にIEは遅れを取り戻さないとコンディショナルコメントを廃止したことでまたIT界隈の辛口コメントが増えそうですねぇ。

 

今回参考にさせていただいた記事にもっと詳しく掲載されているのでぜひご覧ください。

Pocket
article clipper 話題のWindows 8で搭載されてるIE10はプレフィックスのないCSS3グラデーションが使えるってさ

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>