conti CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。
PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。
私はPHPを使ってRGBAで色指定（透過率も）したものを画像生成するやり方でIE8もサポートしています。
そのやり方をちょっとご紹介。
デモを用意していますので、まずはそちらをご確認ください。
(※IEのでデバッグモードでIE8にしたりしてご確認ください)
用意するもの
RGBAで色指定したものを画像生成する便利なライブラリがすでにあるのでそれを使います。
使い方
使い方はいたって簡単で先ほど紹介した「rgba.php」にRGBAの値を渡せば良いだけです。
.alpha_bg{
/*相対パスで設定しているので、ご自分がrgba.phpを配置した場所に合わせてパスは変更してくださいね。*/
background:url('rgba/rgba.php/rgba(255,255,255,0.5)');
}
- ディレクトリの構成例
- index.html
/css
└rgba/rgba.php
└style.css
└/color/
通常のRGBAと同じ書き方で値を渡せるので、違和感なく使えますね。
IE8はあくまで補助なので通常はこんな感じで書いておけば良いです。
※一応IE7でも使えます。
.alpha_bg{
/*相対パスで設定しているので、ご自分がrgba.phpを配置した場所に合わせてパスは変更してください。*/
background:url('○○○/rgba.php/rgba(255,255,255,0.5)');/*IE8用*/
background: rgba(255, 255, 255, 0.5);
}
CSSは上から下に読まれて行くので、CSS3のRGBAに対応しているものは上書きされる感じです。
毎度書くのが面倒な場合はLESSやSASSのMIXINとかにしておくと意識しなくても勝手に設定してくれるので良いですね。
まとめ
PHPが使える環境じゃないとダメって制限はありますが、なかなかPHP使えないサーバーはないと思うので汎用的にこのやり方でIE8をサポートできると思います。
RGBA使えなくて、もやもやしてる人たちの希望になれましたかね。
他に私はこうやってるよーとかありましたらこっそり教えてもらえると嬉しいです(*ゝω・*)
