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.
]]>* html #test { color: red }
*:first-child+html #test { color: red }
html>body #test { color: red }
html>/**/body #test { color: red }
html:first-child #test { color: red }
html[xmlns*=""] body:last-child #test { color: red }
body:nth-of-type(1) #test { color: red }
body:first-of-type #test { color: red }
@media screen and (-webkit-min-device-pixel-ratio:0) {
#test { color: red }
}
html[xmlns*=""]:root #test { color: red }
*|html[xmlns*=""] #test { color: red }
:root *> #test { color: red }
*+html #test { color: red }
#test, x:-moz-any-link { color: red }
#test, x:-moz-any-link, x:default { color: red }
#test { _color: blue }
#test { *color: blue }
#test { color/**/: blue }
#test { color: blue\9; }
#test { color/*\**/: blue\9; }
]]>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;
Hazırladığım projenin amacı sayfamızda bulunan ama ısrarla görsel olarak mudahaleye cevap vermeyen selectboxları bir javascript dosyası yardımı ile görsel olarak biçimleyebilmek.
Evet yanlış duymadınız. Artık sayfamızda bulunan selectboxlar üzerinden görsel olarak mudahale şansınız olacak. Tabiki bu bir ilk değil. Web dünyasında aşağıda linklerini verdiğim siteler gibi daha bir çok örneğini görebilirsiniz.
Peki Volkan neden bu kastın, zaten alem yapmış neden Amerikayı baştan keşfetmek istiyorsun diyen çıkacaktır aranızda. Belki haklısınız! Belkide;
Biraz BEN yaptım, hazırladım diyerek kendimi iyi hissetmem haricinde Türkiye içinde bu tarzda uygulamaları hazırlayan ve dahada iyilerini hazırlayabilecek bir çok insan tanıyorum. Ama üretmenin yanında hep tüketen, takip eden insanlar olacağımıza birazda üreten ve takip edilen insanlar olmak hoşunuza gitmezmi? Açıkcası benim gidiyor ve fırsatlar oldukça bu tarzda uygulamaları yazmaya devam edicem.
Hazırlamış olduğum kod şu anda tam anlamı ile bitmiş ve optimize değil. İşlerimden kalan zamanlarda kodlamaya devam ediyorum. Yaptığım çalışmaya aşağıdaki linklerden ulaşabilirsiniz.
Kendileri deneme yapmak isteyen arkadaşlar Demo linkine tıklayıp proje ilgili dosyaları indirebilirler.
Sizlerden gelen görüşler doğrultusunda kodları iyileştirmeye ve geliştirmeye devam edicem. Bu proje ile ilgili gelişmeleri Projelerim bölümü altından izleyebilirsiniz.
]]>
body:nth-of-type(1) p{
color: #333333;
}
Yukarıdaki kuralı sayfamıza eklediğimizde sadece Google Chrome ve Safari 3.1 tarayıcılarında paragrafların renginin gri olduğunu göreceksiniz. Kod tam olarak nasıl çalışır anlatmak istersek:
Tüm bu pseduo’lara ait detaylı bilgiye http://www.w3.org/TR/CSS2/selector.html altından erişebilir ve daha fazla bilgi sahibi olabilirsiniz.
]]>