Sayfa İçinden CSS değiştirme

X Files

Yarbay

5319 Mesaj

Tüm Başarılarını Gör

Daha önceden vaktim olur ise bilmeyen arkadaşlar için bu değişim olayını anlatacağımı söylemiştim. Şimdi basitçe bir şeyler hazırladım.

Başlamadan önce az çok bir konuda sizleri de bilgilendirmek istiyorum.
Css yani Still dosyalarını bu şekilde yazırlamak istiyorsanız harici bir şekilde muhafaza etmeniz sizin için daha iyi olacaktır.

Ayrıca tarayıcılar içinde bu şekilde değiştirme yapma imkanı sağlanabilmektedir. Bildiğiniz gibi Firefox, IE ve Netscape gibi tarayıcılar kodları farklı şekillerde tanımlayabilirler. Algılama aynı olacaktır sadece görüntüde değişik sonuçlar elde edebilirsiniz. Örneğin table borderlarını 1px kalınlığında yaptığınızda IE de daha ince Firefox ta daha kalın bir çizgi görüntüleyebilirsiniz. Dolayısı ile bunu kullanıcıya seçme şansı vermeden bir Java Script eklentisi ile kullanıcıların browser ( taryıcılarına göre otomatikmen ) tercihlerine göre istediğiniz stillerin görüntülenmesini sağlamak mümkün.

Bu java kodu basitçe şöyle;

<head> 
  <script language="javascript" typ="text/javascript> 
  <!-- . 
  var browser=navigator.appName 
  NS4=(browser=="Netscape")?true:false 
   
  if(NS4){document.write("<link rel=\"stylesheet\" href=\"netscapeiciyapilan.css\">")} 
  else{document.write("<link rel=\"stylesheet\" href=\"netscapeharicleriicinyapilan.css\">")} 
  // . --> 
  </head>

Bunun gibi bir kod ile değişik browserlar için değişik css dosyalarına yönlendirme yapılabilir. Kodu biraz daha değiştirip ayrıca sayfalara vs vs bile yönlendirme yapabilirsiniz...

Bu seferki anlatımımız sadece linkler e tıklayarak css leri değiştirmek olacak. İstersek bunu seçim, yada radius butonları yada imagelara yani resimlere tıklayarak ta yapabiliriz. Aslında durum aşağı yukarı hepsi için aynı mantıkta çalışıyor.

İlk önce head taglarımızın arasına her zaman olduğu gibi css dosyamızı yazacağız.

yani standart tek css dosyamız olduğunda kod basitçe şu şekilde gözükmekte...

<link rel="stylesheet" type="text/css" href="xfiles.css" />

Bu kod ile ( yollarımız doğru olduğunda tabiki ) xfiles.css dosyasındaki tanımladığımız still düzenini görüntüleyeceğiz normal olarak.

ancak css değiştirmek istiyorak dikkat etmemiz gereken nokta Js yani Java script dosyaları bu değişikliği css linklerinin içindeki title dan almakta. o yüzden her css kod satırımız için title belirlememiz gerekiyor.

<link rel="stylesheet" type="text/css" title="defult" href="xfiles.css" />

Dolayısı ile kod bu halde gözükecek. Ancak birden çok css dosyası olmak zorunda... peki diğer css leri nereye ve nasıl yazmamız gerekiyor ?

<link rel="stylesheet" type="text/css" title="defult" href="xfiles.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="conewar" href="conewar.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="XIII" href="XIII.css" />

Burada hazırladığım 3 değişik css dosyası var. Dolayısı ile 3 değişik kod satırı var. Ancak dikkatinizi çektimi bilmem 3 tane aynı satır olmasına rağmen browser ilk css dosyasını defult olarak yükledi. Aslında yazdığınız kodlara göre değişik versiyondaki ve değişik firmaların browserları tanımlanan kodlar arasından en son yazılanı seçer ve defult olarak yükler. Burası biraz karışık gelebilir o yüzden kafanıza takılır ise bu kısmı yazıda yokmuş gibi düşünebilirsiniz.

Aslında burada yazan kodlarda yukarıda table border örneğinde verdiğim ve browser a göre css seçimi yapabileceğimiz gibi aynı css dosyasının içine farklı tarayıcılar için farklı kodlar da yazabiliriz.
Örneğin 25px lik bir tepe boşluğu IE de çok büyük gözükmeyecektir ama Opera gibi tarayıcılarda inanın bu miktar çok büyük; dolayısı ile bizim elimizde de 2 kod bulunmakta,

#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}

burada 1. satırı yani kuarlı IE diğerleri için ise 2. satırı okutmak istiyoruz. o zaman "child selector command" diye adlandırılan kuralı uygulamamız gerekiyor; yani kod şöyle olacak

#header {margin-bottom: 25px;}
html>body #header {margin-bottom: 10px;}

dolayısı ile bu css kuralında IE 1. satırı uygulayacak ve diğer tarayıcılar 2. satırı uygulayacak.
Note : Bu kural Tarayıcı versiyonları değiştikçe değişebilir.

http://www.webdevout.net/browser_support_css.php
Burada çeşitli tarayıcılardaki gözüken kod farklılıklarına göz atabilirsiniz..

Şimdi tekrar konuya dönelim...

Bu kodlarımızı head tagları arasına yazdıktan sonra şimdi sıra geldi değişikleri sağlayacak olan js dosyamızı yine head tagları arasına yazmakta...

<script type="text/javascript" src="styleswitc.js"></script>

Burada js dosyasının adını ve yolunu değiştirmek mümkün, yani adı ve yolu tabiki önemli ama asıl önemli olan değişiklşiği sağlayacak kodlar. Kodlar da js dosyasının içinde.

Js dosyası yukarıda bahsettiğim gibi title dan css leri tanımlıyor ve cookie gibi bir çok denetleme vs yapıyor ama bunlara da değinip bu kodlar ile yani tanışan arkadaşların fazla kafalarını karıştırmayalım.

Sonuç olarak css değiştirmek için yazılması gereken kodlar şu şekilde toparlayabiliriz.

<link rel="stylesheet" type="text/css" title="defult" href="xfiles.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="conewar" href="conewar.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="XIII" href="XIII.css" />
<script src="styleswitch.js" type="text/javascript"></script>

Şimdi sıra basitçe linkleri ve css lerin değişmesini sağlayalım...

değişimin yapılacağı yere link şeklinde gözüken yani istediğimiz herhangi bir yere şunları yazıyoruz;

<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=9664577&url=javascript:chooseStyle('defult', 60)" checked="checked" data-href="javascript:chooseStyle('defult', 60)" checked="checked">X Files CSS yap</a><br>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=9664577&url=javascript:chooseStyle('conewar', 60)" data-href="javascript:chooseStyle('conewar', 60)">Conewar Css Yap</a><br>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=9664577&url=javascript:chooseStyle('XIII', 60)" data-href="javascript:chooseStyle('XIII', 60)">XIII Css Yap</a>

işlem bu kadar basit. dolayısı ile linklere tıkladığımızda css ler değişecek.

Peki daha değişik yöntemler kullanamazmıyız ? Tabiki kullanırız ...

<form id="switchform">
<input type="radio" name="choice" value="defult" onClick="chooseStyle(this.value, 60)">XFiles Css Yap<br />
<input type="radio" name="choice" value="conewar" onClick="chooseStyle(this.value, 60)">Conewar Css Yap<br />
<input type="radio" name="choice" value="XIII" onClick="chooseStyle(this.value, 60)">XIII Css Yap</form></td>

Bu kodlar radio butonları ile değişim yapmamızı sağlar;

<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="defult" selected="selected">Xfiles Stili</option>
<option value="conewar">Conewar Stili</option>
<option value="XIII">XIII Stili</option>
</select>
</form>

Bunlarda Seçim panceresi ( Form usulu ) değişim yapmamızı sağlıyor.

Ayrıca yine senenin 365 günü her gün değişik css dosyaları belirleme gibi şanslarımız da var... Buraya girmeyelim... Bir dahaki sefere yazalım ki hazmetmesi kolay olsun...

Ve geldik son bilgilendirme notlarına.
Değişik css ler uyguladık, uyguladıkta örneğin 1. css mizde font olarak arial seçtik ve font size ı 12 yaptık, diğer css te yani 2. nolu css te ise tuttuk fontu Verdana yaptık; Verdana arial e göre daha fazla pixel kapladığı için aynı sizelarda tabiki arial ile kıyaslayınca, yada 1. side normal 2. de bold yaptık, dolayısı ile tanımladığımız tablolarda tablo ölçüleri tam olarak kullandığımızda yani 300 e 300 bir tablo yaptık ve burada düşük pixelli bir font kullandık, fakat tabloda yer yani hiç boşluk kalmadı, 2. css tede daha fazla pixel kaplayan bir css kullandık sizce ne olur ? Tablo ister istemez kayar... Dolayısı ile tasarımın bozulmasına neden oluruz. Bu tip iş kazalarını önceden önlemek bilgisayar başında "öfff yaaaa" dememek için bu ve buna neden olabilecek çözününürlülük hesaplarımızı önceden yapmamız gerekiyor. Çözününürlülük için bir den çok site hazırlayıp yönlendirme yapabiliriz; ama bu durum resmen basit bir site çalışması için bile "ölme eşeğim ölme" durumuna düşebiliriz. Bilginiz olsun, yaratıcılıkta ve yapımın sınırı yok.

Eh son olarakta o kadar anlattık ama anlamadım mı diyorsunuz ? O zaman buyurun bir örnek dosya...
İndirin basit bir html sayfası, bu anlattıklarımın hepsi var... Kodları değiştirin keyfinize bakın...

Bilgi : Bu yazı nın teknik bilgi ve bazı dosyaları ( js dosyası ) alıntıdır. ama yazı baştan sona kadar tarafımdan yazılmıştır ve anlatımı daha ziyade acemi sayılabilecek arkadaşlar için yaptım. Okuyan beğenen istediği kısmı yada yazının tamamını istediği yerde paylaşmakta özgürdür. İşte alıntıdır gibi benim açımdam saçma sapan olarak düşündüğüm şeyleri yazmanıza gerek te yok.

Verdiğim dosyalar temizdir. Şüğkür lamerlik felan yapmam ama yinede dosyaları public bir yerde paylaştığım için ve sonradan değiştirilebileceği için kullanıp kullanmamak ta sizlere kalmış...

http://www.hemenpaylas.com/download/1745959/css1.rar.html
Linki kopyalayın ve yeni bir tarayıcıya yapıştırarak enterlayın..

Yazım ve harf hataları için kusura bakmayın ve hoşça kalın. Bir sonraki anlatımda görüşmek üzere.

Edit: Düzeltme ve eklentiler yapıldı...

< Bu mesaj bu kişi tarafından değiştirildi X Files -- 3 Ekim 2006; 23:12:51 >

Benzer içerikler