Cross Browser: CSS Hacks vs. Javascript Methods

IE 9 ve altı için <!–[if IE 9]> vb. tanımlamalarla tarayıcıya özel css yüklenebiliyordu. Fakat IE 10 ile birlikte bu tanımlamalar devre dışı bıraklıdı.

bkz. http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/

IE 10 ve üstü için spesifik tanımlamalar yapma ihtiyacı doğduğundan bununla ilgili bir araştırma yaptım.

Diğer tarayıcılar için bu tarz bir tanımlama bulunmuyor. Arayüz geliştiriciler genelde CSS Hack kullanarak tarayıcılara özel çözümler üretiyorlar.

Ancak Javascript kullanarak  <html> tagına tarayıcı adı, tarayıcı sürümü ve işletim sistemi class’ı yazdırmak ve/veya html dokümanına tarayıcıya özel sitil dosyası yazdırmak mümkün.

CSS Hack Kullanmanın Artıları

  • Dosyanın tek seferde yüklenmesi
  • Yapılan düzeltmelerin Javascriptin etkinleştirilmediği durumlarda da çalışıyor olması

CSS Hack Kullanmanın Eksileri

  • W3 standartlarının dışına çıkmanın kaçınılmaz olması

Javascript Metodlarının Artıları

  • Tarayıcıya özel tanımlamaların diğer tarayıcılarda yüklenmemesi
  • İlgili düzeltmelerin kolay ulaşılabilir/geliştirilebilir olması
  • Standart yazımın dışına çıkmayı gerektirmemesi

Javascript Metodlarının Eksileri

  • Yapılan düzeltmelerin Javascriptin etkinleştirilmediği durumlarda çalışmıyor olması
  • İnternet bağlantısına, sunucu ve/veya tarayıcı performansına bağlı olarak Javascript yüklenene ve çalıştırılana kadar, sayfanın düzeltilmemiş halininkullanıcı tarafından görülebilir olması

Biz Javascript metodunu kullanmayı tercih edeceğiz. Neden?

Günümüzde javascriptin çalışmadığı bir tarayıcı yok denecek kadar azdır ve arama motoru robotları için de sitenin görünümünün bir önemi yoktur; yani birinci eksiklik göz ardı edilebilir.

İkinci hususta da, günümüzün internet bağlantı hızını ve bilgisayar teknoloji düzeyini göz önüne aldığımızda, yaklaşık 5kb boyutunda bir javascript dosyası kullanılması, scriptlerin herhangi bir kütüphaneye ihtiyaç duyulmayacak şekilde(pure javascript) kodlanması ve ilgili script dosyasının head tagında, css’lerden hemen sonra çalıştırılması durumunda, kullanıcı sayfayı görüntülediğinde herhangi bir gecikme olmadan sayfanın düzeltilmiş halini görebilecektir.

Kullanım alanı örnekleri;

  • iOs cihazlarda AppStore‘a giden resimli bir bağlantı oluşturmak için html.iOs class’ına bağlı olarak ilgili bölümü görünür yapabiliriz. Aynı şey Android ve Windows Phone cihazlar için de geçerli.