|
CSS Browser Detection - The complete guide
|
By Afonso Ferreira Gomes
[Hits: 24558]
|
|
Different browsers, different CSS interpretations! There willbe a time when you'll need to hide some CSS rules from aparticular browser, or even all the CSS file! In this articlesI'll try to compile all possible types of Browser detectiontechnics and provide examples. So let's start with the easierone!
Browser detection for Netscape
Netscape 4 is probably the dumbest browser when it comes to CSSsupport, extremely limited and many times erroneous! As thebrowser's market share of Netscape is below 0.5% it becamenatural to hide the CSS file from it! The method used for thisis the import directive that will make the browser to display aversion of the site completely without CSS.
Here's the directive you have to call: (styletype="text/css")@import url(wise-designscom.css);(/style)
Browser Detection for IE Mac computers
This browser "died" when Microsoft announced there would be nomore updated versions of it. Now this browser fell in desuse andthere are a wide range of CSS technics that IE/Mac doesn'tinterpret well! Therefore many webmasters started to code theirCSS 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 contenteven without those rules! Now... if you have a specific area ofyour site that isn't vital to your visitors you can just hide itcompletely from this browser without having the trouble to eventry 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 content to hide here!)
The second CSS ruledisplays the section cause Ie/Mac can't seeit!
Browser Detection for Internet Explorer
For this one we'll have to use the "child selector". This ruleconsists of two elements, the parent and his child! Let it behtml>body, body being the child of html the parent! As IE don'tunderstand it, it will come a time when this knowledge will cometo 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 allother 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 setdifferent 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'tinclude the values of padding and borders. IE5 include thesevalues 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 widthwould be 6em!! God! How is that possible? Simple: 12em (Width) -4 (padding left + padding right) - 2 (border left + borderright)!
Is there any solution for this problem? Sure! A clever guy,named Tantek ?elik (you'll hear of him a lot if you read manytutorials of CSS! This is kind of the most important discoverysince the wheel on CSS community!) invented the box model hack
He said that to make browser detection work , and send adifferent 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 betaken up by the padding-left + padding-right + border-left +border-right. This would ultimately give the element a width of12em in IE5.
The 18em value will then be overridden by the second width valueof 12em by all browsers except IE5, which, for some reason,can't understand the CSS command that comes immediately afterall those squiggles. It doesn't look pretty, but it does work!
I hope this articled helped you understand the differentsituations related to browser detection in the CSS world! Atfirst it was confusing to me but with 2/3 hours of readinganyone would be able to understand this ... and understand well!For more quality articles and tutorials please visit my site athttp://www.wise-designs.com ! I'll be expecting you there!!
|
|
|
|
|
|
