Kategori: Arayüz Geliştirme

Artık web projelerinde mümkün olan tüm animasyonlar için CSS3 geçişlerini kullanıyoruz (CSS3 Transitions). Eğer IE8 ve 9 için destek vermemiz gerekirse, Modernizr ve jQuery kullanarak fallback uyguluyoruz. Ben bu örnekte fallback olayına girmedim fakat tekrar fırsat bulduğumda yazıyı güncelleyeceğim.

Yazının konusu olan, sadee CSS3 kullanarak fade in menu yapmanın püf noktasını geçtiğimiz günlerde, Barcin.com’u kodlarken tam olarak kavradım. Aylardız zaten CSS3 menü kullanıyordum fakat bunu Javascript ile menü elemanlarına mouseenter/mouseleave anında class vererek/kaldırarak yapıyordum ve timeout kullanmam gerektiği için de %100 verimlilikte çalışmıyordu. Şimdi sizinle paylaşacağım ipucu sayesinde, Javascripte gerek kalmadan, menünüzü sadece CSS3 kullanarak stabil bir şekilde çalıştırabileceksiniz.

Projelerin geliştirme aşamasında sıklıkla console.log deyimini kullanıp, sonucu izleyerek çalışmamızı sürdürürüz. Hataları daha çabuk farketmek ve kademe kademe ilerlemek için oldukça elverişli bir yöntem.

Bunun yanında console.info, console.warn, console.error, console.clear gibi metodlarından da faydalanırız. Hata yakalarken, aradığımızı daha kolay görelim diye ya da  sırf renkli bir görüntü oluşması için :)

Ve projenin sonunda bu logları tek tek arayıp yoruma alırız. Herkes böyle yapmıyordur muhakkak ama yapanlarınız var, biliyorum, ben de sizden biriydim çünkü :)

Temelde iki sebeple yaparız bunu:

  1. Javascritp console desteği olmayan tarayıcılarda javascript hatası almamak için
  2. Son kullanıcı bu logları görmesin diye

İlki daha önemli olmakla beraber, ikisi de makul sebepler.

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.

Chrome’da bazen sadece kendi bilgisayarınızda yazı tipi sorunu olabiliyor; tespit ettiğiniz yazı tipi hatasını, başka bir bilgisayarda test ettiğinizde aynı hatayı almadığınızı görüyorsunuz. Bunu sebebi “Yazı Tipi”dir. Localde yüklü olan fontu kullanmaya yönelik aşağıdaki gibi bir css kullanımı yaparız:

font-family: 'Helvetica Neue', Helvetica, sans-serif;

Very useful website for this: http://responsejs.com/labs/dimensions/