Previous
Next

CSS şablonlarında Internet Explorer ve Firefox için farklı stil belirlemek

by Cem Kefeli 15. Eylül 2009 12:54

CSS - Cascading Style SheetsBu sıralar stil şablonları ile çok fazla uğraşır oldum blog'uma yeni yeni şeyler ekleyeyim derken. Bu CSS(Cascading Style Sheets) işi gerçekten tam anlamıyla çıldırmalık. Yok Internet Explorer(IE) şunu destekliyor da bunu desteklemiyor, yok Firefox bunlardan bazılarını desteklemiyor, yok IE bunları bunları destekliyor da görünümleri için farklı sonuçlar veriyor. Sanırsınız ki daha iki gün önce oluşan bir teknoloji bu. Ben en az on senedir web tasarım ile uğraşıyorum, o zaman da aynı dert vardı şimdi de. Aradan bi dünya zaman geçti sırf Microsoft'un kaprisleri ve standart belirleme tutkusu yüzünden hala kırk çeşit stil şablon yazıyoruz...

Olay şu; eğer Firefox ve IE için aynı stil şablonları farklı görünüm veriyorsa yapacağınız iş her biri için kendine uygun stil şablonu yazmaktır. Bunun için insanın aklına ilk gelen IF, ELSE IF, ELSE gibi bir yapı oluşturmak oluyor doğal olarak. Böyle bir yapıyı server side scripting dilleri ile kolayca yapabilirsiniz ama bu durumda her bir browser türü için farklı CSS dosyaları oluşturmanız ve onları o şekilde çağırmanız gerekecektir.

<!--[if IE]>
<style type="text/css"  rel="stylesheet" href="CSS4IE.css">
<![endif]-->
<!--[if IE 6]>
<style type="text/css"  rel="stylesheet" href="CSS4IE6.css">
<![endif]-->	

Yukarıdaki satırları sayfanıza eklediğinizde bu kodlar yalnızca Internet Explorer tarafından görülecektir. Çünkü <!-- ile başlayıp --> ile biten kod parçacıkları HTML standardı için açıklama niteliğindedir. Fakat <!-- den sonra [if IE] ifadesini gören IE meraklanıp bu kod parçacığı içerisindeki ufak kod bloğunu da çalıştıracaktır. İsterseniz yanına IE versiyon numarasını yazarak da bu sürüm için IF kontrolü yapılmasını sağlayabilirsiniz. Yani diyeceğim o ki artık yalnızca IE kullanan web tarayıcılarının çalıştırabileceği bir IF ifadesi oluşturmuş olduk. Fakat bu durumda farklı farklı CSS dosyaları oluşturup o dosyaların çalıştırılması gerekecektir. Ben ise size daha güzel bir yöntem öneriyorum. CSS içerisinde yapacağınız ufak bir notasyon ile bu stilin yalnızca Firefox'ta ya da Internet Explorer'da çalışmasını sağlayabilirsiniz. Olay şağıdaki kod parçacığında bitiyor;

.IEorFIREFOX
{
	color:red !important; /*Bu stil IE için görüntülenmeyecek, Firefox için görüntülenecek*/
	color:blue;  /*Bu stil ise IE için görüntülenecek, Firefox için görüntülenmeyecek*/
	font-size: 13px;
	font-weight: normal;
}	

Yukarıdaki gibi bir stil oluşturup bunu bir HTML öğesine uygularsanız eğer, yazan yazının IE için mavi renkte Firefox için ise kırmızı renkte olduğunu göreceksiniz. Tıpkı bu satırda yazılanlar gibi. Eğer bu satırları kırmızı rekte okuyorsanız Firefox, mavi renkte okuyorsanız ise IE kullanıyorsunuz demektir. İsterseniz tarayıcınızı değiştirip bu sayfayı tekrar açarak bu özelliği test edebilirsiniz... Ya da buradan ilgili örnek HTML dosyasını indirerek (IEorFIREFOX.html-1,26 kb) farklı web tarayıcıları için çalıştırabilirsiniz...

Yorum ekle

biuquote
  • Yorum
  • Canlı önizleme
Loading

Hakkımda...

Cem KEFELİ

Electronics and
Telecommunication Eng.
devamı...


Son yapılan yorumlar...

Comment RSS

Yasal bir uyarı...

Disclaimer"Bu web sitesinde görmüş olduğunuz bilgilerin, dokümanların ve diğer materyallerin kullanılmasından doğabilecek hiç bir sorumluluktan site sahibi sorumlu tutulamaz. Web sitesi içerisinde yer alan yazılar, yorumlar, resimler ve diğer tüm içerikler yalnızca sahibinin görüşünü yansıtmakta olup içeriğin sahibi kişilerin çalıştığı kurumları bağlayıcı hiç bir nitelik taşımamaktadır. Yapılan tüm alıntılar mutlaka kaynak gösterilerek verilmeye çalışılmaktadır. Web sitesi içerisinde bulunan ilgili materyaller, ilgili yasal kurumlar tarafından uygun görülmemesi durumda kaldırılacaktır."
General