Web tasarımcıların, uygulamalarında PNG kullanmak konusundaki hevesleri, 32-bit PNG dosyaları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.
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.
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 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.
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 Loader isimli 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…
Şu ana kadar benim gördüğüm en başarılı çözümlerden biri… 2.0 sürümüyle birlikte CSS background-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/
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
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/
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.
Diğer Kaynaklar
http://www.alistapart.com/stories/pngopacity/
http://www.howtocreate.co.uk/alpha.html
http://24ways.org/2007/supersleight-transparent-png-in-ie6
http://homepage.ntlworld.com/bobosola/pnginfo.htm
http://koivi.com/ie-png-transparency/
http://www.suaygiri.com/gif-jpg-ve-png-arasindaki-farklar/
http://webdeneyimleri.donanimhaber.com/jpg-png-gif/
Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.
Yorumla BakalımBu Makale için toplam 13 adet yorum bulunmaktadır...
Bu Makale 2 April, 2009 ve saat 19:42 itibariyle Sorunlar ve Çözümler kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...
2 April, 2009 ve saat 22:32:24'de gönderdi...
Ben ilk çözüm olarak jQuery kullanıyorum fakat bazen diğer betikler ile çakışıyor ve problem çıkarıyor bu durumlarda ise eğer kullandığım alanların sayısı az ise AlphaImageLoader yolu ile çözüyorum.
Son olarak bir de bir js dosyası vardı IE7.js idi sanırım. O baya iyi en son projede onu kullanmıştım
2 April, 2009 ve saat 22:54:44'de gönderdi...
@Kadir merhaba, ben de senin yazınla birlikte JQuery’i deneyeceğim…
IE7.js sanırım IE6 ve altı tarayıcıları IE7 gibi davranmaya zorluyor. IE6′dan kaynaklı CSS yorumlama hatalarını da büyük oranda minimize ediyoru. Bu da gerçekten efektif bir çözüm olabilir.
Katkın için teşekkür ederim…
2 April, 2009 ve saat 22:57:37'de gönderdi...
Aslına bakarsan tam olarak IE7 gibi davranlamalarını sağlamıyor fakat düzenli olarak etrafta toplanan IE6 fix kodlarının derlenmiş ve temizlenmiş hali diyebiliriz.
Ben teşekkür ederim.
3 April, 2009 ve saat 00:26:09'de gönderdi...
Bu konuyu biraz daha açabilir misin?
3 April, 2009 ve saat 01:39:25'de gönderdi...
Sevgili Fatih, araştırma yaparken böyle bir kaç cümle ile karşılaşmıştım.
Mantık olarak .htaccess dosyasında ve IIS’de .htc uzantısına izin vererek global ortamdan bu tip dosyaları ulaşılabilir kılıyoruz. Bunun yarattığı potansiyel riskler var. Bu arada kayda geçmiş bir rapor yok bu konuda.
Yalnız Zoque forumda bu şekilde konuşulmuş…Burada ise .htc’nin taşıyabileceği riskler konusunda bir tartışma dönmüş inceleyebilirsin.
Yanlış anlaşılabileceğini düşünerek içeriği update ettim. Dikkatimi çektiğin için teşekkür ederim…
7 April, 2009 ve saat 12:13:40'de gönderdi...
Bir çok fix dosyası gördüm fakat bu .htc gerçekten başarılıymış. Artık bunu kullanmaya karar verdim, teşekkür ederim
7 April, 2009 ve saat 16:07:12'de gönderdi...
Evet Erhan, IE Png sorunu için başarılı bir çözüm…
2 May, 2009 ve saat 11:39:26'de gönderdi...
Resimlerdeki saydamlığa birçok çözüm var. Fakat IE6 da arkaplan resmi saydamlığına çözüm bulamadım. Ama en azından değişik yöntemlerle biraz uzun olsada oluyor. (:
2 May, 2009 ve saat 13:07:08'de gönderdi...
@Web Öğrencisi, merhaba,
iepngfix.htc yöntemi ile arkaplan transparanlık sorunu kısmen de olsa çözülmüş oluyor…
Kolay Gelsin…
9 July, 2009 ve saat 16:31:59'de gönderdi...
Özgür artık şunları kullanıyorum ben,
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://localhost:1421/UI/images/RoundedBoxBuyukBg.png’, sizingMethod=’crop’)
Bir de bir js dosyam var;
var arVersion = navigator.appVersion.split(“MSIE”);
var version = parseFloat(arVersion[1]);
if ((version >= 5.5 && version < 7) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “”
img.outerHTML = strNewHTML
i = i-1
}
}
}
js dosyası direk img tagına etki ederken ilk örneğim ise arka plan olarak eklenen imajlar için.
1. yolda şöyle bir sorun oluyor kullanılan div ya da diğer objeler ne ise artık içinde diğer objelere erişim engeli oluyor. Onu da position:relative yöntemi ile aşabilirsiniz. Fatih abinin makalesinde de var zaten anlatım
14 July, 2009 ve saat 17:12:58'de gönderdi...
Katkın için teşekkür ederim Kadir
Bir ara kullanıp deneyeceğim…
18 August, 2009 ve saat 16:59:52'de gönderdi...
Google Seo,search engine optimization,seo techniques,google adsense
Bu kavramlar çok önemli aradıklarımı bu sitede buldum.. çok teşekkürler ..
21 June, 2010 ve saat 17:52:46'de gönderdi...
[...] çıkardığı sorunları gidermeniz lazım. Bunun da oldukça basit ve etkili bir çözümünü PNG ve IE Transparanlık Sorunu adlı makalede [...]