İnternet Explorer 8 yayıldıkça sorunları ortay çıkmaya başladı, yani test potamıza girmeye başladı. Her ne kadar uyumluluk kodu ile İnternet Explorer 7 gibi yorumlamasını sağlayıp test tarayıcı sayısını bire düşürme imkanımız olsada yeniliklerinden yararlanmak için bu kodu kullanmamak gerekebilir. Ayrıca makaleyi geç yazmamızın bir avantajı oldu o da ie8 sorunlarınıda görmeye başladık. 

İnternet Explorer 8 ile birlikte CSS2.1 standartlarını tam desteklediğini açıkladı.

İnternet Explorer 8 ile gelen CSS özellikleri listesi;

Float

Float uygulamalarındaki hasLayout‘dan kaynaklanan bir çok sorunun giderildiği söyleniyor. İşin aslı hasLayout işleyişi tamamen kaldırılmış ie8′de. Bu sürümdeki en büyük gelişme budur.

Margin Çökme Sorunu

Margin çökme sorunu giderilmiş.

:focus Sözde Sınıfı

Klavyeden elementlere odaklanmamızı sağlayan ve erişebilirlik için önemli olan bu özellik İnternet Exploerer 8 ile geldi

a:focus {
	border: solid 1px red;
}

:before and :after Sözde Elementleri

Bir elemanın öncesine ve sonrasına content özelliği ile birlikte içerik eklememizi sağlayan bu özellik ie8 ile birlikte geldi.

#box:before {
	content: "Not:";
}

#box:after {
	content: "son";
}

:lang() Sözde sınıfı

Sayfa içeriğinde farklı dilde kullanılan içeriği yakalamak için kullanılan bir seçicidir.

:lang(fr) {
	tanimlar
}

:active Sözde sınıfı işlevselliği arttı

Eskiden sadece a bağlantıya verilen özellikleri tanımlayan ie8 şimdi tüm HTML elementlerini kapsıyor artık.

list-style-type Özelliğine ek değerler eklenmiş

list-style-type özelliğinin bir çok değeri var. İnternet Explorer 8 öncesi bunların yarısını destekliyordu 8 ile birlikte hepsini destekliyor.

content özellikleri destekliyor

• content
• counter-increment
• counter-reset
• quotes

:after, :before sözde seçicileri ile birlikte content özelliklerini destekliyor artık ie8

Tablo Özelliklerinin tamamını destekliyor artık

• caption-side 
• border-spacing

özelliklerini destekliyor. Ayrıca

• border-collapse
• border-style
• empty-cells

özelliklerinide tam destekliyor, yani bu özelliklerin tüm değerlerini destekliyor. Eskiden kısmen desteklediği bu özellikleri şimdi tammen destekliyor.

Yazı ve Metin Özellikleri

• font-weight
• white-space (pre-wrap ve pre-line değerleri destekleniyor)
• word-spacing

Ayrıca text-decoration özelliğinin overline değeride destekleniyor.

Yazdırma Özellikleri

@page özellikleri tam olarak destekleniyor.

• page-break-inside
• widows
• orphans

Dış Hat çizgisi(Outline) Özellikleri

Dış hat çizgisi özellikleri desteği geldi.

• outline
• outline-color
• outline-style
• outline-width

Data URI Desteği

Internet Explorer 8 ile birlikte DATA URI desteği geliyor. DATA URI kısaca html dosyasından ayrı yapıların yani resimlerin html içine gömme imkanı verir bize. internet Explorer 8 sadece css dosyalarına eklenmesine izin veriyor ayrıca bir kısıtlama var ie8 en fazla 32kb boyutuna kadar destekliyor.

Özel uzantılar ile yeni özellik desteği

Firefox, webkit ve Opera’dan sonra Microsoft’da özel uzantılar ile yeni özellik desteğini getirdi. Aşağıda özellikler listelendi;

• -ms-accelerator
• -ms-background-position-x
• -ms-background-position-y
• -ms-behavior
• -ms-filter
• -ms-ime-mode
• -ms-layout-flow
• -ms-layout-grid
• -ms-layout-grid-char
• -ms-layout-grid-line
• -ms-layout-grid-mode
• -ms-layout-grid-type
• -ms-overflow-x
• -ms-overflow-y
• -ms-scrollbar-3dlight-color
• -ms-scrollbar-arrow-color
• -ms-scrollbar-base-color
• -ms-scrollbar-darkshadow-color
• -ms-scrollbar-face-color
• -ms-scrollbar-highlight-color
• -ms-scrollbar-shadow-color
• -ms-scrollbar-track-color
• -ms-text-align-last
• -ms-text-autospace
• -ms-text-justify
• -ms-text-kashida-space
• -ms-text-overflow
• -ms-text-underline-position
• -ms-word-break
• -ms-word-wrap
• -ms-writing-mode
• -ms-zoom

Sonuç

Tüm bu özellikleri sıraladıktan sonra beni sevindiren üç özellik var. Birincisi hasLayout’un kaldırılması, ikincisi DATA URI desteğinin gelmesi ve display:inline-block özelliğinin tam desteğidir.

Ayrıca ie8 sorunları hakkında bilgi edinmek isteyenler kaynaklar kısmında hata linklerinden gerekli bilgiyi alabilirler. Ben sorunlarla karşılaştıkça sitemde yayınlayacağım hataları.

Hoşçakalın.

Kaynaklar

• http://msdn.microsoft.com/en-us/library/cc304082%28VS.85%29.aspx
• http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
• http://www.howtocreate.co.uk/ie8.html
• http://reference.sitepoint.com/css
• http://www.evotech.net/blog/2009/03/ie8-css-support/
• http://css-discuss.incutio.com/wiki/IE8#CSS3_selectors (ie8 sorunları)
• http://jhop.me/ie8-bugs (ie8 hataları)
• http://www.gtalbot.org/BrowserBugsSection/
• http://techblog.procurios.nl/k/news/view/33224/14863/Testing-Internet-Explorer-8-CSS3-for-Web-Design.html (CSS3 desteği)

Sorun; float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir. Bu sorun zemin rengi/resmi uygulanmış veya kenarlık atanmış kapsayıcılarda daha iyi görünür. Sorun şekil.1′de gösterildiği şekilde kapsayıcı elementin float uygulanmış elementi kapsamamasıdır.

Bu bir hata değildir. Ama sayfalarımızı kodlarken genelde bu durumun meydana gelmesinden hoşlanmayız.

şekil.1 float sorun

Bir örnek yaparsak daha iyi anlayacağız.

CSS kodu:

.kapsul {
    border: 1px solid #000;
    padding: 2px;
}
img {
	float: left;
}

Html kodu:

<div class="kapsul">
    <img src="koy_01.jpg" alt="Bizim köy" weight="250" height="160" />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>

Örneği görmek için tıklayınız.

Floatuygulanan resim div(.kapsul) içindeki resme göre genişlemez. Duruma tersten bakarsakbazen bu görünümü kullanabileceğimiz durumlarda olabilir, yani bu durumu bazı durumlarda kullanabiliriz. Bu durum bir hata değildir. CSS’in birhatası hiç değildir. Biz genelde float uyguladığımız kutuların içeriklerine göre genişlemesini isteriz.

Float özelliğiNetscape1.1 ile gelen bir özelliktir.Eğer kutularımıza kenarlık ataması yaparsak bu sorunu daha iyi görürüz.Biz kutunun içeriğe göre uzamasını yani sonunun temizlenmesini isteriz. .kapsul uygulanan div elementin tüm içeriği kapsaması için sonuna clear özelliği atanmış bir nesne koymalıyız. Bu işlemi farklı yöntemlerle yapabiliriz.

Boş bir elemente clear atayarak çözmek

Geneldekutuların içeriğine göre uzamasını isteriz. Bu sorunu çözmek küçük bir yapısalekleme yapmak yeterli olacaktır.

<div class="kapsul">
    <img src="resim.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
    <div style="clear:both;"></div>
</div>

Buşekilde sorunumuzu çözmüş oluruz ancak bu sorunla karşılaştığımız heryerde bu eklemeyi yapmak zorun kalacağız ve sırf bu düzeltme için boşbir div ekleyeceğiz. Buda mantıklı(semantik) kodlama açısından uygun değildir. Pekibunu başka nasıl çözeriz.

:after ile çözüm

CSS2ile birlikte gelen :after özelliğini kullanarak çözebiliriz. Css(:after) kodu ile bir elementinsonuna bir içerik ekleyebiliyoruz ve bu elemente css komutları atayabiliyoruz.Ayrıntılı bilgi için tıklayınız.Bu özellikten yararlanarak kutunun sonuna bir nokta koyup bu noktayaclear(clear:both) ataması yaparsak sorunumuz çözülmüş olacaktır. Tabi birde bunoktayı görünmez yapmamız gerekiyor, Kutuların sonunda nokta görünmesipek hoş olmaya bilir.

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

Ayrıcadisplay:block koyduk çünkü satır için(inline-level) elementler clear özelliğiatamasını kabul etmiyor. Aslında overflow ile de bu sorun halledilebilir ancakMozilla Firefox’un yeni sürümlerinde bu metot sorun çıkarıyor.

.kapsul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*IE-mac den bu bolumu sakla \*/
* html .clearfix {height: 1%;}
/* IE-mac bu bolumu saklama artik */

Tabibu kod burada kalmıyor çünkü IE ile sorunları var. Normalde IE’nin float uygulanmış elementin tamamı kapsamama sorunu diye bir problemi(bu ilginç bir durumdur) yoktur, ancak float uygulanmış elemente genişlik ve yükseklik tanımı yapılmadığında sorun ortaya çıkıyor. Bunu engellemek için sadece IE/Win gördüğü kapsayıcı elementin yüksekliğine %1 ataması yaparız. Ancak bu kısımı IE/Mac’lerden saklamamız gerek bunun için ters bölme(\) işaretini kullanırız böylelikle IE/Mac sürümü komut satırının devam ettiğini farz ederek bu satırı görmez.

Sıra geldi IE/Mac’de sorunu aşmaya, IE/Mac’deki sorunu aşmak için display: inline-block; tanımlamasını yapıyoruz. Tabi diğer web tarayıcılarının bundan etkilenmemesi için IE/Mac’den gizlediğimiz alana display: block; atamasını eklemeliyiz.

.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 */

Örneğin son halini görmek için tıklayınız.

şekil2 float sorununun çözülmüş hali

Bu metot bu sorunun çözümü için en ideal çözümdür. Bu sorunun çözümünde birçok insanın emeği geçmiştir. Doug, Mark Hadley, Matt Keogh, Holly’n John ve Tony Asslet‘a bundan dolayı şükranlarımızı sunarız. thank you guys :D Ayrıca bu konuda Türkçe bir makale yazan dahaiyi.net‘e çok teşekkürler.

Bu yöntemi biraz daha kolaylaştıralım. Sonuçta macde ie kullanan kalmadağına göre kodumuzu

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

CSS3 ile sorunun çözümü

Bu sorunun farkında olan CSS standart geliştiriciler bu soruna kökten çözüm getirmişler. clear-after yeni özelliği sayesinde bu kodlardan kurtulacağız tabi biraz zaman gerekecek bu özelliği kullanmak için. Malum hala uygulamada değil CSS3.0

.kapsul {
	clear-after: both;
}

Yukarıdaki örnekteki gibi tek satırlık bir kod sorunumuzu çözecektir.

Sonuç

Sonuç olarak şunu söyleyebiliriz ki bu sorunu çözmek için bir kaç çözüm yolu mevcut olsada şu an için :after ile çözüm başlığı altındaki kodu kullanmak bizim için uygundur. Ben web sitelerini kodlarken bu sorunla çok karşılaştığım için bir yere not ettim(Macromedia Dreamweaver – Snippets) ve lazım olduğu zaman hemen ekliyorum. Bu şekilde sorun hızlı bir şekilde çözmek mümkün oluyor.

Kaynaklar

• http://www.positioniseverything.net/easyclearing.html
• http://www.complexspiral.com/publications/containing-floats/
• http://www.dahaiyi.net/yazilar/temiz-bir-clearfix-metodu/
• http://csscreator.com/?q=attributes/containedfloat.php
• http://css-discuss.incutio.com/?page=ClearingSpace
• http://www.cs.hmc.edu/~mbrubeck/clear-after/
• http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-clear-after