Css Browser Secici IE 11 Eklemesi | Css Browser Selector IE 11 Adding

Selamlar olsun, uzuuuuuun zamandır yazmak istiyorum ama yazamıyordum. Daha önceden hazırladığım blogları sırasıyla paylaşacağım. Bunlardan bir tanesi de Front-End Developerlarının (Web Arayüz Yazılımcıları) çok çok işine yarayan Css Browser Seçici nin IE 11 için düzenlemiş olduğum hali.

Temel olarak IE 11 e güncellendiğinde Microsoft şirketi Internet Explorer ın tabanını değiştirmesi oldu daha modern bir developer tool u eklediler ( Her ne kadar beta sürümde kasılmalar olsa da..)

Bu güncellemeler arasında Microsoft şirketi Internet Explorer ın User Agentlarını değiştirerek

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

yapması oldu. Aslında degişiklik bu kadar basit bişey değil ama bizi gerisi ilgilendirmiyor şimdi.

Css Browser Selector ın mimari olan Rafael Lima JS dosyasını güncellemediğinden dolayı ufak bir google araştırması sonrasında ben yapmaya karar verdim ve sonuç olarak bunu sizinle paylaşıyorum.

/*
CSS Browser Selector v0.4.0 (Nov 02, 2010)
Rafael Lima (http://rafael.adm.br)
http://rafael.adm.br/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u) {
    var ua = u.toLowerCase(),
        is = function (t) {
            return ua.indexOf(t) > -1
        }, g = 'gecko',
        w = 'webkit',
        s = 'safari',
        o = 'opera',
        m = 'mobile',
        h = document.documentElement,
        b = [(!(/opera|webtv/i.test(ua)) && /msie\s(\d)/.test(ua)) ? ('ie ie' + RegExp.$1) :
             is (!(/opera|webtv|firefox/i.test(ua))&&/trident|msie/i.test(ua)&&/(msie\s|rv\:)(\d+)/.test(ua))?('ie ie'+(/trident\/4\.0/.test(ua) ? '8' : RegExp.$2)):
             is('firefox/2') ? g + ' ff2' :
             is('firefox/3.5') ? g + ' ff3 ff3_5' :
             is('firefox/3.6') ? g + ' ff3 ff3_6' :
             is('firefox/3') ? g + ' ff3' :
             is('trident/7.0') ? ' ie11' :
             is('gecko/') ? g :
             is('opera') ? o + (/version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1 : (/opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) :
             is('konqueror') ? 'konqueror' :
             is('blackberry') ? m + ' blackberry' :
             is('android') ? m + ' android' :
             is('chrome') ? w + ' chrome' :
             is('iron') ? w + ' iron' :
             is('applewebkit/') ? w + ' ' + s + (/version\/(\d+)/.test(ua) ? ' ' + s + RegExp.$1 : '') :
             is('mozilla/') ? g : '', is('j2me') ? m + ' j2me' :
             is('iphone') ? m + ' iphone' :
             is('ipod') ? m + ' ipod' :
             is('ipad') ? m + ' ipad' :
             is('mac') ? 'mac' :
             is('darwin') ? 'mac' :
             is('webtv') ? 'webtv' :
             is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') :
             is('freebsd') ? 'freebsd' : (is('x11') || is('linux')) ? 'linux' : '', 'js'];
    c = b.join(' ');
    h.className += ' ' + c;
    return c;
};
css_browser_selector(navigator.userAgent);

Önemli not: IE Sürümlerinde html e atacağı class ie7, ie8, ie9 olacaktır. SADECE Internet Explorer 10’da ie1 olarak class atmaktadır. Internet Explorer 11 de ise html e ie11 yazacaktır.

 

Umarım yararlı olmuştur.

 

Sorularınız var ise sorabilirsiniz.

5 Yorum var
  • captain Webmaster
    Ağustos 20, 2014

    Teşekkürler çalışmanız için ama 22. satırda bir hata çıkıyor ve işlemi gerçekleştirmiyor.

    • Emre Dardağan
      Ağustos 20, 2014

      Teşekkürler, konuyla ilgili scripti güncelledim son haline ulaşabilirsiniz.

      İyi çalışmalar.

  • plazma
    Haziran 17, 2015

    Merhabalar hocam elinize sağlık, bunu kullanarak tarayıcı detect ettikten sonra istediğimiz bir sayfaya nsaıl yönlendirirz ? Esas sorun html 5 radio player dan kaynaklı, tarayıcılardan brinde çalışan diğerinde çalışmıyor mobilde de aynı mobilde malum flash desteklenmiyor safaride çalışan andriodte çalışmıyor bunu nasıl çözeriz html5 css ile ?

    • Emre Dardagan
      Haziran 22, 2015

      Selam hocam bu makale ve script sadece browserlarin adini html e class olarak atar. Senin istedigin daha cok bu browser ise sunu yapsin filan sanirim.

      Mobillerde baska islemler yapmak istiyorsan kullandigin browserin mobil olup olmadigini denetleyen script sorgularida mevcut;

      function detectmob() { 
       if( navigator.userAgent.match(/Android/i)
       || navigator.userAgent.match(/webOS/i)
       || navigator.userAgent.match(/iPhone/i)
       || navigator.userAgent.match(/iPad/i)
       || navigator.userAgent.match(/iPod/i)
       || navigator.userAgent.match(/BlackBerry/i)
       || navigator.userAgent.match(/Windows Phone/i)
       ){
          return true;
        }
       else {
          return false;
        }
      }
      
      

      yukarida sadece userAgent’lari karsilastirarak hangi browserda oldugunu anlayabilirsin ona gore islemlerini siralayabilirsin.

      Gec cevap icin kusura bakma. Yardimci olabilecegim bir konu var ise tekrar yazabilirsin. 🙂

  • FeelPlanet
    Aralık 27, 2015

    Thank you for this article! I hadn t really thought about using this method to narrow down the browser using CSS. Ignore the naysayers. It s still a great method.

Cevapla

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