Site Tasarımlarını Her Tarayıcıya Uyumlu Hale Getirmek-3

Fırsat buldukça yazmaya çalışıyorum. Ama okul, iş, projeler, staj derken bi türlü vakit bulamıyorum. Bayram üstü de okul biraz hafiflemişken yazayım dedim.

Site Tasarımlarını Her Tarayıcıya Uyumlu Hale Getirmek başlıklı yazıya başlamıştık ve bugün bu konunun 3. parçasına geldik.

Sitelerimizi her tarayıcı için uyumlu hale getirmek için göz önünde bulunduracağımız diğer bir maddede, CSS tarayıcı seçici kullanmak.

CSS tarayıcı  seçici ( CSS Browser Selector) ne işe yarar?

Siteyi oluştururken tüm stilleri sıfırladık ve kullanıma uygun hale getirdik. Fakat kendi oluşturmuş olduğumuz css kodları yinede farklı tarayıcılarda farklı sonuçlar verebilmektedir. Bu gibi durumlarda imdadımıza CSS Browser Selector yetişiyor ve her tarayıcı için ayrı ayrı style tanımlamaları yapabilmemizi sağlıyor.

Nasıl Kullanılır ?

Öncelikle buradan indireceğiniz css_browser_selector.js (v0.3.4 – 29 eylül 2009) javascript dosyasını,  sitenizin dosyaları içine atınız.

Daha sonra web sayfanızın;

etiketleri arasına,

kodlarını yapıştırın. Böylece sayfanıza kullanacağımız javascript kütüphanesini yüklemiş oluyoruz…

Artık tek yapmamız gereken CSS bloklarımızı oluştururken, bloğun başında tarayıcı kodunu yazmak.

Basit bir örnekle açıklayalım…

Yukarıdaki css kodlarını incelediğimizde, kutu isminde bir class’ımız var.
İlk satırdaki kod bize şunu anlatıyor, bu class’ı atadığımız div’ler kırmızı 1 piksel kenarlıklı, gri zeminli ve 5 piksel iç kenar boşluklu şekilde görünecek. Bu tüm tarayıcılar için geçerlidir.

İkinci satırı incelersek, internet explorer’da kutu class’ı atanmış bu div yukarıdaki özellikleri taşımasının yanı sıra iç kenar boşlukları 5 piksel değilde 10 piksel olacağını görüyoruz.

Üçüncü satırda ise Chrome tarayıcısında kenarlığın 4 piksel genişliğinde olması belirtilmiştir.

İşte kullanabileceğiniz kodlar ;

İşletim Sistemleri ;

  • win » Microsoft Windows
  • linux » Linux (x11 ve linux)
  • mac » Mac OS
  • freebsd » FreeBSD
  • ipod » iPod Touch
  • iphone » iPhone
  • webtv » WebTV
  • mobile » J2ME Devices (örn: Opera mini)

Tarayıcılar ;

  • ie » Internet Explorer (Tüm versiyonları)
  • ie8 » Internet Explorer 8.x
  • ie7 » Internet Explorer 7.x
  • ie6 » Internet Explorer 6.x
  • ie5 » Internet Explorer 5.x
  • gecko » Mozilla, Firefox (Tüm versiyonları), Camino
  • ff2 » Firefox 2
  • ff3 »Firefox 3
  • ff3_5 » Firefox 3.5
  • opera » Opera (Tüm versiyonları)
  • opera8 » Opera 8.x
  • opera9 » Opera 9.x
  • opera10 » Opera 10.x
  • konqueror » Konqueror
  • webkit veya  safari » Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 » Safari 3.x
  • chrome » Google Chrome
  • iron » SRWare Iron

js kütüphanesinin güncelleştirmelerini http://rafael.adm.br/css_browser_selector/ adresinden takip edebilirsiniz…

22 Adet Yorum Yapıladı ( Sende Yorum Yaz! )

  • Bu yazıda konusu geçti : Bilal YILMAZ - Kişisel Web Sayfası » Blog Arşivi » Site Tasarımlarını Her Tarayıcıya Uyumlu Hale Getirmek.

  • Öncelikle bu yararlı bilgi için teşekkür ederim. site içinde çok yaralı bilgiler var hazırlayanların ellerine sağlık.

  • Merhaba mesela gradient uygulamasında ön ekleri farklı olan trayıcılar için style dosyasındaki gibi yine her tarayıcı için ayrı kod yazılıyor. Peki ne farkı var o zaman yine fazla kod yazılmış oluyor.
    Yapmış olduğum bir uygulamam da firefox ta sorunsuz fakat renk geçişli olduğu için explorer 9 da neredeyse hiçbirşey yok.
    Tabii burada w3 standartlarını tarayıcıların uygulamaması nedeni yatıyor. Mesela explorer 9 için gradient bir uygulamada tarayıcının ön eki bir hayli kafa karıştırıcı. Acaba sayfaya çağırılan bir jawascript kodu ile her tarayıcıya uyacak standart ve sade bir kod ile bu iş olamazmı. Örnek: linear-gradient: (Buradaki değerleri javascript te her tarayıcı için tanımlayıp linear-gradient: (top,#333,black); bu kodun bütün tarayıcılar için yorumlanması sağlanamazmı. Biraz uzun oldu vakit ayırdığınız için şimdiden teşekkürler.

  • cok tesekkurler,yararli bilgiler icin

  • su iexploreri duzeltseler boyle birseye hic gerek kalmayacak

  • bilgiler çok değerli.tşk

  • Selam;
    paylaşım için teşekkürler öncelikle. benim template bir sitem var ve mobile de düzgün çıkmıyor. Sanırım verdiğiniz bilgilerle düzgün çıkması sağlanabilir. Sadece css blokları hangileri oluyor? Bir de kutu yerine ilgili class ı mı yazmak lazım? her bloğun başına mı eklemek lazım?
    teşekkürler…

  • Sss blokları; .class_adı {/*tanımlamalar*/} şeklinde tanımlama yaptığımız yerleri belirtmekte.
    Kutu yerine de dediğiniz gibi, ilgili class’ın adını veya Id’nin adını yazmalısınız.

    Örneğin düzenleme yapacağımız div “menu_icerik” ID’sine sahipse onun css bloğu (css tanımlaması) #menu_icerik {/*genel tanımlamalar*/} şeklindedir.

    biz örneğin explorer için özel bir tanımlama eklemek istiyorsak, bu satırın altına aşağıdaki gibi bir tanımlama bloğu daha eklemeliyiz.

    #menu_icerik {/*genel tanımlamalar*/}
    .ie #menu_icerik {/*ie için yapılan tanımlamalar*/}

  • sadık sorunca cevap yok, nadire sorunca hemen cevap, seni çakaal seniiii

  • Neden böyle fesat düşünceler içerisine girer ki insan…
    Buradaki yazımdan anlayacağınız gibi, ben Eylül 2012’de askerdeydim. Kıbrıs’ta vatani görevimi yapmaktaydım. Şubat 2013’te döndüm. cevap vermek için de geç olduğunu düşündüm.

    Fark ettiğim ve gözümden kaçmayan sorulara, bilgim dahilinde yanıt vermeye çalışırım.

  • Bu zararlı her tarayıcı işin ayrı div oluşturuyorsunuz buda css yi şişirir oda site hızını önemli oranda etkileyecektir

    • Aslında her tarayıcı için bir div oluşmuyor. yukarıdaki js dosyası tarayıcı özelliklerine vs. bakarak, html etiketine class atıyor. daha sonra, css dosyalarında bu claslarla tanımalama yapıyorsunuz. gayet kullanışlı bir yönetm 😉

  • merhaba benim bir sitem var ama css yok easy builder kullanıyorum bu söylediğiniz kodlar nereye kayd oluyor nasıl yapcam bana çok acıl lazım bilgisayarımda ıyı cıkıyor ama daha küçük bilgisqayar ve tablet ile telefonda rezalet cıkıyor site içeriği tum ekranlara uyumlu yapamıyorum ve bana acil lazım yardımcı olursanız sevınırım teşekkür ederm

    • easy builder, konusunda pek bilgim yok. Fakat senin ihtiyacın olan daha çok responsive tasarım.. Responsive ile ilgili araştırma yaparsan daha iyi olur..

  • Merhaba;

    Ben yazmış olduğunuz makaleye göre kodları ilgili yere koydum (.js dosyasını ) alt kısımda da kodumu nasıl eklediğim yazıyor. Fakat herhangi bir değişiklik olmuyor hocam. Nerede hata yapıyor olabilirim yardımcı olabilir misiniz?

    İyi Çalışmalar.

    #ust_menu ul li a{

    border:0px solid white;
    float:left;

    padding:5px 10px 5px 10px;
    margin:8px;
    margin-right:20px;

    color:#fff;
    font-size:25px;
    font-family:”Gabriola”;
    text-decoration:none;
    }
    .ie #ust_menu ul li a{

    padding:5px 10px 5px 10px;

    }

  • Kodu hatalı eklemişim özür dilerim. Düzeltme yapılöış hali:

    .ie #ust_menu ul li a{

    padding-top:20px;

    }

    bu şekilde eleme yapıyorum fakat iç boşluk ie de vermiyor

    • Bu tür problemlerle karşılaşırsanız, bazı kontroller yapmakta fayda var. Bu kontroller için tarayıcıların developer eklentileri çok işe yaramakta. Ben firebug kullanıyorum. İlk kontrol edilecek şey, eklediğiniz javascript kütüphanesinin sitenizin html etiketine gerekli classları oluşturup oluşturmadığı.

      Örneğin sizin kodunuz için; html etiketinde, ie ckassı tanımlımı bunu kontrol edin. Eğer js kütüphanesi düzgün şekilde eklendiyse, classlar gelmiş olmalı.

      classlar gelmişse fakat kodlarınız geçerli olmuyorsa, css hiyarerşisinde kodunuzu ezen başka kod vardır. Bunu aşmanın en basit yolu; !important kullanmaktır.

      .ie #ust_menu ul li a{
      padding-top:20px !important;
      }

      şeklinde kodunuzu düzenleyebilirsiniz.

  • Tamam hocam geri dönüş yaptığınız için çok teşekkür ederim. Söylemiş olduğunuz eklentiyi kullanıyorum oldukça faydalı. Bunun haricinde tarayıcı uyumsuzluğunu ortadan kaldırmak için responsive tasarım ve Bootstrap’ ı öğrendim. bu ikisi her türlü işimi gördü. Diğer arkadaşlar da eğer bu tür sorunlar yaşıyorlarsa bu konuda araştırma yapabilirler.

  • Hocam Merhaba,
    Benim sitem firefox ve chrom’ da normal açılıyor aynı zamanda ie10 ve ie11′ de de sorunsuz. Fakat ie9 ve düşük versiyonlarında hiç açılmıyor…Lütfen yardımcı olurmusunuz.Teşekkürler

    • büyük ihtimal eski tarayıcıların desteklemediği bir kod kullanmışsın. Onu iyice araştırıp çözmek lazım. Böyle uzaktan bişey diyemem.

      Ama fatih kaçak’ın da dediği responsive tasarım ve Bootstrap’ı araştırısan işini görebilir. Bootstrap bir çok şeyi standartlaştırıyor.

  • faydalı olabilecek açıklamalar için teşekkürler


Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

En Komik Tv Facebook Sayfası Yok Artık Facebook Sayfası