Fatih Hayrioğlu'nun not defteri

İnternet Explorer’da Renk Geçişi Sorunu ve Çözümü

fatih.hayrioglu — Wed, 16 May 2012 08:18:01 +0000

CSS3 ile renk geçişi hakkında yazdığımız makalede İnternet Explorer içinde çözüm üretmiştik. Uygulamada bazı durumlarda renk geçişinin İnternet Explorer’larda çalışmadığını gördüm.

Biraz araştırınca bu sorunun hasLayout’tan kaynaklanan bir sorun olduğunu gördüm.

CSS3 ile renk geçişi için http://www.colorzilla.com/gradient-editor/ sitesini kullanıyorum.

Sorunu görmek için aşağıdaki gibi bir örnek yaptım;


#test{
    padding:10px;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

ie7’de(6’yı kâle bile almıyorum :D) renk geçişinin uygulanmadığını görüyoruz.

Çözüm ise bir önceki hasLayout makalesinde olduğu gibi sadece zoom:1 eklemek.

Ben tüm renk geçişi kodlarımın sonuna unutmazsam zoom:1 ekliyorum sizede öneririm.

Kaynaklar

İnternet Explorer hasLayout Kabulü ve Sorunları

fatih.hayrioglu — Tue, 15 May 2012 15:44:44 +0000

Makaleye başlamadan önce Internet Explorer 8 standart modda hasLayout kabulünün kaldırıldığını söyleyelim. IE7 uyumluluk modunda hala mevcut.

hasLayout özelliği hakkında bir şeyler bilmememiz normal çünkü biz daha çok sorun kısmını görüyoruz. Aslında bazı kaynaklarda “Boyutlandırma Hatası” olarak da geçiyor bu sorunlar. hasLayout Internet Explorer’un yorumlayıcı motorunun bir kabulü olarak tanımlanabilir. Internet Explorer Eski bir yorumlayıcıyı(Mosaic) kullanıyordu. Bu yorumlayıcı her bir elemanı(satıriçi elemanlar dahil) bir kutu olarak kabul eder ve kutunu dışına çıkışa izin vermez. Bir hücrenin tablonun dışına çıkmasına izin vermediği gibi. Bildiğimiz tablolu kodlama mantığı yani.

Yıllar sonra Microsft CSS için Trident motorunu adapte etmeye başladı. Ancak CSS ile birlikte her şeyin dikdörtgen bir yapı içinde olduğu kabulü eskimeye başlar. CSS elemanın dışına taşmayı destekliyor. float uygulanmış elemanlar veya içeriği kapsayıcısından uzun olan elemanlarda türetilmeye başlandı.

Micrsoft bu sorunu düzeltmek için bir yama yapmayı planladı. Sonuç olarak hasLayout özelliğini türettiler. Her element için hasLayout değeri true veya false olarak ayarlanır. Eğer true olarak tanımlandı ise kutu kendini kapsar. Yani içinde float uygulanmış bir eleman veya dışarı taşan bir eleman varsa bunların hepsini kapsar. Eğer hasLayout değeri false ise, eleman kendini kapsamaz ve kapsama işini üst elementin yapmasını bekler. İşte sorunda tam burada başlar.

hasLayout özelliği bir CSS özelliği değildir, yani biz hasLayout:true diye bir tanım yaparak bu sorunları halledemiyoruz.