Uzun zamandır Az Pişmiş Çok Bilmiş köşesini boşladığımı fark ettim. O nedenle belki de dönüşüm muhtesem olsun diye önemli bir CSS konusu patlatayım dedim. CSS’in kolaylaştırdığı ve zenginleştirdiği (zengin çünkü gereksiz kod yığınlarını anlamlı kod yığınlarına çeviriyor) front-end development safhası, browserların birbiri arasındaki farklılık nedeniyle bir kabusa dönüşüyor. Bu kabusu görmemek için de birçok tasarımcı eski metodlara sımsıkı bağlı yaşamakta. O nedenle yazacağınız stillerden çok browser arasındaki uyumsuzluğa odaklanmak gerekmekte. Ben de bu mühim konuya bu yazı ile bir baslangıç veriyorum.

CSS ile biçimlendirdiğiniz konteyner (DIV tags) etiketlerini bazı durumlarda iç içe kullanmak gerekebilir. Bu tip durumlarda da Internet Explorer 6 ve üstü browserlarda, her zaman dışarda kalan içerik bloğu içindekilerden bağımsız hareket eder. (Aşağıdaki resimde durumu daha net görebilirsiniz.) Bu tip durumlarda dışardaki DIV içinde ya sola çek (float:left;) tanımı eklenebilir. Fakat bu tanım da başka bir uyumsuzlugu yaratir.(Bu konuya has bir IE bug mevcut. Bu da ayri bir yazi konusu.)

Bura da bahsedeceğim yöntem bu kötü durumu ortadan kaldırıyor. Clearfix metodu olarak literatüre geçen bu CSS bloğu sayesinde çok kolay aşılabilmekte. İnternet üzerinde aynı isim altında farklı css blokları bulabilirsiniz. Genel olarak hepsinin yaptiği aynı olsa da yorumlamalar farklı olduğu için sadece yazım farkliııkları göstermekte. Benim sıklıkla kullandığım ve şu ana kadar çok memnun kaldığım hem hafif hem de pratik olarak clearfix metodu asağıda.

Bu halıyle artık daha fazla bir tanımlamaya gerek kalmadan konteyner (DIV Tags), içindeki konteynerları gerçekten kapsamasını ve minimum boyunu (height) buna göre ayarlamasını sağlamış oluyoruz.

Harici dosya hazır olarak direk projelerine import etmek isteyenler olur diye bir dosya hazırladım. Buradan indirip kullanabilirsiniz. Bu metot nasıl işler? Ne anlama geliyor bu kodlar diyenler için de olayı satır satır aşağıdaki resim üzerinde açıkladım.