透過(透明)PNGのブラウザ対応状況

ちょっと複雑なレイアウトを組む際、キレイにHTMLコーディングするために、透過(透明)GIFや透過(透明)PNGを利用するのですが、透過PNGのブラウザ対応状況が微妙で調べてみたのだけど、あまりまとまっているサイトがなかったためメモを残してみる。(GIF形式でも透過処理はできるのだけど、さまざまな背景の上でもドロップシャドウなどををキレイに見せるにはアルファチャンネルのPNG画像である必要があるため)

≪透過(透明)PNGブラウザ対応状況≫
IE6以下:PNG8→角が荒い(PNG24→透過できず)
IE7[for Win]:キレイにいける
Gecko/Mozilla(Sleipnir)[for Win]:キレイにいける
Safari2.0.4[for Mac]:キレイにいける
FireFox2[for Mac]:キレイにいける
Opera9[for Mac]:キレイにいける

IE7の透過PNG対応はPNG愛好者(?)にはいいうれしい話なのだけど、先日のブラウザシェアからすると、まだまだ未対応がメジャーだと思っていた方が無難なようだ。

■続きの内容:「Javascriptハックや保存形式による回避など」

Javascriptなどでハックを利用すればある程度は対応できるようだけど、何となくそれもめんどくさい(そもそもごちゃごちゃとスクリプトを書くのが嫌いなため)。さらには、一応保存形式に気をつければ、一定のクオリティは確保できるのだけど、デザイン重視のサイトで耐え得るものではない。
一般的にはOKなのかもしれないので下記参考までに。
参考サイト:One PNG, two browsers, no hacks
結局、弊社ではきっちり確実にレイアウトを組んで透過しない画像を配置するという古典的な方法。
一般的に言われるシェアの97%以上で確認できれば問題ないかなという判断。

とはいえ、こういった問題に正解はなく、TPO(「そのサイトは“誰に何のを伝えるために”存在しているのか」)によって、対応策を考えていく必要があるので常につきまとう問題ではある。


Tags:

Popularity: 20%

関連記事

  1. [Multiple_IEs]Internet Explorerを複数インストール
  2. IE7.js 2.0Beta(最新版)の公開
  3. [CSSVista]IEとFirefoxで同時に表示確認
  4. Windows Vista (Let's note CF-W5) に乗り換えてみました。
  5. Internet Explorer 6.0 用 CSSハック
  6. [SEO] Yahoo! Google 推奨 HTTP 301 リダイレクト(URL変更)
  7. CSS入門時にお薦め!HTMLとCSSを相互変換する

Leave a Reply

TrackBack URL