<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web design blog &#187; browsers</title>
	<atom:link href="http://lastwebdesigner.com/tag/browsers/feed" rel="self" type="application/rss+xml" />
	<link>http://lastwebdesigner.com</link>
	<description>Antonio Fullone &#039;s personal blog about web design</description>
	<lastBuildDate>Sat, 12 Nov 2011 18:39:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Detect the user&#8217;s browser with javascript</title>
		<link>http://lastwebdesigner.com/web-design/detect-the-user-browser-with-javascript.html</link>
		<comments>http://lastwebdesigner.com/web-design/detect-the-user-browser-with-javascript.html#comments</comments>
		<pubDate>Mon, 22 Jun 2009 10:01:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[browsers]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://lastwebdesigner.com/?p=205</guid>
		<description><![CDATA[A big and boring problem for the designers is the cross-browser compatibility, expecially with the Microsoft explorer, because, as everyone knows, Microsoft is still living in his own world and not in the w3c standard world &#8230; Anyway this is one of the most frustrating situation that we must resolve when we are working on [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Flastwebdesigner.com%2Fweb-design%2Fdetect-the-user-browser-with-javascript.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Flastwebdesigner.com%2Fweb-design%2Fdetect-the-user-browser-with-javascript.html&amp;style=normal&amp;service=bit.ly&amp;hashtags=browsers,javascript&amp;b=2" height="61" width="50" title="Detect the users browser with javascript" alt=" Detect the users browser with javascript" /><br />
			</a>
		</div>
<p>A big and boring problem for the designers is the cross-browser compatibility, expecially with the <strong>Microsoft explorer</strong>, because, as everyone knows, Microsoft is still living in his own world and not in the w3c standard world &#8230; Anyway this is one of the <strong>most frustrating</strong> situation that we must resolve when we are working on a new layout.<br />
The solution used by the designer are : <a title="css hacks" rel="nofollow" href="http://www.webdevout.net/css-hacks">hacks</a>, <a rel="nofollow" href="http://web-graphics.com/mtarchive/001602.php">workaround</a> and <strong>different stylesheet for the different browse</strong>r(usually only the Microsoft browsers).<span id="more-205"></span><br />
This last is the solution that I prefer for my <strong>works</strong>. I&#8217;m not a lover of the hacks, because they usually <strong>invalidate the code</strong>, and for this reason I prefer to use a <strong>different stylesheet for the explorer.</strong> If you write a good and clean code, you don&#8217;t need to change all the styles.<br />
One of the most used solution, that I&#8217;ve used too, of course, are the <a title="condition comments html" rel="nofollow" href="http://www.quirksmode.org/css/condcom.html"><span style="text-decoration: underline;"><strong>conditional comments,</strong></span></a> to<strong> load the correct stylesheet relative to the user browser.</strong><br />
Another solution, is use a <strong>Javascript</strong> to detect the browser user and load the correct <strong>stylesheet</strong>. This is the solution that I want to talk in this post.</p>
<p>The idea is simple, and of course you can do teh same with the most afmous frameworks, but in this case I&#8217;m using only and pure Javascipt, anyway the idea is : create a variable that contains tha browser and write in the document the html code to load the stylesheet correspondent to the user browser:</p>
<blockquote><p><strong>var ievs = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));</strong></p>
<p><strong>// IF BROWSER IS IE 6 LOAD IE6 STYLE</strong></p>
<p><strong>if (ievs){</strong></p>
<p><strong>var iev=new Number(RegExp.$1);</strong></p>
<p><strong>if (iev==6) {</strong></p>
<p><strong>document.write(’&lt;link rel=”stylesheet”  href=”css/ie7style.css” type=”text/css” /&gt;’);</strong></p>
<p><strong>}</strong></p>
<p><strong>}</strong></p>
<p><strong>// ID BROWSER IS IE 7 LOAD IE7 STYLE</strong></p>
<p><strong>if (ievs){</strong></p>
<p><strong>var iev=new Number(RegExp.$1);</strong></p>
<p><strong>if (iev==7) {</strong></p>
<p><strong>document.write(’&lt;link rel=”stylesheet”  href=”css/ie7style.css” type=”text/css” /&gt;’);</strong></p>
<p><strong>}<br />
}</strong></p></blockquote>
<p>That&#8217;s all! You can try this creating a new page and visit the page using a browser <strong>Microsoft</strong> , <strong>IE 6 or 7</strong>, and look how it load the style,or , only for try, you can put and alert to see how it works:</p>
<blockquote><p><strong>i</strong><strong>f (iev==6) {</strong></p>
<p><strong>alert(&#8220;you are using explorer 6&#8243;);</strong></p>
<p><strong>}</strong></p></blockquote>
<p>Of course the <strong>conditional comments</strong> are a good solution, I usually use too, but sometimes I prefer this way, but you need to consider that if the <strong>javascript is disabled from the browser this script doesn&#8217;t works. </strong>of course there are very few uers with the javascript disabled today.</p>
<p>And hope that the<strong> Explorer 8</strong> is better than the previous and Microsoft one day will understand how is important are the standard and , especially, understand that they are not a standard &#8230;..</p>
<p>Bye!</p>
]]></content:encoded>
			<wfw:commentRss>http://lastwebdesigner.com/web-design/detect-the-user-browser-with-javascript.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

