みかづきブログ その3

3ヶ月つづけてみました。

IE8にもrgba的な指示をだしてみよう。

CSS3では色の指定にrgbaをつかうことができます。
rgbaとはred、green、blue、alpha(透明度)を指定して色を決める形式です。

rgb は 0 〜 255で、a は 0 ~ 1 の間で指定することができ、例えば、

background: rgba(255, 0, 0, 0.5);

という指定をすれば、
rgbaに対応しているブラウザは、


こんな感じで半透明の赤い色で表示してくれます。
※ IE8では見えません。

しかし、IE8はCSS3に対応してないためrgbaでの指示を理解することができません。

これはしょうがないことです。
僕も英語でかかれた仕様を理解できないだろうし、誰にでも理解できないことの1つや2つはあるってもんです。

なので、IEに理解できる形で指示を出し直してみましょう。

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88FF0000,endcolorstr=#88FF0000, gradienttype=0);


※ IEでしか見えませんし、IE10では見えません。
※ IE6, IE7でも見えるらしです。(肉眼では未確認)

そんなこんなで今回の記事を余すことなくみれるのはIE9のみということになります。

ちょっとした解説

filter: progid:DXImageTransform.Microsoft.gradientは、本来グラデーションを掛ける際につかうフィルターですが、IEはこの時だけ透明度を理解してくれるようです。
なのでstartcolorとendcolorを同じ色にして、ちゃっかり透明度だけ理解していただきましょう。
※ IE10ではfilterを理解してくれなくなってしまったようです。

ちなみにgradienttypeではグラデーションの方向を数字で指定することができます(縦方向が0で、横方向が1になります)が、今回の場合は当然どちらでも構いません。