jQuery İle Tarayıcılara Özel Css Hazırlamak

Merhaba arkadaşlar bu makalemde sizlere navigator.userAgent userAgent bilgisini okuyup değerlendirmek için bir komuttur. Biz bu özelliği kullanarak sitemize gelen tarayıcıları belirleyip bu tarayıcılara özel css hazırlayacağız ve sunacağız. Bu fonksiyonlarla bir çok proje hazırlayabililirsiniz.

$.browser özelliği tarayıcının kendisi tarafından bildirilen, sayfaya erişen web tarayıcısı hakkında bilgi sağlar. Bu konuda en yaygın tarayıcı sınıfları (Internet Explorer, Mozilla, Webkit ve Opera) gibi sürüm bilgileri için seçenekler içerir.

Mevcut isimler şunlardır:

webkit (as of jQuery 1.4)
safari (deprecated)
opera
msie
mozilla

Çünkü $.browser platformu belirlemek için navigator.userAgent kullanır, Tarayıcılar kendileri tarafından kullanıcı bilgilerini sızdırmakta savunmasızdırlar.

Örnek





Browser info:



Çıktı


Browser info:
mozilla : true
version : 16.0

Açıklama: Bu fonksiyon true değeri döndürdüğünde altta vereceğim internet explorer tarayıcılarında kullanabilirsiniz. İf içinde kullanarak biraz çaba ile .css eklemesi yapabilirsiniz.

$.browser.msie;

Açıklama: Bu fonksiyonu script içinde yazdırıp google chrome için olduğunu anlayabilirsiniz.


if ($.browser.webkit) {
alert( "this is webkit!" );
}

Açıklama: Uyarı “Firefox 3 tarayıcılarında uyarı verecektir.


var ua = $.browser;
if ( ua.mozilla && ua.version.slice(0,3) == "1.9" ) {
alert( "Do stuff for firefox 3" );
}

Açıklama: Alt bölümdeki kodla belirli bir tarayıcıda özel bir css çalıştırabİlirsiniz..


if ( $.browser.msie ) {
$("#div ul li").css( "display","inline" );
} else {
$("#div ul li").css( "display","inline-table" );
}

Ben burada son olarak tarayıcılarımız için css oluşturmak için hazır bir kod veriyorum.



Veya



Bu kullanacağınzı kod şu tarayıcılarda geçerlidir.

İşte tipik bazı tarayıcı sonuçlarım şunlar:


Internet Explorer: 6.0, 7.0, 8.0
Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9
Opera: 10.06, 11.01
Safari/Webkit: 312.8, 418.9

İe 8 için ie7 uyumluluk görünümü olduğunu unutmayınız.

Örnek: Kullanıcının geçerli tarayıcısı tarafından kullanılan render motorunun sürüm numarasını döndürür. Örneğin, FireFox 4 2.0 (kullandığı Gecko sürümü) döndürür.







Verdiğim örneklere göre geliştirebilirsiniz

İnternet Explorer Sürümleri İçin Özel Css Hazırlamak

Merhaba arkadaşlar bu yazımda sizlere sitelerinizde genel olarak yaşadığınız css problemlerini bir döngü ile çözmeyi anlatacağım bu döngü ile çeşitli tarayıcılara özel css hazırlayarak siteleriniz üzerindeki kayma problemlerini çözmeniz mümkün duruma gelecektir.

Alt bölümdeki kodları

Tagları arasına koyarak çalıştırırabilirsiniz.






Chrome İçin Çözüm

http://bursa-bilgisayar.com/chrome-icin-ozel-css-tanimlamak.html

JQuery İle Çözüm

http://bursa-bilgisayar.com/jquery-ile-tarayicilara-ozel-css-hazirlamak.html

kodunu yapıştırıp, üç tane css dosyası oluşturuyoruz

(bursabilgisayar-ie8, bursabilgisayar-ie7 ve bursabilgisayar-ie6).

Bu dosyaların içine tüm stil kodlarını eklemeniz gerekmiyor. sadece menü ile ilgili kodları yapıştırmanızda işi çözecektir. Browserdan bakarak, padding ve margin değerlerini ayarlayın. Farklı ie sürümlerinde test etmek için ietester programını kullanabilirsiniz. Ben kendim tasarladığım sitelerde bütün tarayıcıları virtualbox içine kurduğum xp üzerindeki tarayıcılarda kontrol edip değişiklikleri yapıyorum.