button { overflow: visible; }
]]>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-x:hidden}
</style>
<![endif]-->
Yukarıdaki style tanımını incelerseniz başında ve sonunda 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.
]]>Problemin çözümü için kütüphane dosyalarında ufak değişiklikler yapmamız gerekiyor. Problemler kütüphane sahiplerine bildirilmiş ve sanırım bir sonraki sürümlerinde çözülmüş olacaktır.
Gelelim bu problemi nasıl çözüceğimize;
Bu problemi iki farklı yöntem kullanarak çözebiliyoruz. Fakat yöntemlerden biri başka problemleride meydana getirebileceğini düşündüğümden en sağlam çözüm olacağını düşündüğüm yöntemden bahsediyor olucam.
Jquery kütüphanemizin developer’lar için hazırlanmış olan versiyonunu indiriyoruz. Daha sonra return (“scrollTo” in elem && elem.document) ? // does it walk and quack like a window? kod bloğunu bularak bu kod bloğunu return (“scrollTo” in elem && elem.document && !elem.parentNode) ? // does it walk and quack like a window? ile değiştiriyoruz. Tabiki developer sürümünün boyutu yüksek olduğundan bu sürümünü sıkıştırarak kullanmak isteyebilirsiniz. Burada yardımınıza Closure Compiler yetişiyor. Yapmanız gereken tek şey http://closure-compiler.appspot.com/home sitesine girmek ve sol taraftaki alana kod bloğunu yapıştırıp Compile düğmesine basmak. Daha sonra sağ taraftaki sonucu kopyalayarak yolumuza devam edebiliriz.
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.
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.
Sayfamızda 36 CSS dosyası var ve hepsinede ihtiyamız olduğunu varsayalım. Peki bu durumda ne yapmamız gerekiyor?
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");
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.
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.
]]>IE8 içinde bir düğmeye basarak sayfamızı IE7 içinde çalışır gibi davranmasını sağlayabiliyoruz. Bu düğmeye tıklandığında sayfamız bundan sonra IE7 gibi davranmaya başlayacaktır. Peki, IE7 modunda sayfamızın IE8 gibi davranma şansı varmı? Maalesef bunu yapmak mümkün değil. Eğer sayfalarımızı IE8 içinde çalışacak şekilde tasarlamış ve kesinlikle bu modda çalışmasını sağlamak istiyorsak sayfamızın içine aşağıdaki parametreyi eklemek yeterli olacaktır.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Alternatif olarak, eğer tarayıcımızın IE7 gibi davranmasını istiyorsak aşağıdaki kodu eklememiz yeterli olacaktır.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Her ne kadar bu etiketleri ekleyerek IE8′in IE7 gibi davranmasını sağlasakta bu gerçek bir IE7 gibi olmayacaktır. Bu nedenden meta etiketlerinin kullanımını önermiyorum.
IE8 için kullanacağım hack yöntemi star hack yöntemini kullarak IE7 ve daha düşük versiyonları hedef alır. Fakat eski IE tarayıcıları için daha farklı hack yöntemleride kullanılabilir.
p.myclass {
color: green;
*color: red;
}
body:last-child p.myclass {
color: blue;
}
Bu hack yöntemi kullanıldığında myclass sınıfına sahip paragraflar;