Bir CSS hastalığı: Absolute ve Float savurganlığı

Ne tarafa baksak, hangi web sitesini incelesek saç baş yoluyoruz. Birileri bu işi öğretirken tüm DIV nesnelerine float:left verin demiş, zorlanırsanız da position:absolute deyip işin içinden çıkın diye öğütlemiş. Ama kazın ayağı öyle mi? Bu şekilde ellerine HTML kodları alan yazılımcıların ne çektiklerini çok iyi biliyoruz.

Absolute pozisyon kullanımı görece kolaydır, hizalaması ve yerleştirmesi yön mesafelerini belirtmekle hallolunur. Peki dinamik içerik yönetimlerinde (CMS) böyle midir? Kesinlikle hayır. Özellikle esnek içerik yönetim sistemlerinde, modüler yapıların yer değiştirme olasılığı yüksektir. Kullanıcıyı belli kalıplara hapsetmek isteyebilirsiniz, buna karışamayız ama birincil öncelik; her alanda serbestlik sunmaktır.

Bir örnek verelim. Aşağıda bir yerde denk geldiğimiz bir HTML yapısı var. Arkadaşımız menüyü 2 parçaya bölerek logoyu ortalarına almak istemiş.

<ul class=”nav-sol”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>
<div class=”logo”>LOGO</div>
<ul class=”nav-sag”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>

Bu aşamada yazılım yapan arkadaşımız, menüyü tek bir kaynaktan nasıl dinamik yapabilirim diye kara kara düşünür. Aslında olması gereken kod şu şekildedir:

<div class=”logo”>LOGO</div>
<ul class=”nav”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>

Şekilde görüldüğü üzere, yazılımcı arkadaşlar tek bir kod kaynağı ile menüyü tekrarlayabilir ve kolayca dinamik hale getirebilir. Logoyu ortalamak ise CSS yazan arkadaşın maharetine kalmıştır. Yukarıdaki gibi iki parçalı kodlama sisteminde, haliyle position:absolute kullanımı elzem olacaktır. Bu durumda bu menüyü kapsayan alana position:relative vermek de kaçınılmaz olacağı için, gereksiz bir kod yığılması baş gösterecektir.

Önerimiz: Browser varsayılanların iyice kavranması ve nerelerde yeterli gelip gelmediğinin öğrenilmesidir. Her nesneye float:left özelliği atamak, tonla gereksiz kod yazmayı mecburi kılar. Bu da zaman kaybı ve iş yığılmasına sebep olur.

“Az kod, çok iş” diyoruz.

Paylaş

  • Facebook
  • Twitter
  • Google Plus
  • LinkedIn
  • Pinterest
  • RSS

Bir CSS hastalığı: Absolute ve Float savurganlığı” üzerine 3 düşünce

jQmer için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>