Bol bol seyahat ederim, fotoğraf çekerim, film izlerim ve kitap okurum. Genel anlamda insanları anlamam ve onlar da beni anlamazlar. Zaten sessizlik hakkında söylenen herşey gürültüden ibaret değil midir? 
RSS ile takip edin
Web Tarayıcıya Göre Değişebilen CSS Hazırlamak
Web sayfalarımızın ya da bloglarımızın farklı tarayıcılarda (Internet Explorer, Mozilla Firefox, Opera, Safari vb.) farklı görünümler alması bizi uğraştırmaya devam ediyor. Ben de bu konuda zaman zaman oldukça sıkıntı çekiyorum ve çarelerini araştırmak zorunda kalıyorum. Değişik görünümleri engellemek için farklı CSS hack yöntemleri kullanmak durumunda kalıyoruz. CSS hack yerine, web tarayıcısına göre değişen css şablonu kullanmak alternatif bir yöntem olabilir.
Yeni rastladığım bir yöntemi sizinle paylaşmak istiyorum.
Bunun için Rafael Lima ‘nın yazdığı bir Javascripti kullanabiliriz. 1 KB dan daha küçük olan bu javascripti header.php dosyanızdan yükletebilirsiniz.
Detaylı olarak anlatmak gerekirse;
css_browser_selector.js.txt dosyasını farklı kaydedip ismini css_browser_selector.js olarak düzeltin ve sunucunuza gönderin. Kullanacağınız dosyanızı açın ve (index.htm, header.php vs.)
[sourcecode language="html"] <head> ve </head> [/sourcecode]
tagları arasına;
[sourcecode language="php"]
<script src="css_browser_selector.js" type="text/javascript"></script>
[/sourcecode]
kodunu yerleştirin. Burada javascript dosyası ile javascript dosyasını yüklettiğiniz header.php vs. dosyalarının aynı klasörde olmasına dikkat edin. Farklı klasörlerde iseler src=”..” kısmını buna göre düzenleyin.
Her tarayıcı için görünecek CSS özelliklerini ayarlayın, Örneğin Firefox‘da h1‘in boyutunun 16px ve IE‘da ise 18px olmasını istiyorum. Bunun için yapmam gereken;
[sourcecode language="css"]
.gecko h1 {font-size: 16px;}
.ie h1 {font-size:18px;}
[/sourcecode]
Ya da Mac üzerinde Safari kullanan biri baktığında h1 boyutunun 10px olarak görsün istiyorum;
[sourcecode language="css"]
.mac.webkit h1 {font-size:10px;}
[/sourcecode]
olarak yazarım. Özellikle burada dikkat edilmesi gereken bir şey işletim sistemi adı ile tarayıcı adının arasında boşluk bırakılmamasıdır.
İşletim sistemleri için kullanılabilecek kodlar;
- win – Microsoft Windows
- linux – Linux (x11 and linux)
- mac – Mac OS
Tarayıcılar için kullanılabilecek kodlar
- ie – Internet Explorer (All versions)
- ie6 – Internet Explorer 6.x
- ie5 – Internet Explorer 5.x
- gecko – Mozilla, Firefox, Camino
- opera – Opera (All versions)
- opera8 – Opera 8.x
- opera9 – Opera 9.x
- konqueror – Konqueror
- webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira
İlave kodlar
- js – Javascriptin çalışır duruma veya kapalı olması durumuna göre kullanılabilir.
Örneğin JavaScript kapalı olan bir tarayıcı da bu durumu kullanıcıya bildirmek için aşağıdaki yöntem kullanılabilir:
[sourcecode language="html"]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script src="css_browser_selector.js" type="text/javascript"></script>
<title>JS Kontol</title>
<style type="text/css">
.js .kontrol {display: none}
</style>
</head>
<body>
<div class="kontrol">
<p>JavaScript desteği kapatılmış.</p>
</div>
</body>
</html>
[/sourcecode]
Bu yazımı beğendiyseniz, RSS ile yeni yazılarımdan haberdar olabilirsiniz. Gmail hesabınız varsa tüm beğendiğiniz siteler için Google Reader kullanabilirsiniz.
Faydalı bir makale Hakkı bey, teşekkürler.
çok güzel
süpersin hocam
Pingback: Hakan AK » Blog Archive » Web Tarayıcıya Göre Değişebilen CSS Hazırlamak
teşekkür
Sadece IE7 de çalışan bir kod yazılamayabilir ama ie – Internet Explorer (All versions) bunu kullanabilirsiniz sanıyorum.
merhaba, bu scripti ie7 icin nasil kullanabiliriz ya da nasil bir degisiklikle kullanilabilir hale getirebiliriz?
Pingback: İpuçlarım » Blog Archive » Web Tarayıcıya Göre Değişebilen CSS Hazırlamak
Kaan Bey CSS ile bunu yapmanız mümkün mü bilemiyorum. Ama display: özelliğini kullanarak beliki çözülebilir. Çözüm bulursam buraya yazarım.
merhaba bu yöntem diğer css hack yöntemlerinden daha kolayıma gitti helede firefoxun firebug ve ie nin ie dom inspector eklentilerini bugün keşfettikten sonra hazırlayacağım ödev için css tam istediğim şey oldu (grafik ve tasarımla hayatta aram yoktur)
ama bir şey başaramadım
JavaScript desteği kapatılmış.
java destek kapatılmışsa bu gözüküyor ama sayfanın diğer geri kalan içeriğide gözüküyor…
istediğim ise java kapatılmışsa içerik gözükmesin uyarı çıksın kapatılmamışsa tam tersi…
html kodlarının gelip gelmemesi önemli değil tek isteğim kapatılmışsa içerik kaybolsun ama başaramadım…
bunu nasıl başarabiliirim yukarıdaki kodlar için…
şimdiden teşekkürler Ve Başarılar…
ilgili başka bir yazı
http://www.orhanekici.com/tarayiciya-gore-farkli-css-kodu-yazmak
Bence riskli bir yöntem. Çünkü javaScript kapalı olduğunda karmaşa yaşanacaktır. Yine en iyisi “css hack” yöntemlerini kullanmak gibi görünüyor (:
Pingback: Fatih Hayrioğlu’nun not defteri » 01 Mart 2008 web’den seçme haberler
Güzel bir yöntem
Denemek lazım.
Eline sağlık