Maciej Chałapuk

Format PNG jest następcą powszechnie używanego w internecie formatu GIF. Jego główną przewagą jest pełny kanał alpha, czyli obsługa półprzezroczystości. PNG został wprowadzony w 1995 roku i od tamtej pory jest zalecanym przez W3C formatem dla sieci WWW. IE6, pomimo iż wydano go 6 lat później, nie renderuje kanału alpha w obrazkach PNG. Obecnie wiele osób nadal używa tej przeglądarki. Co gorsza, aktualizacja do IE7 na odpowiednio starej wersji Windowsa wcale nie rozwiązuje tego problemu.

DirectX w przeglądarce?

Okazuje się, że własności CSS w IE zostały rozszerzone o zestaw filtrów DirectX. Filtr o nazwie AlphaImageLoader renderuje obrazek z kanałem alpha pomiędzy tłem a zawartością elementu DOM. Mały przykład:

.png-ico {
  filter: progid:DXImageTransform.Microsoft.Alpha(
      src='icon.png', sizingMethod='scale', enabled='true'
    );
}

Powyższy kod zadziała na elemencie o klasie png-ico tylko wtedy, gdy będzie on wypozycjonowany niestatycznie oraz będzie miał określone wymiary. Pierwszy warunek nie stanowi problemu, ale konieczność poznania wymiarów wszystkich obrazków PNG, które będziemy wyświetlać może okazać się kłopotliwa. Rozwiązaniem jest wstawienie niewidocznego elementu <img> tego samego obrazka w środku elementu png-ico:

<span class="png-ico">
 <img src="icon.png" >
</span>

Zapewni to poprawne wymiary obrazka. Własności CSS dla powyższego kodu:

.png-ico {
  display: inline-block;
  position: relative;
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.Alpha(
      src='icon.png', sizingMethod='scale', enabled='true'
    );
}
.png-ico img {
  visibility: hidden;
}

Ostatnim warunkiem jaki należy spełnić jest niestatycznie pozycjonowanie rodzica elementu png-ico.

A co z Firefoxem?

Powyższy kod poprawnie wyrenderuje obrazki PNG w każdej wersji Internet Explorera. W innych przeglądarkach obrazki pojawią się dopiero po umieszczeniu ostatniego selektora w komentarzu warunkowym.

<!--[if IE]>
<style type="text/css">
.png-ico img {
  visibility: hidden;
}
</style>
<![endif]-->

Standardy

Dla zapewnienia zgodności ze standardami można wyodrębnić selektor z własnością filter i umieścić go w warunkowym komentarzu.

To rozwiązanie posiada wiele wad. W przeglądarkach obsługujących kanał alpha owijające elementy <span> są wogóle niepotrzebne, a samo kodowanie może być kłopotliwe. Alternatywą jest utworzenie funkcji JavaScript, która owija element obrazka w potrzebny <span> i modyfikuje odpowiednio CSS.

function fixPNG(img) {

  var span = document.createElement("span");
  span.setAttribute("style", img.style.toString());
  span.className = img.className;
  with (span.style) {
    display = "inline-block";
    position = "relative";
    background = "transparent";
  }

  var parent = img.parentNode;
  if (parent) {
    parent.replaceChild(span, img);
  }
  span.appendChild(img);

  span.style.filter = "progid:DXImageTransform."
      +"Microsoft.AlphaImageLoader(src=\'" + img.src +"\', "+
      +"sizingMethod='image', enabled='true')";
  img.style.visibility = "hidden";
  return span;
};

Sposób wykorzystania tej funkcji w komentarzu warunkowym
zaprezentowany jest na Stronie Demo.