CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする

2008年4月7日 月曜日

IE 6 で背景に指定した png のアルファチャンネルを有効にするための JavaScript がいくつかありますが、それとほぼ同じことを CSS のなかで行うコードを書いてみました。

この方法を使うことの利点 / 欠点は

利点

• JavaScript で背景の png を AlphaImageLoader に置き換える場合はページの読み込み完了後に置き換わるため、一瞬 png の半透明部分がグレーになりますが、この方法はそれがありません。
• JavaScript で同じことを行う場合は IE のために Web ページで読み込む JavaScript のライブラリを増やさなければいけないかもしれませんが、この方法はそれがありません。
• 背景にする png ファイルへのパスを相対パスで扱えます。

欠点

CSS に IE の独自実装を記述するので CSS 自体は Valid ではなくなります。

実際に動作を確認していただくために CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にするためのコードの demo を用意しました。

実際に使う場合のコードは例えば、

div.sample{
background:url(img/bg.png) no-repeat;
}

* html div.sample{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

このコードは

• expression という CSS の中で JavaScript のようなことができる IE の独自実装
• filter の AlphaImageLoader という png のアルファチャンネルを有効にできる方法

を使って CSS 内で IE 6 対策も完結させてしまうためのものです。

具体的に何をやっているのかというと

1. expression で自分 ( this ) の style の filter に AlphaImageLoader を設定してそこで使う png の参照先は自分の background-image に設定されている値にする
2. 自分の background-image を none に変更する
3. expression がそのままだと無限に実行し続けるので最後に behavior を none にして expression を消す

という流れです。実際に CSS ファイルに記述するときは

div.sample{
background:url(img/bg.png) no-repeat;
}

* html div.sample{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

という感じににします。

リピートっぽくしたい場合は

* html div.sample{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

という感じで sizingMethod の部分に scale を設定します。ただし、実際には scale はリピートではなく、適用されている要素のwidth, height にアスペクト比を無視して伸縮させるだけです。タイル状にはなりません。

注意点

JavaScript で背景の png を AlphaImageLoader に置き換える場合にも同じことですが、以下の注意点があります。

• AlphaImageLoader を使った要素の position プロパティ が relative, または absolute に指定されている場合、その子孫要素の a 要素や onclick, onmouseover などが絶対に効かなくなってしまいます。
• AlphaImageLoader を使った要素の プロパティ が未指定、または static の場合のみ、その子孫要素の a 要素や onclick, を指定した要素の プロパティを relative, または absolute にすることでアクションを起こすことができるようになります。
• AlphaImageLoader は通常の背景とは違い、repeat はできません。設定されている要素の大きさに合わせて伸縮させることはできます。