HTML5 勉強会@福岡 - 第16回

IEでCSS3使いたくて困ってます

赤瀬　剛

Introduction

赤瀬　剛 (@akase244)

グルービーモバイル株式会社

エンジニア

ケータイ・スマホ向けのCMS作ってます

PHP、JavaScript、MySQLとか

サーバーもちょっといじる

結論

IEでCSS3なんて、

そんな夢のような話は

諦めましょうよ、ね。

最近、「レスポンシブWebデザイン」とか、

「プログレッシブエンハンスメント」とか、

耳にすることも多いでしょうが、

まだまだ「クロスブラウザ」という「現実」を

突きつけられているコーダーさんやデザイナーさんも

いらっしゃる事でしょう。

なので、気を取り直して、ちょっと紹介していきましょう。

おさらい

IEで何が困るかって、IE9未満はCSS3に対応してないからです。

IE9はWindows Vista、Windows 7以上じゃないとインストールできないので、なかなかシェアが増えないのが実情。

では、IE9未満はまったくNGかというと、そうでもありません。

まぁでも、IE9も完全にCSS3をサポートしてるワケじゃないけどね。

http://www.impressivewebs.com/css3-support-ie9/

IE9未満で実現可能なCSS3っぽいこと

魔法の指定「filter(IE6,7)/-ms-filter(IE8)」を利用することで、CSS3っぽいことができます。

・opacity(透明度)

　-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

・rgba(カラーモデル)

　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";

・box-shadow(ボックスシャドウ)

　-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3,enabled=true)";

・text-shadow(テキストシャドウ)

　-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#0000ff,offx=1,offy=1)";

・2D Transform(回転)

　-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";

・gradient(グラデーション)

　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";

・Multiple Backgrounds(背景画像の複数指定)

　background: transparent url(bg1.png)\9; /* IE8 */

　-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg2.png', sizingMethod='crop')";

なんだ、意外と色々できるじゃん。

と思うんですが、今回ボクが仕事でどうしてもやりたかったのは、

角丸

そう、角丸です。

角丸と言えば、コーダー／デザイナー泣かせですよね。

これまでのセオリーと言えば、角丸画像を準備して、涙ぐましいピクセル調整。

それが、モダンブラウザでは、以下の通りです。

-moz-border-radius: 1em;

-webkit-border-radius: 1em;

-o-border-radius: 1em;

-border-radius: 1em;

あー、簡単！

ベンダープレフィックスに文句言う人もいるけど、ブラウザのネイティブ実装ってやっぱり素晴らしい！

諦めてはそこで試合終了です。IE9未満でも解決方法はいくつかあります。

・border-radius.js(Apache License)

　IE8に未対応です。試合終了です。

　http://www.html5.jp/library/border-radius.html

・jQuery Corner(GPL Licenses)

　角の部分がうまく透過しないです。試合終了です。

　http://www.malsup.com/jquery/corner/

・CSS3 PIE(PIE.htc)(Apache LicenseとGPL2 Licenseのデュアルライセンス)

　「.htaccess」に追記が必要。

　背景色とネストの深いHTML構造との相性が悪い。試合終了です。

・curved-corner(border-radius.htc)(GPL3 License)

　CSS3 PIEとよく似た実装。

　コンテンツ内に大量の角丸を表示するとJSエラーが頻発。試合終了です。

　http://code.google.com/p/curved-corner/

・uuAltCSS.js(MIT License)

　JSエラーが頻発して使い物になりません。試合終了です。

・CurvyCorners(LGPL License)

　多分、最強の角丸ライブラリ。CSS内の「border-radius」を認識して、

　角丸にしてくれる優れもの。

　しかし、これも背景色とネストの深いHTML構造との相性が悪い。試合終了です。

　http://www.curvycorners.net/

・selectivizr.js(MIT license)

　CurvyCornersと同じ考え方のライブラリ。ごめんなさい試してないです。

　もしかして使えるヤツかも？？？

　http://selectivizr.com/

結局

調査段階でうまくいく方法は無かった訳ですが、説明したようにHTMLのタグ構造が浅ければキレイに表示されるライブラリもあります。

諦めずに、使えるライブラリの選定をすることを、ぜひオススメします。

諦めたらそこで試合終了ですからね。

で、最後にチョットだけ告知。

もう一つ告知。

Fukuoka.phpやってます。

ごめんなさい。

最後にもう一つだけ告知。

ご清聴ありがとうございました。