Bursa Bilgisayar

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

<html>
<head>
  <style>
  p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
  div { color:blue; margin-left:20px; font-size:14px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Browser info:</p>

<script>
    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo( document.body );
    });
</script>

</body>
</html>

Çı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.

<script type="text/javascript">
    if (navigator.userAgent.toLowerCase().indexOf('chrome')!=-1){
    document.write('<link rel="stylesheet" type="text/css" href="bursabilgisayar.css"/>');
    }
</script>

Veya

<script type="text/javascript">
if($.browser.webkit)
{
$('.bursabilgisayar').css({...})
}else
{

}
});
</script>

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.

<html>
<head>
  <style>
  p { color:blue; margin:20px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p></p>

<script>
$("p").html( "The version number of the rendering engine your browser uses is: <span>" +
                $.browser.version + "</span>" );
</script>

</body>
</html>

Verdiğim örneklere göre geliştirebilirsiniz

Related posts

263 thoughts on “jQuery İle Tarayıcılara Özel Css Hazırlamak

  1. The main problem is, there is a lot of scam opportunity out there about making money with video games.
    Another advantage which comes from the Nintendo Wii
    Remote having Game – Cube ports is that you can also connect a Game Boy Advance along
    with an e-Reader. In addition, gamers who rent can try games that they otherwise may never
    have tried.

  2. Dates coincide with actual dates of important events in World War II.
    When other makers of gaming systems joined the wireless
    technology race many users of Sony games wanted it to become listed on immediately but Sony was taking
    it is time to create quality PS3 Wireless Controller
    that will stand the exam of your time. Call of Duty:
    Roads to Victory is first person action shooter game
    and has three different campaigns to play with variety of fun level.

  3. Of course, what a great site and advisory posts, Can I add backlink – import your rss feed? Regards, Reader.

  4. Neա іtemizing Powerfilm 60w foldable photo voltaic stаllion

    SЕLECТ TO CОӍPAREQUICK feеlings$399.zero0
    / еаchNature еnergy a hundred and twenty-Watt ρortable Mօnoсrystalline Silicon solar Panwl ffor 12-Volt Charging in Briefcase
    DеsignModel# fіfty five702

Bir Cevap Yazın

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

 Characters available