CSS Browser Detection

Your resource center for web design tips, css tutorials and many more!

	Home
	Web Design Tips
	Learn HTML
	CSS Tutorials
	Resources
	Directory
	Site Map

WEB DESIGN - Whats Inside: Basic Rules on Web Design [ More ]

HTML - Whats Inside: Should You Bother Learning HTML to Build Webpages? [ More ]

CSS - Whats Inside: CSS Web Site Design Basics [ More ]

CSS Tutorials - CSS Browser Detection

CSS Browser Detection - The Complete Guide
by: Afonso Ferreira Gomes

Different browsers, different CSS interpretations! There will be a time when you'll need to hide some CSS rules from a particular browser, or even all the CSS file! In this articles I'll try to compile all possible types of Browser detection techniques and provide examples. So let's start with the easier one!

Browser detection for Netscape

Netscape 4 is probably the dumbest browser when it comes to CSS support, extremely limited and many times erroneous! As the browser's market share of Netscape is below 0.5% it became natural to hide the CSS file from it! The method used for this is the import directive that will make the browser to display a version of the site completely without CSS.

Here's the directive you have to call: (style type="text/css")@import url(wise-designscom.css);(/style)

Browser Detection for IE Mac computers

This browser "died" when Microsoft announced there would be no more updated versions of it. Now this browser fell in desuse and there are a wide range of CSS technics that IE/Mac doesn't interpret well! Therefore many webmasters started to code their CSS sites so that they would work correctly on this browsers. Contrary to Netscape users, these weren't neglected.

The hide technic:

/* Hide from IE-Mac */ #header {padding-bottom:3em} #footer {padding-top:1.5em} /* End hide */

IE/Mac won't see these commands but will display the content even without those rules! Now... if you have a specific area of your site that isn't vital to your visitors you can just hide it completely from this browser without having the trouble to even try and make it look better within the possible! Here's how:

#noiemac {display: none}

/* Hide from IE-Mac */ #noiemac {display: block} /* End hide */

The first rule hides it all from IE/Mac (e.g <div id="noiemac">content to hide here!</div>)

The second CSS ruledisplays the section cause Ie/Mac can't see it!

Browser Detection for Internet Explorer

For this one we'll have to use the "child selector". This rule consists of two elements, the parent and his child! Let it be html>body, body being the child of html the parent! As IE don't understand it, it will come a time when this knowledge will come to be handy!

The typical example of the header margin:

#header {margin-bottom:4em} html>body #header {margin-bottom:1em}

IE will use the 1st rule cause it's blind to the 2nd and all other browsers will use the 2nd one!

Browser Detection for Internet Explorer 5

At first this one was strange to me! How the hell we have to set different rules for different VERSIONS of the same browser? Well, the truth is that IE5 doesn't get right the box model! When we specify the width of an element in CSS, that doesn't include the values of padding and borders. IE5 include these values in the width, which leads to widths become smaller in it!

Let's see the following example:

#header {padding: 2em; border: 1em; width: 12em}

For all browsers this width would be 12em! For IEe the width would be 6em!! God! How is that possible? Simple: 12em (Width) - 4 (padding left + padding right) - 2 (border left + border right)!

Is there any solution for this problem? Sure! A clever guy, named Tantek Çelik (you'll hear of him a lot if you read many tutorials of CSS! This is kind of the most important discovery since the wheel on CSS community!) invented the box model hack

He said that to make browser detection work , and send a different CSS rule to IE5 you would use the following:

#header {padding: 3em; border: 1em; width: 18em; voice-family: ""}""; voice-family:inherit; width: 12em}

IE5 will use the first width value of 18em! 6em of which will be taken up by the padding-left + padding-right + border-left + border-right. This would ultimately give the element a width of 12em in IE5.

The 18em value will then be overridden by the second width value of 12em by all browsers except IE5, which, for some reason, can't understand the CSS command that comes immediately after all those squiggles. It doesn't look pretty, but it does work!

I hope this articled helped you understand the different situations related to browser detection in the CSS world! At first it was confusing to me but with 2/3 hours of reading anyone would be able to understand this ... and understand well! For more quality articles and tutorials please visit my site at http://www.wise-designs.com ! I'll be expecting you there!!

About the Author

Afonso Ferreira Gomes is the webdesigner for Wise Designs Webmasters at http://www.wise-designs.com . The site's objective is to help any webdesigner in his work by providing templates, tutorials, articles, scripts, graphics and all the resources anyone can think of!