IE6への透過pngの対処法は色々ありますが、有名かつとても実用的で私もよくお世話になっている「DD_belatedPNG_0.0.8a.js」についての使い方とハマりやすい注意点を挙げたいと思います。
- 特徴
- ダウンロード
- 使い方
- 注意点
- その他の対処法
特徴
IE6以下に対しても透過pngがちゃんと透過して表示できるようにしてくれるJavascriptです。
また設定がとっても簡単で使いやすいです。そして重要なポイントとして背景画像に「透過png」を指定してもちゃんと透過してくれるという点。さらに、background-positionプロパティにも対応しています。
ダウンロード
ダウンロード先は下記から
http://www.dillerdesign.com/experiment/DD_belatedPNG/
使い方
jqueryなどに依存せず単独で動作するので便利です。
内で「DD_belatedPNG.js」を読み込みます。IE6のみに読み込ませたい時は下記のように条件分岐コメントで囲みます。
<!--[if IE 6]>
<script src="○○○/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<!--[endif]-->
そして、DD_belatedPNG.fix('');の中に適用したいセレクタを記載します。上記のように複数指定することも出来ます。上記の場合は「imgタグ」と「png_bgクラス」に対して適用している例です。imgタグ全てに適用すると重いという場合は指定から外してしまって、html上で適用するimgタグに上記で指定したクラスを付加してあげれば大丈夫です。
注意点
とても便利なスクリプトですが、知っていないとハマることがある注意点を記載します。私はモロにハマりました・・・。
body,tr,tdの背景には使えない
効かない！！という時に結構あるのがこのパターンです。背景画像にも使えるって書いてあるのに使えないじゃないか！とならないように注意しましょう。
背景全体に透過pngを使用する際は全体を「#wrapper」などのdivで囲ってあげれば解決します。
その他の対処法
透過png対策は他にもいろいろありますが、透過png対策もできて、その他のバグやcssに対応してくれる「ie9.js」というものがgoogleから配布されています。ie7.jsからの派生ですね。使用する際はhead内に下記のように記述します。
ie9.jsの使い方
＜!--[if lt IE 9]＞
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
＜!--[endif]--＞
これだけでOKです。上記の場合はIE9より下、つまり「IE8以下に」読み込ませるという記述です。ちなみにgoogleなどから持ってこれるライブラリはgzip圧縮されたものなので読み込みも早いです。
このie9.jsを使うとオールドIEでも「:before,:after擬似要素」が使えたり、「子セレクタ」「兄弟セレクタ」「間接セレクタ」などが使えたり、他にも「クラスの重複指定」「opacityがfilter要らず」で効くようになったりする素敵なライブラリなのですが、透過pngを使う場合画像のファイル名の末尾に「-trans」と付けるだけで透過してくれるようになります。
例）「sample.png」の場合・・・「sample-trans.png」
注意！background-positionが効かない
注意すべきは背景の位置を指定している場合です。背景画像はきれいに透過してくれているのですが、画像が全て（0,0）の位置になってしまいます。
これ結構致命的ですよね・・・。
まぁただ、決まった枠サイズぴったりで透過pngを使用する時にはクラスを付ける必要もないのでhtmlも汚さないし、お手軽かもしれません。