• 23-10-2009, 16:31:07
    #1
    S.a/A.s arkadaşlarım ve hocalarım benim sizlerden bir isteğim olucak.
    Ben Web Siteleri için arayüz kodluyorum css&xhtml olarak, sorunum şu yapmış olduğumuz temel css dosyasını her tarayıcı kendine göre yorumladığı için tarayıcı uyumsuzlukları çıkabiliyor malesef. örneğin;yapmış olduğumuz iş firefox3.5 ve ie8 de aynı görüntüyü sunarken opera da ufakta olsa bi takım giderilmesi gereken hatalar olabiliyor bir iş yaptığımızda müşterilerimizin bizlerden beklediği tüm tarayıcılarda aynı görüntüyü elde etme hoş böyle olunca css sorunlarının olduğu bi kodlamada tarayıcı uyumsuzluklarını önlemek için ie6 için ie6.css ie7 için ie7.css opera için opera.css gibi bir mantık düşündüm (acemiyim belkide gerek yoktur) bilemiyorum bunuda sizlerden öğreneceğim.
    Düşüncem bu yani ziyaretçi hangi browser ile sayfayı açmışsa o browserı tanıyıp onun için hazırlamış olduğum css dosyasını seçerek css yorumlamasını yapmasını sağlamak,
    javascript browser detection şeklinde google da arama yapıp bişeyler öğrenmeye çalıştım ama yeterli bilgi sahibi olmadığım ve kaynakların genelde hep ingilizce olmasından dolayı olayı tama olarak anlayamadım.(Sanırım bu javascript browser detection:tarayıcıyı tanımak anlamına geliyor) malesef bu yeterli değil işin biraz derinliklerine inince
    baktığım bazı diğer sitelerde gine ingilizce içerikli ama yarım yarım konulardan yarım yarım kodlar keserek yapmak istediğimi mantık olarak bildiğim için kod örneklerini inceledim biraz ne yapabilirim diye, madem tarayıcıyı tanıyabiliyoruz öyleyse onu tanıdıktan sonra css'e yönlendirmek çok zor olmamalı diye düşündüm.
    araştırmalarımda faydalandığım siteler
    Dynamic Drive DHTML(dynamic html) & JavaScript code library , WebmasterWorld News and Discussion for the Web Professional
    gine aynı şekilde bu sitelerde Dynamic drive için javascript browser detect
    webmasterworld için javascript browser detection
    şeklinde arama yaptım.
    Biraz inceledim sonuç olarak henüz çok iyi bir web-arayüz kodlayıcısı olmadığım için şu şekilde bi javascript hazırladım ama sanırım beceremedim yani gine olmadı çünkü =)
    yapmak istediğim şeyi anlatabilmişimdir inşallah bunu forumda aradım ama bulamadım o yüzden benim gibi bu konuda sorun yaşayan arkadaşlarım içinde faydalı bi başlık olsun diye biraz detaya indim çok gevezelik ettimse affola saygılarımı sunarak, siz değerli hocalarımdan ve kardeşlerimden bu konuyu çözebilmek için yardımlarınızı bekliyorum...
    Kendimce Kesip Biçtiğim Bişeylerden Çıkan Kod Parçası
    yanlışlarımı hakkında yardımlarınızı bekliyorum ve nasıl çözerim bu problemi? başka fikri bilgisi olan varsa bu başlıkta yardımcı olursa sevinirim, saygılar...
    <script language="javascript" type="text/javascript">
    var browser_type=navigator.appName
    var browser_version=parseInt(navigator.appVersion)
    //if IE 6
    if (browser_type=="Microsoft Internet Explorer"&&browser_version=6)
    document.write('<link rel="stylesheet" href="../css/ie6.css" TYPE="text/css">');
    //if IE 7
    else if (browser_type=="Microsoft Internet Explorer"&&browser_version=7)
    document.write('<link rel="stylesheet" href="../css/ie7.css" TYPE="text/css">');
    //if opera
    else if(browser_type=="opera" && browser_version=10)
    document.write('<link rel="stylesheet" href="../css/opera.css" TYPE="text/css">');
    //Default goto page (NOT IE 6 and NOT IE 7 and NOT Opera)
    else
    document.write('<link rel="stylesheet" href="css/style.css" TYPE="text/css">');
    </script>
  • 23-10-2009, 17:41:02
    #2
    opera için ayrı firefox için ayrı yapmana gerek oldugunu sanmıyorum xhtml valid ise sorunsuz çalışır sadece int explorerda sorun olabilir onuda şu şekilde çözersin;
    <!--[if IE 6]>
    	<link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]--> 
    <!--[if IE 7]>
    	<link rel="stylesheet" type="text/css" href="css/ie7.css" />	
    <![endif]--> 
    <!--[if IE]>
    	<link rel="stylesheet" type="text/css" href="css/ie.css" />	
    <![endif]-->
  • 23-10-2009, 18:04:18
    #3
    cocainer adlı üyeden alıntı: mesajı görüntüle
    opera için ayrı firefox için ayrı yapmana gerek oldugunu sanmıyorum xhtml valid ise sorunsuz çalışır sadece int explorerda sorun olabilir onuda şu şekilde çözersin;
    <!--[if IE 6]>
    	<link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]--> 
    <!--[if IE 7]>
    	<link rel="stylesheet" type="text/css" href="css/ie7.css" />	
    <![endif]--> 
    <!--[if IE]>
    	<link rel="stylesheet" type="text/css" href="css/ie.css" />	
    <![endif]-->
    Hocam cevabınız için teşekkür ediyorum explorer için vermiş olduğunuz kodları kullanıyorum açıkçası gerçi paylaştığınız için çok sevindim çok teşekkür ederim.
    Ancak tasarım valid olsa dahi benim amacım bu mantığı diğer tarayıcılar içinde sağlamak bazen ufak tefek te olsa kaymalar vs. bi takım hatalar olabiliyor bunları engellemek açısından önemli bir mevzu, yukardaki explorer için yaptığımız kontrolü diğer tarayıcılar içinde nasıl yapabiliriz veya yapabilirmiyiz acaba?
    Bunun için javascript'e ihtiyacımız varmıdır? veya Javascript olmadan nasıl yapabiliriz.Javascript gerekirse kodlamayı nasıl yapmak gerekir.?
    Yardımlarınızı bekliyorum bu çaylak kardeşinize yardım ederseniz sevinirim.iyi çalışmalar dilerim.
  • 23-10-2009, 20:39:33
    #4
    Arkadaşlar cocainer hocam sağolsun bana P.m'den mesaj olarak tüm web browserları tanıyan javascript kodunu paylaştı bende başlıktan sizlerle paylaşıyorum...
    Not:Bu kod sadece tüm tarayıcıları tanımamızı sağlıyor.Artık bundan sonrası php veya javascript ile sonuç hangisine eşitse onun karşısına kullanmak istediğimiz css 'e yönlendirme yapıcaz.tarayıcı firefoxa eşitse onu if kontrolüyle firefox.css'e yönlendireceğiz..
    Açıkçası ben bunu kodluyamam ama aşağıda verdiğim kodları kullanarak bu yönlendirmeyi yapabilecek bir arkadaşımız olursa yardımlarını bekliyoruz bu başlık altında bizlerle paylaşmasını rica ediyorum kendi adıma ve diğer arkadaşlar adına
    Tüm browserları tanıyan javascript kodu şu şekilde arkadaşlar :
    <script type="text/javascript">
    <!--
    var BrowserDetect = {
    	init: function () {
    		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    		this.version = this.searchVersion(navigator.userAgent)
    			|| this.searchVersion(navigator.appVersion)
    			|| "an unknown version";
    		this.OS = this.searchString(this.dataOS) || "an unknown OS";
    	},
    	searchString: function (data) {
    		for (var i=0;i<data.length;i++)	{
    			var dataString = data[i].string;
    			var dataProp = data[i].prop;
    			this.versionSearchString = data[i].versionSearch || data[i].identity;
    			if (dataString) {
    				if (dataString.indexOf(data[i].subString) != -1)
    					return data[i].identity;
    			}
    			else if (dataProp)
    				return data[i].identity;
    		}
    	},
    	searchVersion: function (dataString) {
    		var index = dataString.indexOf(this.versionSearchString);
    		if (index == -1) return;
    		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    	},
    	dataBrowser: [
    		{
    			string: navigator.userAgent,
    			subString: "Chrome",
    			identity: "Chrome"
    		},
    		{ 	string: navigator.userAgent,
    			subString: "OmniWeb",
    			versionSearch: "OmniWeb/",
    			identity: "OmniWeb"
    		},
    		{
    			string: navigator.vendor,
    			subString: "Apple",
    			identity: "Safari",
    			versionSearch: "Version"
    		},
    		{
    			prop: window.opera,
    			identity: "Opera"
    		},
    		{
    			string: navigator.vendor,
    			subString: "iCab",
    			identity: "iCab"
    		},
    		{
    			string: navigator.vendor,
    			subString: "KDE",
    			identity: "Konqueror"
    		},
    		{
    			string: navigator.userAgent,
    			subString: "Firefox",
    			identity: "Firefox"
    		},
    		{
    			string: navigator.vendor,
    			subString: "Camino",
    			identity: "Camino"
    		},
    		{		// for newer Netscapes (6+)
    			string: navigator.userAgent,
    			subString: "Netscape",
    			identity: "Netscape"
    		},
    		{
    			string: navigator.userAgent,
    			subString: "MSIE",
    			identity: "Explorer",
    			versionSearch: "MSIE"
    		},
    		{
    			string: navigator.userAgent,
    			subString: "Gecko",
    			identity: "Mozilla",
    			versionSearch: "rv"
    		},
    		{ 		// for older Netscapes (4-)
    			string: navigator.userAgent,
    			subString: "Mozilla",
    			identity: "Netscape",
    			versionSearch: "Mozilla"
    		}
    	]	
    };
    BrowserDetect.init();
    // -->
    </script>
    <script type="text/javascript">
    <!--
    document.write(BrowserDetect.browser + ' ' + BrowserDetect.version);
    // -->
    </script>
    Bu kodu kullanarak tarayıcı firefox ise firefox.css'e opera ise opera.css'e chrome ise chrome.css'e yönlendirmesini sağlayan kodlamayı nasıl yaparız?
    hocalarımdan yardımlarını rica ediyorum, herkeze hayırlıakşamlar
  • 23-10-2009, 22:22:05
    #5
    Quirksmode.org/Tarayıcı tespiti - Ceviz Viki Belki burası yardımcı olur
  • 23-10-2009, 23:52:39
    #6
    Hocam teşekkür ediyorum ceviz wikisini inceledim tanıdığım bi arkadaşıma sordum sağolsun bana bu konuda yardımcı oldu acaba yönlendirmeyi bu şekildemi yapıcaz bi kontrol edebilirmisiniz, bu şekilde yaptım
    dataBrowser: [
    {
    string: navigator.userAgent,
    subString: "Chrome",
    identity: "Chrome"
    if (dataBrowser=Chrome)
    {
    document.write("<link rel="stylesheet" type="text/css" href="css/main.css" />)
    }
    },
    ancak bi faydası olmadı nerde yanlış yaptım veya yazmış olduğumuz kod mu yanlış hatalarımı söylerseniz sevinicem çok saolun..
  • 24-10-2009, 00:02:20
    #7
    javascriptten anlayan arkadaşlar çok daha fazlasıyla yardım edeceklerdir, bende javascripti bildiğim tam anlamıyla söylenemez. Ama bu kadar kasmaya gerek yok bununla zaman kaybediceğine w3 standartlarını öğrenmeye çalışman daha yararlı olucaktır ileride daha buyuk sıkıntılar yaşamaktan kurtulursun
  • 24-10-2009, 00:06:48
    #8
    cocainer adlı üyeden alıntı: mesajı görüntüle
    javascriptten anlayan arkadaşlar çok daha fazlasıyla yardım edeceklerdir, bende javascripti bildiğim tam anlamıyla söylenemez. Ama bu kadar kasmaya gerek yok bununla zaman kaybediceğine w3 standartlarını öğrenmeye çalışman daha yararlı olucaktır ileride daha buyuk sıkıntılar yaşamaktan kurtulursun

    O doğru olanı aslında ama işte bir iş yapıyorsunuz bazı hatalar çıkabiliyor malesef çünkü şu tarayıcıların hepsi akıllı değil malesef =) ne bilim işte bi şekilde sorunumu şuan için çözüm olacaktı bunu yapabilseydim karamsarlığa gerek yok javascript konusunda bilgili arkadaşlar yardım edeceklerdir sanırım biraz sabır lazım saygılar bu arada emin olun w3 için uygun olmasına elimden geldiğince dikkat ediyorum tabi eksiklerimiz hatalarımızda var hoş olmasaydı zaten şu an bu başlık olmazdı neyse artık bekliyelim sevgili hocalarımız duruma el koysun lar benim gibi bu tarayıcıdan müzdarip kardeşlerimle bende bi bayram sevinci yaşayalım
  • 24-10-2009, 00:31:54
    #9
    Evet arkadaşlar sorunu saolsun bi kardeşim çözdü burdan da kendisine teşekkür ediyorum gerçi bu yazıyı okurmu bilmem ama çok sevindirdi beni saolsun, bende sizlerle paylaşmak istedim inşallah benim gibi bu konuda sorunlar yaşayan kardeşlerime bi nebze faydası olur....
    Şimdi şu şekilde olucak arkadaşlar =)
    /** Burada tarayıcı tanımamızı sağlayan javascript kodu başlıyor **/
    <script type="text/javascript">
    <!--
    var BrowserDetect = {
    	init: function () {
    		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    		this.version = this.searchVersion(navigator.userAgent)
    			|| this.searchVersion(navigator.appVersion)
    			|| "an unknown version";
    		this.OS = this.searchString(this.dataOS) || "an unknown OS";
    	},
    	searchString: function (data) {
    		for (var i=0;i<data.length;i++)	{
    			var dataString = data[i].string;
    			var dataProp = data[i].prop;
    			this.versionSearchString = data[i].versionSearch || data[i].identity;
    			if (dataString) {
    				if (dataString.indexOf(data[i].subString) != -1)
    					return data[i].identity;
    			}
    			else if (dataProp)
    				return data[i].identity;
    		}
    	},
    	searchVersion: function (dataString) {
    		var index = dataString.indexOf(this.versionSearchString);
    		if (index == -1) return;
    		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    	},
    		dataBrowser: [
    		{
    		string: navigator.userAgent,
    		subString: "Chrome",
    		identity: "Chrome"
    		},
    		{ 	string: navigator.userAgent,
    			subString: "OmniWeb",
    			versionSearch: "OmniWeb/",
    			identity: "OmniWeb"
    		},
    		{
    			string: navigator.vendor,
    			subString: "Apple",
    			identity: "Safari",
    			versionSearch: "Version"
    		},
    		{
    			prop: window.opera,
    			identity: "Opera"
    		},
    		{
    			string: navigator.vendor,
    			subString: "iCab",
    			identity: "iCab"
    		},
    		{
    			string: navigator.vendor,
    			subString: "KDE",
    			identity: "Konqueror"
    		},
    		{
    			string: navigator.userAgent,
    			subString: "Firefox",
    			identity: "Firefox"
    		},
    		{
    			string: navigator.vendor,
    			subString: "Camino",
    			identity: "Camino"
    		},
    		{		// for newer Netscapes (6+)
    			string: navigator.userAgent,
    			subString: "Netscape",
    			identity: "Netscape"
    		},
    		{
    			string: navigator.userAgent,
    			subString: "MSIE",
    			identity: "Explorer",
    			versionSearch: "MSIE"
    		},
    		{
    			string: navigator.userAgent,
    			subString: "Gecko",
    			identity: "Mozilla",
    			versionSearch: "rv"
    		},
    		{ 		// for older Netscapes (4-)
    			string: navigator.userAgent,
    			subString: "Mozilla",
    			identity: "Netscape",
    			versionSearch: "Mozilla"
    		}
    	]	
    };
    BrowserDetect.init();
    // -->
    /** Burada tarayıcı tanımamızı sağlayan javascript kodu bitti **/
    </script>
    /** Asıl sorunumuz olan css yönlendirmelerini bu js de yapıyoruz **/
    <script type="text/javascript">
    if (BrowserDetect.browser=="Explorer")
    {
    document.write('<link href="css/ie6.css" rel="stylesheet" type="text/css" />'); 
    }
    if (BrowserDetect.browser=="Chrome")
    {
    document.write('<link href="css/chrome.css" rel="stylesheet" type="text/css" />'); 
    }
    /** 
    Asıl sorunumuz olan css yönlendirmeleri burada bitti
    Örnekleri dilediğiniz gibi çoğaltabilrisiniz.Yukarıda sadece chrome ve ie6 için yönlendirme yapılmıştır.!
    **/
    </script>
    İşinize yaraması dileğiyle bana yardımcı olan Engin kardeşime çok teşekkür ediyorum.