Context Aware Front End

Merhabalar herkese, Dün Türkiye’nin ilk front end konferansı olan The Frontiers:Mini‘de konuşmacıydım. Anlattığım konu Context Aware (Bağlama Duyarlı) Front End. Özetle kullanıcının bulunduğu yeri, ortamı, hava sıcaklığını, saati, kullandığı cihaz gibi bilgileri kullanarak kullanıcıya içerik sunmak. Kalabalık bir topluluk önünde yaptığım ilk konuşmaydı. Bu yüzden çok heyecanlıydım, dilim damağım kurudu 🙂 Yine de benim için […]

IE9 CSS Hack

Internet Explorer 9 da girdi hayatımıza vatana millete hayırlı uğurlu olsun! Aman CSS3 destekliyormuş, aman HTML5 destekliyormuş diye sevinirken hevesim kursağımda kaldı. Kurduğum daha ilk gün yine tarayıcı farklılığı yaşadım :-/ Hack aramalarım sonuç vermeyince eski hackleri harmanladım. Ortaya çıkan  şu hack işe yaradı bende:    

Chrome Textbox Boyutlandırmasını Önleme

Chrome tarayıcıda, kullandığınız textbox resizable (boyutlandırılabilir) geliyorsa ve bu durum tasarımını bozuyorsa, stil dökümanınızda aşağıdaki tanımlamayı yapmanız bu sorunu çözmede yeterlidir. textarea { resize: none; }

WordPress: Aktif linke stil atama

Küçük ama işinize yarayabilecek bir ipucu: WordPress’te açık olan kategorinin rengini menüde farklı bir şekilde belirtme ihtiyacı duyduğum bir çalışmada kategorileri sidebar.php’de aşağıdaki gibi yazdırdım. Bu fonksiyonun html çıktısı

Chrome için CSS Hack

Google Chrome için uygulanan hackini Firefox 3.5 algıladığından işe yaramıyor. Şu hack işinizi görebilir: Örneğini de buradan inceleyebilirsiniz.

İçeriğe Göre Genişleyebilen Yuvarlak Köşeli Kutular

CSS ile yuvarlak köşeli kutu yapmanın bir çok yöntemi var. Benim anlatacağım yapı ise 4 yuvarlak köşeden ve iç içe dört div’den oluşuyor.

“position: absolute;” Olan Bir Nesneyi Yatayda Ortalama

Sabit konumlandırdığınız(position: absolute) bir nesnenin yatayda ortalanmasını istiyorsanız margin-left:-(nesnenin genişliğinin yarısı) vermeniz yeterlidir. Örnek 100px genişliğinde bir img var elimizde. O zaman kodumuz aşağıdaki gibi olacaktır.

Tek Karakterle IE6 ve IE7 İçin Stilinizi Farklılaştırın

Cross browser çalışırken bir çok hack kullanıyoruz. Farklı tarayıcılar için farklı stil dökümanları hazırlıyoruz ya da tek dökümanda satırlarca fazladan kod ekliyoruz tarayıcıya göre şerbet vermek için:) Brian Cray‘in yazdığı yazıyla bir aydınlanma yaşadım:) Yazdığınız CSS özelliğinin IE7 ve altında görüntülenmesi için özellikten önce * , IE6 ve altında görüntülenmesi için _ yazmanız yeterli.

Firefox’un farklı versiyonları için hackler

Firefox’un tüm versiyonları için CSS Hackleri

Sayfa İçeriğini Dikey Ortalama

Bir siteyi W3C standartlarında, sabit yükseklik kullanmadan dikey olarak ortalamak XHTML kodlayıcısı için genelde sıkıntı vericidir. Yatay ortalama için genellikle CSS koduna margin: auto özelliğini eklemek yeterli olabiliyorken, dikey ortalama için bu kadar basit bir CSS stili bulunmamaktadır.