TARAYICI SORUNLARI VE ZMLER r MEVLT NAN lerleyen

TARAYICI SORUNLARI VE ÇÖZÜMLERİ Öğr. MEVLÜT İNAN

İlerleyen teknoloji ve yazılım sektöründeki hızlı büyüme çeşitli gelişmeleri de beraberinde getirmiştir. Piyasada ki tarayıcı(browser) çeşitliliği bu oranda artış göstermektedir. Günümüzde tarayıcı piyasasının büyük dilimini kapsayan, firefox, chrome, internet explorer, opera gibi tarayıcılar standart olarak birbirinden farklı yorumlama özelliğine sahiptirler. İşte bu sorunsallar zinciri tarayıcı uyumlu kod yazmanın bir standart hal almasını güçleştirmiştir.

Dolayısı ile bizler yani yazılımcılar bu çeşitliliğe ayak uydurmak zorunda bırakılmışızdır. Genel olarak CSS yazarken en çok internet explorer ‘da problem çıktığına tanık olabilirsiniz. Yazılan standart kodlar büyük ölçüde firefox ve chrome ‘da benzer yorumlanmakta ve çıktı hemen aynı olmaktadır. Ancak durum internet explorer için geçerli değil. Elbette benim gibi sizlerde her CSS yazarken internet explorer'ın yorumlama biçimini sert bir dille eleştiriyor olabilirsiniz. Özetle bu farklılıkları ortadan kaldırmak ve tasarımın her tarayıcıda aynı görünmesini sağlamak yine biz yazılımcılara düşüyor! Tarayıcıların yorumlama biçimlerinden hareketle CSS'in sınırlarını biraz daha keşfederek çözümler üretebiliriz. Benim tavsiyem CSS yazan herkesin elinin altında firebug bulunması. Firefox için çıkarılan bu ücretsiz mucizevi eklentinin Google chrome versiyonunda mevcut. Hatalarınızı net bir şekilde görebilirsiniz firebug ile. Buna göre düzenlemenizi_yapabilirsiniz.

Örnek 1 Öncelikle bazı püf noktalardan bahsetmek gerekir. CSS yazarken öncelikle reset kavramını bilmenizde fayda var. Form elemanlarının stil özelliklerini varsayılan değerlerden arındırmak her tarayıcıda aynı orantıların dikkate alınması açısından gereklidir. Piyasada birçok reset CSS stil tanımlaması mevcut. Ancak tavsiye edilen Yahoo! YUI reset. css Büyük oranda tarayıcılar arası stil farklılıklarını ortadan kaldıracaktır.

Diğer bir önemli nokta ise sadece internet explorer’ın algılayacağı kod blokları kullanmak. Örneğin içerisinde yazı bulunacak bir diviniz var ve bunun için şöyle bir kod kullandınız;

İnternet explorer bazı durumlarda font-size: 12 px ifadesini algılarken size 8 pxlik bir çıktı verebilir. Bu durumda internet explorer için ayrı kod yazabilirsiniz. Bu şekilde her iki tarayıcı için eşitliği dengeleyebilirsiniz.

Diğer bir husus ise internet explorer’ın boş divileri yorumlayış biçimindeki farklılıktır. İnternet Explorer içi boş divlerde verilen height değerini yanlış yorumlamakta ve yanlış çıktı vermektedir. Örneğin yatay bir çizgi çizmek istiyorsunuz bunun için şöyle bir kod yazdığınızı varsayalım;

Bu yazdığınız kod firefox ve chrome da 1 px yüksekliğinde yatay bir çizgi olarak yansıtılacaktır. Ancak internet Explorer ‘da 10 px yüksekliğinde bir çizgi olarak yansıtılacaktır. Bu sorunu çözmek için şu şekilde bir yöntem izleyebilirsiniz.

Bir başka sık karşılan problem ise float ifadesindeki yorum farklılığıdır. Bir divinizin olduğunu varsayalım ve genişliği 500 px yüksekliği ise 300 px olsun. Sol kısımda resim sağ kısımda yazı bulunmasını istiyoruz. Bu durumda resmimize float: left; ifadesi koymamız gerekiyor. Ancak eklenen resim divin yüksekliğinden biraz fazla 400 px; bu durumda resim divden taşacaktır. Elbette bu istenilen bir durum değildir çünkü backgroundda gradient kullandıysanız ve div bir box dan ibaretse resmin taşması görsel anlamda iticilik yaratacaktır. Normal şartlarda divin eklenen resmin boyutuna göre genişlemesi gerekmektedir. Bu kapsama sorununa css 3 ile birlikte çözüm kazandırıldı. Buna göre kapsayan elemente şu ifadenin eklenmesi yeterli oluyor;

Diğer bir püf nokta ise opacitydir. Bir resmin ya da yazının opacity ile çözünürlüğünü saydamlaştırabiliriz. Firefox ve Chrome ‘da şu şekildeki ifade çalışmaktadır; örneğin sayfadaki resmimizi saydam olarak gösterelim ve üzerine Mouse ile gelindiğinde orjinal halinin çıkmasını sağlayalım;

İnternet vexplorer bu opacity değerini dikkate almayacak e resmi orjinal halinde yansıtacaktır. Bunun için şu iki tanımlamayı birlikte kullanmanız gerekiyor;

Örnek 2 CSS ile web sayfası kodlarken bizi en çok zorlayan konulardan biri daha farklı tarayıcı sürümlerine göre kod yazmaktır. CSS ile kod yazarken bazı durumlarda kodumuz bir tarayıcı grubunda düzgün görünürken başka bir tarayıcı grubunda farklı görüntülenir, tabi biz yaptığımız sitelerin kullanıcılar tarafından tarayıcısı ne olursa olsun aynı görünmesini isteriz. Bu gibi durumlarda kullandığımız yöntem aslında çok basit bir tekniktir. Hangi tarayıcıda farklı görünüyorsa onun için farklı kod yazarız ve bunu diğer tarayıcıların görmeyeceği kod bloğu içinde yazarız.

Farklı tarayıcılar için düzenleme(hack) yazarken genel anlamda iki farklı yöntem kullanırız. Farklı css dosyaları hazırlayıp bunları eklerken şartlı yorumlar yardımı ile farklı tarayıcılar için farklı css kodlarını gösteririz, ikinci yöntem ise kod içerisinde o tarayıcının gördüğü kod bloğu içinde ona göre kod yazarız. Burada birinci yöntemi daha önce anlatmıştık. Bu yazımızda kod içindeki css düzeltmelerinden bahsedeceğiz.

CSS kodu içinde farklı tarayıcılar için farklı kod yazmanın en kolay yolu, tarayıcılara özel seçiciler içine kod yazmaktır. Tarayıcılara Özel Seçiciler IE 6 ve altı IE 7 ve altı

sadece IE 7 için IE 7 ve yeni nesil tarayıcılar için Yalnız yeni nesil tarayıcılar için (IE 7 dışında)

Aynı XHTML kodu için aşağıdaki gibi farklı tarayıcılarda farklı sonuçları alırız. Sayfa Google Chrome 0. 3. 154. 9, Safari 3. 1. 2, Firefox 3. 0. 4/2. 0. 0. 14, Internet Explorer 7/6/5. 5, Opera 9. 6 ile test edilmiştir.

Örnek 3 Tarayıcı Uyumluluğu Internet Explorer 8 ve önceki sürümlerde boşluk (padding) ve sınır (border), genişlik özelliği içine katılıyordu. Internet Explorer 8 ve öncesi sürüm web tarayıcılarla uyum probleminden kaçınmak için, HTML sayfasına <!DOCTYPE html> ifadesini ekleyiniz. Örnek bir <!DOCTYPE html> ifadesini aşağıda bulabilirsiniz:

CSS tarayıcı seçici nedir: Siteyi oluştururken tüm stilleri sıfırladık ve kullanıma uygun hale getirdik. Fakat kendi oluşturduğumuz CSS kodları yinede farklı tarayıcılarda farklı sonuçlar verebilmektedir. Bu gibi durumlarda CSS browser selector her tarayıcı için ayrı style tanımlamaları yapabilmenizi sağlıyor.

Kaynakça: http: //www. thecoders. net/makaleoku-3 -390 -Css-ve-Tarayici-Uyum. Sorunlari. html http: //fatihhayrioglu. com/tum-tarayicilar-icin-css-duzeltmelerihack/ https: //gelecegiyazanlar. turkcell. com. tr/konu/webprogramlama/egitim/201 -html 5 -css/tarayici-uyumlulugu http: //blog. hasanaydogdu. com/internet-explorer-7 -8 -9 -da-tarayici -uyumlulugunu-test-edin/