Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.

1- Kutu Modeli ve CSS hillesi

Kutu modeli sorunları ve çözüm önerilerinden bahsettiğimiz makale ve bu konunun önemi açısından bu css hilesini başa aldık. Gerçekten birçok yerde karşılaştığımız bu sorun kullanılması en karmaşık gelen bir sorundur. Genel mantık olarak ie’nin özellikle 6 ve garip mod daki diğer tarayıcılarında farklı görünmesini engellemek için tantek çelik tarafından oluşturulan bir hiledir.

Kutu genişliği tanımlanmışsa ve padding veya kenar çizgiside tanımladığımızda uygulanan bu yöntem için yazdığımız kod aşağıdadır

#icerik{
width:230px;
padding:10px;
margin:5px; /* Bundan sonraki kısmı ie5win sakla */
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
html>body #icerik {
width:200px;
}

Sorun olan kodumuza biz sadece

voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
html>body #icerik {
width:200px;
} 

Bölümünü uygulamamız yeterlidir. Daha sonra eğer genişlik ise genişliği yükseklik ise yüksekliği ayarlamamız gerekir. Daha sonra html>body #icerik kısmından #icerik yerine kendi nesne adımızı yazmalıyız.

2- Float uygulanmış nesnelerin kapsayamama sorunu

Aslında clearfix olarakta adlandırılan bu sorun bir çok yerde başımıza dert olur. Alıştıktan sonra hemen uygular ve geçeriz.

Sorunumuzun genel tanımı Float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir.

Kodumuz;

.kapsul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 

.kapsul {display: inline-block;} 

/* IE-mac de bu bolumu sakla \ */
* html .kapsul {height: 1%;} 

.kapsul {display: block;}
/* IE-mac bu bolumu saklam artik */ 

Bu kodda .kapsul yerine kendi nesne ismimizi yazmamız yeterlidir.

3. IE6′un Tekrarlayan Karakter Sorunu

Bu hata birden fazla float uygulanmış iç içe elementlerde meydana gelir. Son float uygulanmış elementin son karakterleri tekrarlar. Soruna nedeni html yorum satırlarıdır ve çözüm için

<!--[if !IE]>Yorumunu buraya yaz <![endif]--> 

Kodunu yazarız. Ben burada yorum yazarken bu sorunla karşılaşabilirim diye tüm yorumlarımı bu şekilde yazarak bu sorundan kaçınmaya çalışıyorum.

4. IE6′nın min-height Sorunu

Son zamanlarda gelen işlerde çok rastlamam nedeni ile bu listeye son anda ilave ettim. IE6′nın desteklemediği min-height özelliği için

min-height:500px;
height:auto !important;
height:500px;

yazmamız yeterli.

Bunun dışında CSS Derslerindeki sayfasındaki CSS Problemleri ve Çözüm Önerileri kısmında birçok problem görünse de yukarıda saydıklarım problemlerle çok sık karşılaşıyorum. Bu sorunlarla karşılaştığımda her defasında siteye girip bu kodları kopyalamak sorun oluyor, bu nedenle Adobe Dreamweaver’ın Snippets Aracı ile bu sorunu giderdim.

Dreamweaver’da Snippets eklemek çok basit. İlk olarak eğer açık değilse Snippets penceresini açmak için üst menüden Window -> Sineppets veya shift+F9 kısayolu ile açabiliriz. Açtıktan sonra farenin sağ tuşuna basarak New Sineppet tıklayalım.

Açılan pencerede Name kısmına ismini yazalım(Örne: kutu hilesi) Insert Code kısmına da kodumuzu ekleyelim.

Evet kodumuzu eklemiş olduk. Bu şekilde devamlı kullandığımız kodları Sineppets penceresine ekleyerek kolaylık sağlayabiliriz.

Daha sonra kod yazarken bu kodlara ihtiyaç duyduğumuzda

Hemen bu pencereden ilgili başlığa çift tıklayarak kodumuzun içine ekleyebiliriz.

min-width, min-height

Yapısı : min-width, min-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

min-width, min-height kapsayıcı kutunun minimum alacağı değerleri belirtmek için kullanırız.

p.menu {
float:left;
width:200px;
min-width:150px;
}

Aynı şekilde max-width ve max-height tanımlamalarıda yapılır.

max-width, max-height

Yapısı : max-width, max-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | none | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

max-width, max-height kapsayıcı kutunun maksimum alacağı değerleri belirtmek için kullanırız.

p.menu {
float:left;
width:200px;
max-width:400px;
}

şžöyle bir sonumuz vardır ki oda IE’nin 7 versiyonundan sonra bu özellikleri desteklemeye başlamasdır. Bu çok kullanışlı özellikleri bu nedenden dolayı kullanmamazlık yapmayacağız tabi.

IE için bir çözüm vardır. expression() özelliği bu özellik sadece IE tarafından yorumlanır. Bu özellik dinamik özellik olarak tanımlanır. Yani bu kod normalde bir javascript kodudur.

#icerik
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
<body>
<div id="icerik">
....
</div>
</body>

Yukarıdaki tanımlamda css içerisinde javascript komutları kullanılmıştır. Bu tanımlamaları sadece IE anlayacaktır ve uygulayacaktır. Kodda eğer genişlik belirtilen maksimum değerden büyükse atanan değeri alacak değilse auto değeri alacaktır.

Ayrıca min-height için daha kısa bir çözüm vardır

#menu {
min-height:500px;
height:auto !important;
height:500px;
}