Nedenleri, Sonuçları ve Hataları ile IE6

Internet Explorer 6

7 senedir hayatımızda olan ve bu gidişle çıkmayı da pek düşünmeyen bir tarayıcı IE6. Bu yazımda kendimce IE6′ nın halen neden hayatımızda olduğu, hayatımızda olduğu için doğurduğu sonuçları ve diğer tarayıcılara göre web üzerindeki hatalarını anlatmaya çalışacağım.

Bu yazıyı yazmamda ki en büyük etkenlerden birisi bir kaç paragraf sonra göreceğiniz ve siteme ait olan bazı istatistiksel sonuçlar oldu. Elbette bunların yanında başka etkenler de yok değil ama inanın büyük bir şaşkınlık yaratan bu istatistiklerdi bende. Sözü fazla uzatmadan Internet Explorer 6 hakkındaki yazımıza başlayalım;

Nedenleri

Az önce de dediğim gibi bundan tam 7 sene önce Microsoft’ un Windows XP sürümü ile her zaman olduğu gibi sisteme entegre biçimde biz bilgisayar kullanıcılarının hizmetine sunuldu. O zamanın şartlarında elbette diğer tarayıcılardan farklı olarak (IE’ ler içinde) kendine has bazı özellikleri vardı. Hatta bu has özellikler MS Windows SP2 ile biraz daha arttı ve ek olarak Pop-Up engelleyici, Bilgilendirme çubuğu ve dosya indirme diyalog penceresi v.b özellikler ile gelişimini sürdürdü. Ama bu saydığım özelliklerden ileriye gidemedi ve o hali ile kaldı. O bu hali ile kaldı fakat teknoloji ve internet gelişimini sürdürdü. Yani artık IE6 karşısında duran teknolojiye ayak uyduramaz hale geldi. Bu da ister istemez bazı sonuçlar doğurdu. Birazdan o sonuçları hep beraber inceleyeceğiz ama ondan önce insanlar halen neden IE6′ yı kullanmakta bu kadar ısrarlılar onları biraz irdeleyelim ve bir kaç resim ile IE6′ nın popülerliğini görelim;

kadirgunay.com tarayıcı sonuçları

İşte siteme ait olan tarayıcı sonuçları (WP eklentisi olan StatPress ile elde edilmiş sonuçlar). En üstte yani birinci sırada hakkında yazdığımız IE6 krallığını sürdürmekte. 1785 ziyaret %59.1 oran ile. Hemen arkasından Firefox 3 581 ziyaret %19.2 oranla ikinci sırada. Detaylı görmek isterseniz resme tıklamanız yeterli olacaktır.

Ben sıradan bir günlük yazarıyım. Fakat yazdığım konular işim olan css, xhtml, web arayüzleri, jquery v.b konular. En çok üzen olay ise internet teknolojileri ile ilgili bir günlük yazarının sitesi halen (ki daha önce IE6 ve web standartları ile ilgili bir kaç yazı daha yazdım) IE6 ile görüntüleniyor. Hadi diyelim ki kadirgunay.com kısa bir süredir yayında buyrun diğer günlük yazarlarının istatistiklerine bakalım;

• Fatih Hayrioğlu - www.fatihhayrioglu.com
• Hasan Yalçın - www.hasanyalcin.com
• Hakan Demiray - www.dmry.net
• Fatih Turan - www.fatihturan.com
• Karbonizma - http://karbonizma.blogspot.com

İsmini saydığım günlük yazarlarının sitelerine ait tarayıcı istatistiklerini görmek için lütfen isimlere tıklayınız.

Gördüğünüz gibi bazı günlük yazarlarının sitelerinde de IE6 krallığını koruyor. Peki bu krallığı sürdürmesinin NEDENLERİ nelerdir?

• Bana göre en büyük en büyük neden bilinçsiz kullanıcılar : Teknolojiden bir haber, standartları takip etmeyen çok fazla interneti araştırmayan, sadece çalışıyor mu bu bana yeter mantığındaki kullanıcılar.
• Firmalar : Bir çoğunun lisansı olmasına rağmen halen eski sürümleri kullanmaya devam eden ve çalışanlarına yeni sürümler ile ilgili bililer vermeyen aksine yeni sürümlerin performansı etkileyeceğinden korkan firmalar.
• Lisans : Bildiğiniz gibi IE7 ve IE8 (şu anda beta aşamasında) doğrulama sonucu ile güncellenen sürümler. Öyle ki kullanılan çoğu sistem (ev kullanıcıları ve bunlara büyük oranda firmalar da dahil) korsan olduğundan dolayı yeni sürümler kullanılamıyor.
• Açık Kaynak bilgisizliği : Şu an piyasada lisanslı bir çok uygulamanın yaptığı iş ile aynı işi yapan bir çok açık kaynak yazılım var. Fakat bu açık kaynak yazılımlardan insanların bi’ haber olması. Bu da açık kaynak mantığını bilmediklerinden kaynaklanıyor.

Sonuçları

Her ne kadar IE6 çoğu uyum testi platformundan çıkarılsa bile kullanımı ve krallığı halen devam ediyor. Peki bu krallık sürdükçe ne gibi sonuçlar doğuruyor? Bu sonuçlar en çok da web kodlayan kişileri etkiliyor. Benim nacizane görüşlerimi ve sıkıntılarımı dile getireyim;

• Yaptığım veya yapılan her tasarımı iki ya da üç kez gözden geçirmek zorunda kalıyorum
• Kullandığım scriptleri özenle seçmek zorundayım
• Kullandığım imajları png harici seçmek zorundayım
• Hata ayıklama sürecinde harcadığım zamanı ikiye katlıyorum
• Css dosyasında kullandığım seçicilere dikkat etmek zorundayım
• Sürekli Css hackleri kullanmak zorundayım
• Fazladan bir Css dosyası hazırlamam gerekli

IE6′ nın renderi diğer tarayıcılara göre biraz daha farklı. Bunu şöyle açıklayabiliriz; IE6 yazdığını css kodlarını kafasına göre algılıyor ve kullanıcıya yansıtıyor. PNG uzantılı imajları desteklemiyor. Css 2.1′ de kullandığınız seçicilerin bir çoğu (yeni nesil: çocuk seçiciler, gruplamalar v.b) IE6da desteklenmiyor. Tasarladığınız her tasarımı kodlarken IE6 için ya farklı bir CSS dosyası ya da aynı CSS dosyası içinde belirli hacklere ihtiyaç duyuyorsunuz. Haliyle bu da dosyanızın şişmesine, optimize olmamasına ve CSS doğrulamasından geçmemesine sebep olabiliyor. Sitenizi kodlarken kullandığınız çoğu script IE6da çalışmıyor ya da IE6 desteklemiyor.

Hataları

Aslına bakarsanız nedenleri ve sonuçları kısmında IE6′ nın hatalarına dair de değindik inceden. IE6′ nın en büyük hatalarından birisi renderının farklı olması ve kullanıcı arayüzü istenildiği gibi yansıtmaması. Bunları hemen 1-2 örnek ile inceleyelim

IE6da hatalı site

Göründüğü gibi sitenin sağ kolonu IE6 harici diğer tarayıcılarda normal gözükürken IE6da ise sol kısımdaki alanın üstüne binmesi ile aşağıya kaymış. Peki bu alan onun üzerine biniyorsa bunun diğer tarayıcılarda da aynı olması gerekmez mi? Hayır! Çünkü IE6′ nın render farkı işin içine giriyor. Kısaca yeni nesil tarayıcıların hemen hepsi Acid testinden iyi bir yüzde ile geçtiler ve W3C standartlarına uymaya gayret ediyorlar ama IE6 bunların dışında kalıyor. Dışında kaldığı gibi kullanımdan da çekilmiyor. Css kodunuzda yazdığınız bir margin değeri yeni nesi tarayıcıların hepsinde düzgün gözükür fakat IE6da hayır.  Yine benzer bir örnek vereceğim;

IE6da hatalı site

Bu sitede de bilindik hatalar karşımıza çıkıyor yine render farkı ve yine kaymalar. Bu sorunların yanında bir de script hataları var. İşte örnekteki sitede kullanılan script ile ilgili bir hata var ve bu hata IE6′ da karşımıza çıkıyor. Oysaki diğer yeni nesil tarayıcılar da bu scripti kullanıyorlar.

Kısaca

İşim gereği hızlı ve anlaşılabilen xhtml ve css kodları yazmaya çalışıyorum. Olabildiğince hack kullanmadan standartlara uyan web siteleri hazırlamak istiyorum ama maalesef bunları bir yere kadar başarabiliyorum. O bir yerde de karşıma IE6 çıkıyor. Bu yazımda anlatmak istediğim günümüz teknolojisinde yer alan ve standartlara uyan uygulamalar kullanmak. Her ne kadar bilginiz olmasa da doğru ve yanlışı ayırt edebilecek kadar karar verebileceğinizi düşünüyorum. Bu yüzden standartlara uyan ve bu standartları detsekleyen tarayıcılar ile web sitelerinizi test edin. Büyük bir kısım bunu kullanıyor deyip ona göre hazırlamayın. Bu şekilde devam eden süreçler hem standartlara uymayan uygulamaların kullanımdan kalkma süresini uzatır hem de insanların bilinçlenmesine engel olur.

Lütfen standartları destekleyen tarayıcılar kullanmaya ve web sitelerinizi bunlara göre ayarlamaya gayret edin.

Teşekkürler

Bana bu yazıda istatistikleri ile yardımcı olan Fatih Hayrioğlu’ na, Hasan Yalçın’ a, Fatih Turan’ a, Hakan Demiray’ a ve Ahmet Burak Bal’ a teşekkür ederim.

Web’ e Standart Getirmeye Ne Dersiniz?

Toplantıdan çıkmış internette dolaşırken fuzuli olarak bir siteye girdim ve bir banner gördüm nedir diye tıkladım ve karşıma bir site açıldı.

Nedir acaba derken hemen sitenin ana sayfasında yer alan flash anlatımı izledim. Mantığını kavradım ve sizlerle paylaşmak istedim. Evet www.acemilik.com sitesi internet üzerinden yer alan sitelerdeki tarayıcı bozukluklarını tanıtan bir site. Güzel bir proje. Siteleri dolaşıyorsunuz ve tarayıcınızda gördüğünüz bozuklukları (elbette site ile alakalı) www.acemilik.com’ a girip ekliyorsunuz. İşlem bu kadar basit.

Tebrikler arkadaşlar

Not: Desteklemek adına bannerları http://www.acemilik.com/destekleyenler/ adresinden sitenize uygun boyutun kodunu alarak ekleyebilirsiniz.

IE6 _ Hack

Yazının başlığına bakınca bu ne dediniz değil mi? Bir şeyi ele geçirdiğimiz yok ya da tabiri caiz ise Hack yaptığımız yok. Daha önceki yazılarımda IE6′ nın başımıza nasıl bir bela olduğunu yazmıştık. Bu yüzden farklı yollar da anlatmıştık. Hatta başka sitelerde de yazılmıştı. Web tasarımcıları ya da yazılımcıları (yazılımcılar çok alakadar olmasa da) CSS kodlaması genelde her tarayıcı da farklılıklar gösterir. Yeni nesil tarayıclar sorunları kapatsa da eski nesil tarayıcılar ki bunların başında ve en belalısı IE6 gelir, bu hataları kapatmaz ve kafasına göre değerler atar. İşte şimdi anlatacağım hack olayı da bunun için.

_ Hack Örnekleri

Normal şekilde bir div’ e arka plan rengi verelim örnek siyah olsun;

#deneme {background-color:#000;}

Bu şekilde olduğunda deneme idli divimizin arka plan rengi siyah olacaktır ve hemen hemen tüm tarayıcılarda bu siyah olarak gözükecektir. Ama gel gelelim şu şekilde yapınca IE6′ da nasıl oluyor bir bakalım;

#deneme {background-color:#000; _background-color:#E75C58;}

Şimdi ikinci örneği IE6 da açın ve bakın arka plan rengi ne şekilde ben normal zamanlarda IE6 için ayrı bir css kodlaması yapıyorum ve bunu dışarıdan çağırıyorum, ama eğer değişecek değerler az ise alt çizgi “_” yöntemini kullanıyorum. Hemen hemen her değer için uygulanabiliyor.

Umarım işinize yarar.

Tarayıcı Farklılıkları ve Çözümleri

Bu konu ile ilgili bir çok makale yazıldı ve bir çok çözüm sunuldu. Kimisi işe yaradı kimisi iş yaramadı. Gelişen teknoloji içerisinde web tasarımcıları ve web yazılımcılarının en büyük sorunu tarayıcı firmalarının kendi standartlarını kabul edip her etiketi kendine göre yorumlamaları oldu. En büyük sorunlardan birisi de yaklaşık 8 senedir yayında olan ve hiç bir iyileştirme yapılmamasına rağmen halen dünya üzerinde %20-30 oranında insanın kullandığı IE6. Buna ek olarak Acid testinden geçmesine rağmen sürekli farklılık gösteren tarayıcılar.

Net konsorsiyumu her ne kadar bunlar böyle olmalı dese de yazılımcılar sürekli tarayıcılar için hep farklı css kodları yazmak zorunda kaldılar. Hal böyle olunca sürekli her tarayıcı da test etmeye başladılar. Bunun için de en sık kullanılan tüm tarayıcıları sistemlerine kurdular. Genel olarak MS işletim sistemi sıklıkta olmasına rağmen Linux ve MacOS sistemler de kullanılmaya başlandı. E peki bunların tarayıcılarını nasıl test edecekler? Basit

https://browsershots.org/ isimli site size 4 işletim sisteminde yaklaşık 70 tarayıcıyı sürümleri ile test etmenize izin veriyor. Kayıt olmadan günde 1 defa sitenizi test ettirebilir ve tarayıcı sonuçlarını alabilirsiniz. 1 den fazla test etmek isterseniz ücretsiz üye olmanız lazım. Onun için de istekte bulunuyorsunuz. Test sonuçlarınızı PNG formatında tek tek bakabilirken aynı zamanda toplu halde de bilgisayarınıza indirebiliyorsunuz.

Açıkcası benim için çok güzel bir site ve hemen delicious hesabıma ekledim

Derlemeler 11.09.2008

Geçtiğimiz hafta sonu ev taşıma sebebi ile haliyle evde ADSL bağlantım olmaması sebebi ile çok fazla internette dolaşamadım ve derlemeler için bir yazı yazamadım.

• Fatih Hayrioglu’ nun IE6 ile ilgili yazısı - Fatih Hayrioglu [siteye git]
• Chris Coyier IE6 Block Script - Chris Coyier [siteye git]
• Hasan Yalçın’ ın Siyasi Partiler’ in web siteleri ile ilgili makalesi - Hasan Yalçın [siteye git]
• Google yeni web tarayıcısı ile tarayıcı savaşlarına katıldı - [Google Chrome İndir]
• 10 Güzel CSS Düğme (Buton) yapımı anlatımı - Cats Who Code [siteye git]
• Firefox’un Google eklentisi olan “Google Stream Search” ile ilgili yazı - [siteye git]
• Hasan Yılmaz’ dan Firefox “about:config” ayarları ile ilgili bir makale - Hasan Yılmaz [siteye git]