Web tasarımcıların, uygulamalarında PNG kullanmak konusundaki hevesleri, 32-bit PNGdosyalarının 8-bit alpha kanalı desteğine sahip olmasından ileri geliyor. Fakat gelin görün ki, PNG (Portable Network Grafics) konusunda zoraki bizi uğraştıran bir sorunla karşı karşıyayız. PNG’nin bir sorunu, ya da bir eksikliği olmadığı ortada iken, IE6 adlı bir tarayıcı PNG formatını kullanmamamız konusunda elinden geleni ardına koymuyor. Günümüzde hala %30-40 civarı kullanım payı olan bir tarayıcı karşısında, biz web geliştiricilerine ise boynumuzu büküp, çözüm üretmek kalıyor.
Nedir Bu PNG Sorunu?
PNG sorunu olarak bilinen durum, alpha kanalı desteği sunan PNG formatındaki imajların, web uygulamalarında kullanılması durumunda karşımıza çıkıyor. Bu dosyaları 32-bit PNG (24-bit + 8-bit Alpha) dosyaları olarak tanımlıyoruz. Renk kanalları RGBA’dan (Kırmızı, Yeşil, Mavi ve Alpha) oluşuyor. IE6, bu şeffaf PNG dosyasını doğru yorumlayamayarak, resim sınırları dâhilinde açık mavi-gri bir zemin renginin oluşmasına sebep oluyor. Bu sorunu aşağıdaki resimde görebilirsiniz.
Peki, Neden GIF Kullanmıyoruz?
GIF (Graphics Interchange Format), çok önceden beridir web geliştiricileri tarafından kullanılagelen bir format. Az renk içeren imajlarda yüksek sıkıştırma oranı ile göz kamaştırıyor. Az renk içeren diyoruz, çünkü GIF formatı 256 (8-bit) renk destekliyor. GIF formatının şeffaflık (transparency) desteği bulunmakta…
GIF ile ilgili bir problemimiz, şeffaf bir imaj kullanmak istediğimizde ortaya çıkıyor. Örneklemek gerekirse günümüzün web uygulamaları degrade yapılardan oluşuyor. Bu anlamda geçişli bir zemin üzerinde şeffaf bir GIF imajı kullanmak (kullananların başına gelmiştir), imaj sınırları ve degrade zeminin birleştiği noktalarda uyum-geçiş problemlerine sebep oluyor.
Buna ek olarak şeffaf bir GIF imaj kullanmak, ileride zemin üzerinde gerçekleşecek olası değişikliklerde, GIF imajın, üzerinde duracağı zemine göre tekrar çıkış alınmasını zorunlu kılıyor. Bu anlamda GIF şeffaflığı zemine bağımlı…
PNG Alpha Kanal Desteği
PNG formatı ise 24-bit RGB ve tam 8-bit Alpha kanalı desteği ile zemin ve imaj arasında yumuşak geçiş sağlamamızı olanaklı kılıyor. Ama gelin görün ki IE6, burada canımızı sıkıyor. İsterseniz sorunun nasıl çözülebileceğine bir göz atalım.
Sorunun Çözüm Yolları
Sorunla ilgili bugüne kadar üretilmiş çözüm yollarının ana eksenini, doğal olarak 32-bit PNG desteğinden yoksun olan IE’ye bu özelliğin kazandırılması oluşturuyor. Bu da, Alpha Image Loaderisimli bir filtre kullanılarak gerçekleştiriliyor. Konuyla ilgili yapılan CSS ve Javascript destekli çözümlerde kısmen sıkıntıları giderse de, tam anlamıyla sonuç almakta zorlanıyoruz. Konuyla ilgili çözümleri aşağıda sıraladım…
iepngfix.htc
Şu ana kadar benim gördüğüm en başarılı çözümlerden biri… 2.0 sürümüyle birlikte CSSbackground-position ve background-repeat özelliklerini de destekliyor. Eksi olarak ise sunucu üzerinde .htc dosyasını çalıştırabilmemiz için htaccess içinde text/x-component için izin vermeniz gerekiyor. Bu da sunucu da açık yaratıyorpotansiyel riskler oluşturuyor. Geliştiriciler açısında yolların tanımlamasında sorunlar oluşabiliyor, ek olarak resimler yüklenirken yaratıldıkları için kullanıcılar tarafından kayıt edilemiyor. IE Tester ile yaptığım teste IE.5.5’de uygulamanın çalışmadığını gördüm.
http://www.twinhelix.com/css/iepngfix/demo/
JQuery ifixpng() Eklentisi
Konuyu bir de JQuery kullanarak çözmek isterseniz bu çözümü kullanabilirsiniz. Kullanım açısından kolaylık getirdiği bir gerçek. Yalnız geliştiricisin de belirttiği gibi CSS background-repeat desteği bulunmamakta.
http://plugins.jquery.com/project/iFixPng2
http://www.kadirgunay.com/ie6-ve-png-sorunu.html
Bire Bir Çözüm
Konuyu bir de her elementi birebir olarak, CSS içerisinden çözme yaklaşımı var. Konuyu Fatih Hayrioğlu kendi blogunda değerlendirmiş. Kişisel olarak uygulanması zaman alıcı ve yıpratıcı olduğunu düşünüyorum.
http://www.fatihhayrioglu.com/internet-explorer-6-icin-saydam-png-destegi/
Değerlendirelim
Bu yazıda da gördüğünüz gibi IE konusunda çalılığın etrafında dolaşmaya devam ediyoruz. Çözümler doğal olmadığı için, tam anlamıyla bir çözüm oluşturmuyorlar. Bu anlamda şeffaf PNG kullanımı konusunda, en azından bugün için kendimizi belli durumlarda sınırlamamız gerekiyor. Tabi bu hiç de kullanmayalım demek değil. Kararı siz vereceksiniz.
