SASS ve LESS ile belirli tarayıcıları ve cihazları hedef almak

Giriş

Mobil tarayıcıları da işin içine katarsak eğer, çoğu zaman yazdığımız CSS stillerine ek olarak belirli tarayıcıları hedefleyen kodlar yazmak zorunda kalıyoruz. Örneğin Internet Explorer 10 ve 11 sürümlerinde ve Safari'nin 6 versiyonunda CSS Flexbox özniteliğinin modern tarayıcılarda beklenildiği gibi davranmanması gibi. Eğer gerçekten adam akıllı stiller yazıyorsanız ve geçmişten bu yana arayüz döken biriyseniz, hangi tarayıcıların hangi durumlarda nasıl davrandığını az çok tahmin edebiliyorsunuz. Örneğin Internet Explorer'ın eski sürümlerini hedef alan stiller ekleyebilmek için, hatırladığımız üzere ekstra stil dosyaları çağırmak zorunda kalıyorduk.

<!--[if lt IE 10]><!-->
  <link type="text/css" rel="stylesheet" href="/stylesheets/ie.css" />
<!--<![endif]-->

Yukarıda yazmış olduğum Internet Explorer'ı hedef alan conditional statement'lar Internet Explorer 10 ve yukarısından itibaren desteklenmediğinden ötürü, 3. parti Javascript eklentilerine ya da tarayıcının Internet Explorer olup olmadığını belirten ekstra class'lar ve kodlar yardımı ile duruma uygun ekstra stiller yazıyorduk.

Bu yazıda paylaşacağım şey ise, tek bir satırlık Javascript kodu ile bütün tarayıcıları, cihazları ya da İşletim sistemlerini hedef alabileceğiniz stiller yazabilmenize yarıyor.

Javascript Kodu

Bu tek satırlık kod ile her tarayıcıya has değişen navigator.userAgent değerini html tag'ına data-browser özniteliği olarak yazdırıyoruz. Dökümanınızın head ya da body tagları arasında herhangi bir yere yapıştırabilirsiniz.

document.documentElement.setAttribute("data-browser", navigator.userAgent);

Aşağıda Windows 10 x64 işletim sistemine ait Mozilla Firefox tarayıcısına özel navigator.userAgent değerini paylaşıyorum:

"Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0"

SASS ve LESS fonksiyonları

Aşağıda paylaştığım fonksiyonlar ile tarayıcılara has navigator.userAgent özelliğini kullanarak normal stil akışı içinde stiller yazabiliyoruz. Bu fonksiyonların çalışma mantığı data-browser niteliğinde geçen değerlerle eşleşmesine dayanıyor. Yani örneğin mobil cihazları hedeflemek için "Mobil", Windows işletim sistemini hedeflemek için "Windows NT" yazıyoruz gibi. (Değerler büyük / küçük harfe duyarlı)

SASS Fonksiyonu

@mixin browser($browsers: Mozilla) {
  @each $browser in $browsers {
    html[data-browser*="#{$browser}"] & {
      @content;
    }
  }
}

LESS Fonksiyonu

SASS'ın kendi içinde for döngüsü native olarak geldiğinden, LESS için for ve each döngüsü özelliğini edinebilmek için less.curious kütüphanesinden faydalanıyoruz.

@import "for-loop.less";


.browser(@browser: Mozilla, @content) {
  .for(@browser);
  .-each(@value) {
    html[data-browser*="@{value}"] & {
      @content();
    }
  }
}

Fonksiyonların kullanımı ve Örnekler

SASS Örnekleri

SASS ile Android Cihazlarda butonu gizlemek

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
  @include browser(Android) {
    display: none;
  }
}
    

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
}
html[data-browser*="Android"] .btn-download {
  display: none;
}
    

SASS ile iç içe geçmiş stiller yazmak

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      @include browser("MSIE 11") {
        display: inline-block;
      }
    }
  }
}
    

ul {
  margin: 0;
  padding: 0;
}

ul li a {
  display: block;
}

html[data-browser*="MSIE 11"] ul li a {
  display: inline-block;
}
    

SASS ile birden çok tarayıcıyı hedef alan stiller yazmak

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      @include browser("Android 4.0" "Android 4.1" "Android 4.3") {
        display: inline-block;
      }
    }
  }
}
    

ul {
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
}

html[data-browser*="Android 4.0"] ul li a,
html[data-browser*="Android 4.1"] ul li a,
html[data-browser*="Android 4.3"] ul li a {
  display: inline-block;
}
    

LESS Örnekleri

LESS ile Mobil Cihazlarda butonu gizlemek

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
  .browser(Mobile, {
    display: none;
  });
}
    

.btn-download {
  display: block;
  width: 100%;
  margin: 0 10px;
}
html[data-browser*="Mobile"] .btn-download {
  display: none;
}
    

LESS ile iç içe geçmiş stiller yazmak

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      .browser("iPad", {
        display: inline-block;
      });
    }
  }
}
    

ul {
  margin: 0;
  padding: 0;
}

ul li a {
  display: block;
}

html[data-browser*="iPad"] ul li a {
  display: inline-block;
}
    

LESS ile Apple cihazlarını hedef alan stiller yazmak

ul {
  margin: 0;
  padding: 0;
  li {
    a {
      display: block;
      .browser("iPad" "iPod" "iPhone", {
        display: inline-block;
      });
    }
  }
}

    

ul {
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
}
html[data-browser*="iPad"] ul li a,
html[data-browser*="iPod"] ul li a,
html[data-browser*="iPhone"] ul li a {
  display: inline-block;
}
    

Birçok tarayıcı, işletim sistemi ve cihazlara ait userAgent listesine user-agents.me adresinden erişebilirsiniz