IE6 içinde yaşanan iframe horizontal scrollbar problemi

Günümüzde ajax kullanımı ile birlikte iframe kullanımı azımsanmayacak şekilde azaltılmış olsada, bazı durumlarda iframe kullanmamız gerekiyor.

Iframe varsayılan olarak atamış olduğumuz yükseklik ve genişlik değerinden daha yüksek yada geniş bir içerik ile karşılaştığında scroll çıkartarak bize içeriği gezme imkanı sunar. Fakat IE6 burada bize yine bir oyun oynuyor ve içeriğin yüksekliği iframe için atamış olduğumuz yüksekliği aştığı anda iframe’in genişliği iframe için atamış olduğumuz içerikten daha düşük olduğu halde yatayda scroll çıkartıyor. Karışık bir tanımlama oldu ama umarım hatanın ne olduğunu anlatabilmişimdir.

Çözüm ise basit. Iframe içinde açılacak olan sayfamızın <head> tagları içinde aşağıdaki style tanımlamasını eklememiz sorunun çözülmesi için yeterli olacaktır.

<!--[if IE 6]>
<style type="text/css">
  html {overflow-x:hidden}
  body {overflow-y:hidden}
</style>
<![endif]-->

Yukarıdaki style tanımını incelerseniz başında ve sonunda <!–[if IE 6]>…<![endif]–> benzer bir tanım olduğunu görüceksiniz. Bu tanımlamayı kullanmamın nedeni eklemiş olduğum kuralın sadece IE6 için işletildiğine emin olmak ve bu hataya rastlanmayan diğer tarayıcıları etkilememesini sağlamaktır.

Internet Explorer CSS Dosya Sayısı ve Boyut Limitleri

Son günlerde üzerinde çalıştığım bir proje üzerinde yaptığım güncellemeler sonrasında Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 sürümleri altında sayfadaki bazı bölümlerin düzgün görüntülenemediğini farkettim. Sorunum sayfa içinde bulunan bazı bölümlerin bağlı bulundukları CSS dosyası üzerindeki stil tanımlamalarını düzgün şekilde algılayamamasından kaynaklanıyordu.

Projenin kaynak dosyaları ile proje geliştirme aşamasında hazırlanan sayfaları karşılaştırdığımda, projenin kaynak dosyaları içinde olmayan fakat geliştirme ortamında farklı ihtiyaçlar için kullanılan CSS dosyaları olduğunu farkettim. 16 CSS dosyası olması gereken proje, geliştirme ortamında sonrasında 36’ya çıkmıştı.

Problemin kaynağının Internet Explorer üzerindeki CSS dosya kısıtlamalarından kaynaklandığını çok geçmeden anladım. Peki nedir bu kısıtlamalar, neler yapabiliriz kısaca bahsetmek istiyorum.

CSS Dosya Limitleri Hakkında Kısa Bilgi

Internet Explorer geliştiren ekip bir sayfa içinde <link /> veya @important url(‘sablon.css’) yöntemi kullanarak maksimum 32 harici CSS dosyası eklememize izin verir. Eğer bu sayının üzeririnde CSS dosyasına sahipsek bu dosyaları kesinlikle yüklemeyecektir. Bu limit tüm Internet Exlorer (6,7,8) sürümleri için geçerlidir. Bunun dışında pek bilinmeyen sınırlamalardan biride Internet Explorer içinde yüklenecek CSS dosyasının boyutunun (288 KB) geçemiyeceğidir.

Limitler İçin Çözüm Önerileri

Sayfamızda 36 CSS dosyası var ve hepsinede ihtiyamız olduğunu varsayalım. Peki bu durumda ne yapmamız gerekiyor?

1 – CSS dosyalarını gruplamak

Yeni CSS dosyaları oluşturabilir yada sık kullandığımız birden fazla CSS dosyası içine diğer CSS dosyalarını @import url(stil.css) yöntemi kullanarak gruplayabilirsiniz.

grup1.css
-----------------------------
@import url("1.css");
@import url("2.css");
...........
@import url("16.css");

grup2.css
-----------------------------
@import url("17.css");
@import url("18.css");
...........
@import url("36.css");

2 – CSS dosyalarını birleştirmek

CSS dosyalarını bölümlendirmenin en büyük nedenlerinden biri diğer sayfalarda kullanılmayacak olan stil tanımlamarını dosya içinden ayırarak hem CSS dosya boyutlarını düşürmek, hemde dosya yönetimini kolaylaştırmaktır.

Fakat çok fazla parçaya ayrılan CSS dosyalarının yönetimi bir süreden sonra amacı dışına çıkacak, yönetim zorlaştığı gibi aynı tanımlamara sahip bir çok CSS dosyasına da sahip olacaz. Tarayıcı üzerindeki dosya istek sayısınıda unutmayalım. Ne kadar çok istek sunucu tarafına o kadar yük demektir. Sonuç olarak yapmamız gereken benzer özelliklere sahip CSS dosyalarını birleştirmek ve münkün olduğunca benzer tanımlamaları aynı CSS dosyası üzerinde tutmak olacaktır.

3 – Gereksiz CSS dosyalarını kaldırmak

Malum dosya sayısı arttıkça yönetim zorlaşacağından aynı stil kurallarını içeren birden fazla CSS dosyasına sahip olacaksınız. Bu tarz bir sorun ile karşılaştığınızda elinizdeki dosyalarını tekrar gözden geçirebilir ve artık işinize yaramayan yada fazlalık olan dosyalarıda kaldırabilirsiniz.