daha iyi net

CSS’e geçiş, çok da pratik olmayan bir süreçtir. Çoğu zaman yeni başlayan meraklı, CSS’in yarattığı sorunlarla boğuşmaktan sıkılarak eski metodlara geri döner. Bunun sebebi aslında CSS’in kendisi değil, keyfi bir şekilde CSS yorumlayan browser programlarıdır. Nitekim, float ile tanımalanan bir içerik bloğu, Explorer’da, Opera’da, Firefox’da ve diğer platformlarda farklılıklar gösterir. Kısmen çeviri, kısmen alıntı ve derleme olan bu yazıdaki clearfix metodu bu duruma yardımcı olabilecek bir css pratiğidir.

Bordürlü ya da zemin desenli bir blok içerisinde float özelliğine sahip bir blok tanımlarken hepiniz fark etmişsinizdir. Konteyner, içerisindeki float özelliğine sahip blokun boyutunu kaale almaz ve içeriğindeki görsel elemanlar bitince bloku kapatır. Bunun sonucunda float ile tanımlanmış blok, diğerine yapıştırılmış bir post-it gibi aşağıdan sarkar. Bu, Explorer’da bazen geçerli olmayabiliyor; konteynere boyutlama ile ilgili değerler vermişseniz W3C standardına rağmen Explorer bunu yanlış yorumlayarak istediğimiz şekilde göstermekte. Opera 7 ise IE yolundan gitmeye hevesli olduğundan aynı yorumlamayı o da yapmakta.

Oysa W3C standardında float ve clear tanımlamalarının kullanımı için konteynerdeki son öğeden sonra clear kullanımıyla konteyner float verilmiş iç blokları da kapsaması sağlanması önerilir. Buna uygun olarak çoğu tasarımcının kullandığı metod şuna benzer bir yaklaşım oluyor:

Bu yöntem pratik ve kolay uygulanabilir olsa da daha karışık sayfalarda bir sürü fazladan clear blokları tanımlamasına yol açmakta ve kodumuzu ideal halden uzaklaştırmakta. Sonuçta CSS ve XHTML kullanmamızın önemli sebeplerinden biri, gereksiz kod kullanımına son vererek sadece en gerekli tanımlayıcı kodları kullanmak istememiz.

Matt Brubeck sitesinde bu konuyla ilgili CSS2 odaklı bir düzenlemeyle bu problemi aşmakta. :after ikincil tanımlamasıyla HTML kodda gözükmeyen bir içeriği, konteynere ekleyerek her float blokun konteyner bloku tarafından kapsanmasını sağlıyor.

.item {
border: 1px solid black;
padding: 0.5em;
}
img {
float: left;
}
.item:after {
content: “”;
display: block;
height: 0;
clear: both;
}

:after ikincil tanımlaması, Mozilla 1.x, NS6 ve NS7 ve Opera 7′de düzgün çalışmakta. Windows ve Macintosh üzerinde IE5 ve IE6 tarafından desteklenmemekte. CSSCreator sitesinin yaklaşımına göre bunu biraz daha ilerletirsek:

.floatcontainer:after{
content: “.”;
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

Eklenen şey, tamamen bir noktadır. Yüksekliği ve font boyutunu sıfırlayarak, görünürlüğü de kaldırarak eklenen bu noktanın bütün bir boş satır gibi gözükmesini engellemiş oluruz. display:block’un kullanılma sebebi, konteyner’ın inline olmasından ötürü bu blokun da inline değeri almasını engellemek ve clear özelliğini kullanmak istememiz. Bunun tek sebebi yine farklı browser’larda yorum hatasından kaçınmak; çünkü içeriği olmayan bir blok ögesi bir takım browser’larda sorun çıkarabiliyor. IE Mac için bazı problemlerle karşılaşacağız; bunları da temizlemek için ufak bir css-hack uyguluyoruz. :after tanımlamasını dikkate almayan IE/Win kendi yorumu olan auto-clear’i kullanacaktır. Ama bu, ancak bir boyutlama verilmişse gerçekleşebilir. Genellikle ölçü belirtmek çok da tercih edilmeyen bir durum olduğundan sadece IE/Win %1′lik bir yükseklik görecektir. Ama IE’nin diğer bir uyumsuzluğu bu hack’i geçerli hale getiriyor ve tüm bloklar genişletilerek içlerindeki blokları kapsaması sağlanıyor. IE Mac’in bu kısmı görmemesi de comment kısmının bir escape -yani backslash işareti- ile kapatılmasından comment satırının aslında devam ettiğini düşünmesi sayesinde oluyor. Sondaki comment kısmı da zaten bunun için bulunmakta. Peki sadece IE nasıl bu tanımlamayı görüyor da diğer browser’lar onu dikkate almıyor? IE html blokunun dışında onu kapsayan sanal bir blok varmış gibi hareket etmekte. Bizim uyguladığımız hack de o sanal bloku adreslemek; bu sayede sadece IE bunu fark ederek işleme sokuyor. display:inline-block, IE/Mac’de karşılaşacağımız diğer bir sorunu, blokun display tanımlamasını düzeltmesini sağlıyor. Alex Robinson bu konuyla ilgilenerek inline-block’un daha önceleri kullanılan inline-table hack’inden daha öncelikli olduğunu tespit etmiş.

Bu içerik, artık yukarıya yapışmadan gerekli mesafeyi bırakarak olması gerektiği gibi gözükür.

.clearfix:after{
content: “.”;
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.clearfix {
display: inline-block;
}

/* IE Mac için hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display:block;
}
/* hack bitişi */

Bu haliyle artık ikincil bir clear tanımlamasına gerek kalmadan konteynerın float blokunu gerçekten kapsamasını ve minimum boyunu buna göre ayarlamasını sağlamış oluyoruz. Bu tekniklerin bir araya getirilmesiyle gerçek anlamda bir clearfix metodumuz var; Doug, Mark Hadley, Matt Keogh, Holly’n John ve Tony Asslet‘in yardımlarıyla.

This entry was posted on Tuesday, September 19th, 2006 at 10:24 pm and is filed under css, web teknolojileri. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.