bildirgec.org

css3pie logo

Evet, yanlış duymadınız! Artık İnternet Explorer da CSS3‘ün nimetlerinden yararlanabilecek. Nasıl mı? CSS3PIE sayesinde! İnternet Explorer‘da css3 elementlerini kullanabilmek için geliştirilen bir eklenti de diyebiliriz buna.
Yapmanız gereken işlemler;

1. aşama, buradan dosyları indirip, arşivden çıkarmanız gerekiyor.
2. aşama da ise arşivden çıkardığınız da PIE.htc isimli bir dosya elde edeceksiniz. bütün işi yapan dosya bu! dosyayı kullanacağınız proje klasörünüzün içine kopyalamanız sizin yararınıza olacaktır!

Son aşama ise .css dosyasına eklenecek bir satırlık bir kod, css3’ü kullandığınız bölüme bu kodu ekleyin;
behavior: url(kopyaladığınız_dosya_yeri/PIE.htc);

bir ziyaretçi istatistik şirketi olan statcounter’dan 2009 küresel tarayıcı ve arama motoru istatistiklerine göz attım, paylaşmak isterim.

ocak – aralık 2009 zaman aralığında internet explorer’ın (versiyon bağımsız) üstünlüğü devam etse dahi pazar payı % 65 den, % 55 e kadar inmiş durumda. firefox ise istikrarlı yükselişini % 27 den % 32 ye kadar getirmiş. google chrome için de 1 yıl süresinde %5 ve yükselen pazar payı hızlı çıkış sayılabilir;

versiyon bağımsız 2009 tarayıcı istatistikleri

http://gs.statcounter.com/#browser-ww-monthly-200901-200912

CSS’e yeni başlayanlar reset.css dosyasının önemini tam olarak kavrayamamış olabilirler. Herbir tarayıcı (browser)’nın kendi “default” (varsayılan) netrenderer‘ı olduğunu öğrenmeden önce kendisini “buradaki boşlukta neyin nesi ?” gibi sorularla boğuşurken bulacaktır. Bunu gibi baş ağrılarından kurtulmak için kendi reset.css dosyanızı yazmanız gerekir. Reset.css dosyasını kendiniz yazmasanız da
buradan(YUI), buradan(Eric Meyer) ve buradan(David Walsh) bulabilirsiniz.

Mümkün olduğu kadar CSS kullanılması gerektiğini öneriyoruz ve genellikle bunda da başarılı oluyoruz. Modern tarayıcıların CSS için çok iyi desteği bulunuyor, en azından anahattınızı ve sunumunuzu düzenlemek için CSS kullanmanıza yetecek kadar destek içeriyorlar. Ancak bazen bazı sayfa elementleri farklı tarayıcılar üzerinde farklı görünmektedirler. İşte bu yüzden biz de bugünkü yazımızda farklı tarayıcılarda görünen sorunları giderecek 15 jQuery çözümünün yanısıra size bazı güzel tarayıcı efektleri verecek jQuery eklentilerini listeleyeceğiz.

1. Internet Explorer’da DD_Roundies İle Yuvarlatılmış Köşeler Kullanabilmek

Ne yazık ki CSS3 border-radius şimdilik sadece Safari ve Firefox tarafından desteklenmekte olup, Internet Explorer gibi tarayıcılar üzerinde kare köşeler kullanmak zorunda kalıyoruz. DD_Roundies kütüphanesi yuvarlatılmış köşeleri Internet Explorer üzerinde sorunsuzca kulanabilmemizi sağlyor. DD_roundies, tıpkı jQuery gibi, seçicilerle birlikte çalışıyor ki bu sayede jQuery UI’nin CSS Çatı sınıflarını hedefleyerek DD_roundies’i jQuery UI üzerinde sadece birkaç satırlık kısa kodla uygulayablmemimizi sağlıyor.

• Demo Burada

Web development (front-end) ile uğraşan hemen hemen herkes internet explorer sürümlerinin uyumsuzluğundan ötürü inanılmaz sıkıntılar çekiyordur. Hele ki yeni bilgisayarlar ile dayatılan vista yüzünden standalone çalışan dışı ie6 kernel versiyonu ie7 olan dolayısıyle yanıltıcı sonuçlar almamızı sağlayan gereksiz programlarla cebelleşme sıkıntımızdan hiç bahsetmeyeceğim.

Bugüne kadar bu sorunu en aza indirgemek için içerisinde ie 5-6-7-8 sürümlerini barındıran İE TESTER programını kullanıyordum. Tabi programın barındırdığı bir dünya BUG yüzünden illet etmiş durumdaydım 🙂

Internet Explorer’la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+’ya odaklandım. Her ne kadar IE6’nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6’nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

• Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
• CSS’nizin en başında daima sıfırlama (CSS RESET) kullanın.
• Firefox’ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari’de ise text-shadow: #000 0 0 0 kullanın.
• Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
• Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
• BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
• Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
• CSS3 seçicilerini kullanmayın.
• Alpha’yı yüklemediyseniz saydam PNG kullanmayın.

şu adreste verilen tek satır kısa bir HTML kodu ile IE6‘ya mshtml.dll hatası verdirip kapattırabilirsiniz. ie6 sı olup denemek isteyenler buradan buyursunlar. (ie7 ve diğer tarayıcılarda büyük ihtimalle çalışmayacaktır).