Tarayıcılara özel kapsamlı CSS Hacks listesi (Güncel)
May 16, 2012 tarihinde postalandı
CSS | 1 Yorum altında dosyalandı
Arayüz kodlayan bir çok kişinin ihtiyacı olacağını düşündüğüm Tarayıcılara özel olarak kullanacabileceğimiz CSS Hack yöntemlerinin bir çoğunu görebileceğiniz listeyi sizlerle paylaşmak istedim. Her ne kadar CSS Hack yapmadan arayüz hazırlamak hayalim olsada umarım bu listedeki Hack yöntemleri hayatınızı kolaylaştırırır.
Seçici Hackleri (Selector Hacks)
IE6 ve alt sürümleri
* html #test { color: red }
IE7
*:first-child+html #test { color: red }
IE7, FF, Saf, Opera
html>body #test { color: red }
IE8, FF, Saf, Opera (IE 6,7 hariç)
html>/**/body #test { color: red }
Opera 9.27 ve alt sürümleri, safari 2
html:first-child #test { color: red }
Safari 2-3
html[xmlns*=""] body:last-child #test { color: red }
safari 3+, chrome 1+, opera9+, ff 3.5+
body:nth-of-type(1) #test { color: red }
safari 3+, chrome 1+, opera9+, ff 3.5+
body:first-of-type #test { color: red }
saf3+, chrome1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
#test { color: red }
}
iPhone / mobile webkit
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
Safari 2 – 3.1
html[xmlns*=""]:root #test { color: red }
Safari 2 – 3.1, Opera 9.25
*|html[xmlns*=""] #test { color: red }
IE6-8 hariç
:root *> #test { color: red }
IE7
*+html #test { color: red }
Sadece Firefox. 1+
#test, x:-moz-any-link { color: red }
Firefox 3.0+
#test, x:-moz-any-link, x:default { color: red }
Firefox 3.5+
body:not(:-moz-handler-blocked) #test { color: red; }
Öznitelik Hackleri (Attribute Hacks)
IE6
#test { _color: blue }
IE6, IE7
#test { *color: blue }
IE6 Hariç diğer tüm IE sürümleri
#test { color/**/: blue }
IE6, IE7, IE8
#test { color: blue\9; }
IE7, IE8
#test { color/*\**/: blue\9; }
IE6, IE7
#test { color: blue !ie; } /* ! dan sonra istenilen yazılabilir */
IE8, IE9
#test {color: blue\0/;} /* Tanımlanan tüm kodların en altında olmak zorunda */
Internet Explorer içinde görüntülenen button etiketinde karşılaşılan extra boşluk problemi
May 4, 2012 tarihinde postalandı
CSS, IE6, IE7 | Bir yorum bırak altında dosyalandı
Internet Explorer 6 ve 7 sürümleri içerisinde button etiketlerini görüntülemek istediğinizde hoş bir süprizle karşılaşıcaksınız. Button etiketi içinde tanımladığımız metin miktarı ile orantılı olarak yatayda sağ ve sol kısımlarına fazladan boşluk eklediğini farkedeceksiniz. Ne kadar fazla metin girerseniz bu değer daha da artış gösterecektir. Aşağıdaki css tanımlamasını yaparak bu problemi kolayca çözebilirsiniz.
button { overflow: visible; }
Garanti Mortgage
April 29, 2011 tarihinde postalandı
Portfolyo | Bir yorum bırak altında dosyalandı
http://www.garantimortgage.com/
İş Tanımı
- Ana ve altsayfalarda bulunan flash teknolojisi ile hazırlanmış Mortgage Bul, İş Mortgage Bul, Hesap Yap, Faiz Oranları, Haberler ve Fırsatlar modülleri arama motoru optimizasyonu, flash teknolojisini desteklemeyen mobile araçlar üzerinde çalışması ve daha kolay bir yönetim sağlamak amacı ile tekrardan hazırlandı.
IE6 içinde yaşanan iframe horizontal scrollbar problemi
December 7, 2010 tarihinde postalandı
CSS, IE6, Tarayıcılar, Uncategorized | Bir yorum bırak altında dosyalandı
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-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.
Mercedes-Benz Mobile
November 5, 2010 tarihinde postalandı
Portfolyo | Bir yorum bırak altında dosyalandı
http://mobil.mercedes-benz.com.tr/
İş Tanımı
- Iphone ve diğer mobile telefonlar olmak üzere iki farklı versiyonu hazırlanan sitenin Kullanıcı Arabiriminin Geliştirilmesi (XHTML, CSS, Javascript)