Farklı tarayıcılar için farklı CSS çalıştırmak
24 Aralık 2009, admin
Yaptığımız bir web sayfasının farklı browser(tarayıcı) larda birbirinden farklı gözükmesi, webmaster’ların karşılaştığı sorunlardan biridir. Bu yazıda; Çeşitli tarayıcılarda farklı bir CSS dosyası çalıştırmak veya aynı CSS dosyasını farklı tarayıcılarda çalışabilir duruma getirmek konularından bahsedeceğim. Öncelikle tarayıcı tipi veya versiyonuna göre ayrı bir css dosyası nasıl çağırılır, ondan bahsedelim.
Internet Explorer ve alt versiyonları;
Aşağıdaki örneklerde Internet Explorer’ın farklı versiyonlarında harici bir CSS stil dosyasının nasıl çağırılacağını gösterdim. Bunlara şartlı yorumlar (conditional comments) deniyor. Bu kod parçası HTML dosyanızın <head> </head> tag (etiket) inin içerisine eklendiği takdirde çalışır. Şartlı Yorumlar sadece Internet Explorer için geçerlidir.
Aşağıdaki örnekte ie6.css isimli CSS stil dosyamızı ie6 ve üzerindeki tarayıcılarda çalıştırıyoruz.
<link type="text/css" rel="stylesheet" href="ie6.css" />
<![endif]-->
Aşağıdaki örnekte ise, bu sefer ie6 ve altındaki browserlarda çalıştırıyoruz.
<link type="text/css" rel="stylesheet" href="ie6.css" />
<![endif]-->
Eğer sadece belirli bir tarayıcıda çalıştırmak isteniyorsa, örneğin ie7;
<link type="text/css" rel="stylesheet" href="ie7.css" />
<![endif]-->
Örnekler çoğaltılabilir. Aşağıda lte ve gte gibi kısaltmaların ne anlama geldiğini yazdım;
gt – daha yüksek
gte – eşit veya daha yüksek
lt – daha düşük
lte – eşit veya daha düşük
Bunlarla beraber aynı CSS dosyası içerisinde de, Internet Explorer’ın farklı versiyonları için CSS kalıpları oluşturulabilir.Şöyleki;
#id-veya-class-ismi { _color: blue; }
/*IE 7 ve öncesinde çalışır*/
#id-veya-class-ismi { *color: red; }
Yukarıdaki örneklerde ie7 ve öncesi için ” * ” kullanırken ie6 ve öncesi için ” _ ” kullandık. Bu durum id veya class içerisi için geçerlidir. Başka yolları da var tabi şöyleki;
* html #id-veya-class-ismi{ color: red }
/*IE 7 ve öncesinde çalışır*/
*:first-child+html #id-veya-class-ismi{ color: red }
Başka tarayıcılar içinse aşağıdaki css kodları kullanılabilir;
html:first-child #id-veya-class-ismi { color: red }
/* Safari */
html[xmlns*=""] body:last-child #id-veya-class-ismi { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #id-veya-class-ismi { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #id-veya-class-ismi { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#id-veya-class-ismi { background: #000000; border: 1px solid #ffffff }
}
Firefox için ise;
#id-veya-class-ismi, x:-moz-any-link { color:red; }
/*Firefox 3.0 için*/
#id-veya-class-ismi, x:-moz-any-link, x:default { color:red; }
/* firefox 3.5+ */
body:first-of-type #id-veya-class-ismi { color:red; }
Aşağıda bir-iki kaynak verdim. Umarım yardımcı olur. Teşekkürler.. (kaynaklar İngilizcedir.)
http://bradkellett.com
http://pornel.net/firefoxhack
http://www.virtuosimedia.com
(2 votes, average: 4,50 out of 5)
Loading ...Yanıtla
-
Merhaba Türkçescript Sitesine Hoşgeldiniz!
Uğradığınız için teşekkürler! Yorum yazarak tartışmalara dahil olun, RSS beslemesi kayıt olarak güncellemelerden haberdar olun. Görüşürüz!
Teknokolikleriz- Analog (Film) Dijital Fotoğraf Makineleri: Avantaj ve Dezavantajları
- Nikon D4 Digital-SLR Fotoğraf Makinesi
- DataStar’dan Öğretmenlere Özel Kampanya
- Casio Exilim Ailesine Yeni Üye: H5
- Seagate GoFlex Satellite İle Kablosuz Veri Depolama
- Nikon Yeni Nikon 1 Serisinden 2 Yeni Model
- Harman Kardon’dan Blu-Ray Sistem: BDS 400
- Samsung MultiView MV800 Tasarımıyla Çok Farklı
- PolyPad C7000
- ThinkPad X1′e En İyi Tasarım Ödülü
Temmuz 27th, 2011 on 07:59
css browser select var gayet başarılı tek css te istediğin tarayıcıya istediğini yaz aslında sadece ie6 ve ie7!
http://rafael.adm.br/css_browser_selector/
herkez faydalansın derim