Daha Temiz Bir Clearfix

Bir süredir Perishable Press’i inceliyorum. Yazılarını kurcalıyorum. Yazılardan bir tanesi diğerlerine nazaran daha fazla ilgimi çekti: The New Clearfix Method. Yani yeni clearfix method’u. Daha önceden bahsettiğim Overflow:Hidden – Bir .clearFix Alternatifi ‘indeki metodunun güncellenmiş hali.

Kısaca, IE-Mac versiyonu artık ortada olmadığı için eski metodta kullanılan Mac’e özel kodları kaldırıp daha sade bir kod çıkarmışlar. Ama bu kod kendi içerisinde bazı sorunlar içeriyor. Bunlardan birazdan bahsedeceğim. Benim bu konuda asıl ilgilendiğim kısım “margin collapsing” denilen problemin yorumlardan birinde çözülmüş olması. Sırayla gidersek:

Temiz Sade Clearfix

/* Coders' Grave - Temiz Sade Clearfix */
.group:before,
.group:after {
  content:".";
  display:block;
  height:0;
  overflow:hidden;
}
.group:after {clear:both;}
.group {zoom:1;} /* IE < 8 */

overflow

Önceki yazımda size overflow’u bir clearfix alternatifi olarak anlatmıştım. Hala da öyle. Ama bazı kısıtlamalar içeriyor. Ona da önceki yazıda kısaca bahsetmiştim.

Ama sadece kapsayan elementin içini kullanmak gibi bir kısıtlılığının olduğu unutulmamalı.

Overflow UygulanmışŞimdi bunu daha ayrıntılı anlatacağım. Örneğin bu sitede yazıların tarihi beyaz bloğun dışında yer alıyor. Yine aynı beyaz bloğun içerisinde sola yaslanmış yazılar ile sağa yaslanmış siteyle bağlantılı kısımlar yer alıyor. Bu durumda beyaz alanın normal akışına devam etmesi için ya overflow ya da clearfix uygulanmalı. İki uygulamada da beyaz alan aşağıya doğru uzamaya devam eder. Ancak; overflow:hidden uygulandığında tarih alanı bloğun dışında kaldığı için bu alanı keser ve göstermez. Bu yüzden her durumda bu metodu uygulamak mümkün olmayacağı için başka yöntemlerle çözüm bulmak gerekir…

“Margin” Bozulması, Kapsayan Elementin Dışına Çıkan Boşluk

Elementin dışına çıkan boşlukBu yönteme geçmemin en büyük sebebi. Bir elementin içindeki ilk elementin ‘margin-top‘u ya da son elementin ‘margin-bottom‘u varsa bu onu saran elementin dışına taşar. Halbuki siz bu margin‘lerin saran elementin içinde olmasını beklersiniz. Bu özellikle kenarları yuvarlak bir kutuyu uzayabilir yapmak için birden fazla element kullanmak zorunda olduğumuzda karşılaşırız. Ben bunu çözmek için saran elemente üstten ve alttan birer piksel padding ekliyordum. Yandaki resimde ortadaki bloğa üstten ve alttan 5px margin verildi. Bu margin bloğun bütünlüğünü bozup üstte ve altta bulunan yuvarlaklığı dışarı itti. Margin direk bloğa değil de içindeki başka bir elemente de verilebilirdi. Örneği basitleştirmek için böyle kullandım.

.container {padding:1px 0}

Bu durumda eklenen padding içinde bulunan elemenlerin margin‘lerini içeride tutmaya zorlar ve bloğu bütün tutar. Bunun da bazı dezavantajları var. Bu fazladan eklediğiniz padding tasarımınıza uygun olmayabilir.

Bu yazıyı kurcalarken birkaç makale daha okudum ve bu üstteki sorunlara çözüm bulan bir yöntem gördüm.

Bu yöntem hem yaslanan element hem de fazladan boşluk problemini çözüyor. Ama bunun da anlamsal bir problemi var. Dan Cederholm “Handcrafted CSS: More Bulletproof Web Design” isimli kitabında bu anlamsal problemi çok güzel açıklamış ve güzel bir çözüm bulmuş.

Şöyle ki; bu clearfix yöntemini iki şekilde kullanabilirsiniz:

1.si

Bu özellikleri clearfix kullanmak istediğimiz elemente CSS içinden atarız.

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.column:before,
.column:after {
  content:".";
  display:block;
  height:0;
  overflow:hidden;
}
.clearfix:after, .container:after, .column:after {clear:both;}
.clearfix, .container, .column {zoom:1;} /* IE < 8 */

Bu yöntem sayesinde fazladan HTML eklemesi yapmaktan kurtulursunuz. Tarayıcılar CSS‘i önbelleğe aldıkları için fazladan HTML yüklemesinden kurtulmuş olursunuz. Ama bu yöntemle eğer büyük bir siteyle uğraşıyorsanız çok fazla elemente bu özelliği ekleyeceğinizden CSS dosyanız şişer.

2.si

HTML‘de clearfix uygulamak istediğiniz elemente “clearfix” sınıfını eklersiniz.

<div class="header clearfix">
  <h1>Site Name</h1>
  <p>Site Description</p>
</div>

<div class="container clearfix">
  <div class="content clearfix">
    <h1>Header</h1>
    <p>Lorem ipsum dolor</p>
  </div>

  <div class="column clearfix">
    <h2>Header 2</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

Bu durumda elementlerimiz içinde bir sürü clearfix bulunuyor. Sanki sürekli birşeyler bozuluyormuş da düzeltiliyormuş gibi. Bu beni biraz rahatsız ediyor. Ama bu benim, sizi rahatsız etmeyebilir. Bu anlam bozukluğuna Dan Cederholm’un bir çözümü var. Özetle, madem bu clearfix yaslanan elementleri bir grupta topluyor, biz de bunun adına clearfix değil de group deriz. Böylece sürekli bir sorunu düzeltiyormuşuz gibi görünmeyiz.

Ben de bu fikri yeni clearfix yöntemine uyguladım. Artık adı group yöntemi oldu.

En sonunda şu andaki en son clearfix metodunu oluşturulmuş oluyor…

Güncelleme, 14 Kasım 2011: Nicolas Gallagher’ın micro clearfix‘i ile

.group:before,
.group:after {
  content:"";
  display:table
}
.group:after {clear:both}
.group {zoom:1} /* IE 6/7 (hasLayout'u tetikler) */